Enlazar a una frase: URLs con fragmento de texto

Enlace a texto resaltado

Enlazar a un texto: URLs con fragmento y copiar enlace al texto destacado | We.Inc

Crea un enlace que se desplaza hasta una frase de cualquier página y la resalta usando #:~:text=. Sintaxis, reglas de codificación, compatibilidad con navegadores, estilos con ::target-text y un generador de enlaces.

Un fragmento de texto es un añadido a una dirección web, #:~:text= seguido de palabras de la página, que hace que el navegador se desplace hasta esas palabras y las resalte. La opción Copiar enlace al texto destacado de Chrome lo genera por ti, y también puedes crearlo a mano con las partes opcionales de inicio, fin, prefijo y sufijo.

Primeras versiones de navegador compatibles con fragmentos de texto (caniuse, octubre de 2026)

Navegador
Compatible desde

Chrome

Edge

Safari

Firefox

Enviar a un cliente a la línea exacta de tu política de devoluciones, o señalar a un cliente un párrafo concreto de una propuesta larga, es mejor que decir "baja un poco". Los enlaces con fragmento de texto lo consiguen solo con una URL más larga; el propietario de la página no tiene que añadir anclas. Pega una dirección y un pasaje en el generador para crear uno.

Copia la dirección de la página a la que quieres enlazar.
Copia de esa página las palabras exactas que quieres resaltar, manteniendo cada parte dentro de un mismo párrafo o título.
Para un pasaje largo, indica solo las primeras palabras como inicio y las últimas como fin.
Añade un prefijo o un sufijo solo si las mismas palabras aparecen más de una vez en la página.

La coincidencia no distingue mayúsculas, así que da igual cómo escribas tus palabras.
Si nada coincide, MDN dice que el fragmento se ignora y la página se abre por arriba, así que un enlace roto falla sin molestar.
Si editas la página más adelante, el enlace puede dejar de resaltar. Elige un texto que sea poco probable que cambie.
Para resaltar dos pasajes distintos, únelos con un ampersand: #:~:text=first&text=second.

Preguntas frecuentes

¿Cómo copio un enlace a un texto resaltado en Chrome?

Selecciona el texto en la página, haz clic derecho y elige Copiar enlace al texto destacado. La Ayuda de Chrome indica que, si no puedes seleccionar esta opción, puede que la función no funcione con ese contenido.

¿Los enlaces con fragmento de texto funcionan en Firefox y Safari?

Sí, en las versiones actuales. caniuse indica compatibilidad desde Safari 16.1 y Firefox 131, además de Chrome 81 y Edge 83. Los navegadores antiguos simplemente abren la página por arriba.

¿Por qué mi enlace con fragmento de texto no resalta nada?

Puede que las palabras no aparezcan exactamente como las escribiste, que una parte abarque dos párrafos o que un guion del texto no estuviera codificado con porcentaje. Según MDN, el texto dentro de un iframe nunca se busca.

¿Mis propios scripts pueden leer el fragmento de texto?

No. MDN explica que los navegadores eliminan la directiva :~: de la URL durante la carga, así que los scripts de la página no pueden leerla. Puedes detectar la compatibilidad con document.fragmentDirective.

¿Puedo impedir que otros enlacen así a textos de mi sitio?

Según MDN, los navegadores basados en Chromium respetan una cabecera de respuesta Document-Policy: force-load-at-top que excluye una página del desplazamiento por fragmento de texto.

Las partes de la sintaxis

La forma completa es #:~:text=[prefix-,]textStart[,textEnd][,-suffix]. Solo textStart es obligatorio. Si añades textEnd, el navegador resalta todo lo que va desde las palabras de inicio hasta las de fin.
El prefijo termina con un guion y el sufijo empieza con uno. No se resaltan; solo le indican al navegador a qué aparición de una frase repetida te refieres.

Reglas de codificación

Cada parte debe codificarse con porcentaje, lo que convierte los espacios en %20. MDN añade que el propio guion debe codificarse como %2D, porque un guion sin codificar se interpretaría como marcador de prefijo o sufijo.
Las comas y los ampersands separan partes y fragmentos, así que codificarlos también, como %2C y %26, evita que se malinterpreten. El generador de esta página hace todo esto por ti.

Ejemplos de cada forma

Formas de fragmento de texto y lo que resaltan

Fragmento
Resalta

La primera aparición de "opening hours"

Desde "Delivery takes" hasta "business days"

"closed" solo donde va después de "Saturday"

El primer "price" y el primer "deposit"

Da estilo al resaltado en tu propio sitio

Los navegadores eligen un color de resaltado por defecto. El pseudoelemento ::target-text te permite adaptarlo a tu marca.

Colores personalizados de ::target-text

Mantén un contraste fuerte entre el texto y el color de resaltado.

Detección de compatibilidad

document.fragmentDirective es un objeto en los navegadores compatibles y undefined en los demás.

Generador de enlaces con fragmento de texto

Dirección de la página

Palabras que resaltar (o el inicio de un pasaje largo)

Final del pasaje (opcional)

Palabras justo antes (opcional)

Palabras justo después (opcional)

Tu enlace

Abrir el enlace en una pestaña nueva

Escribe una dirección completa que empiece por https://

Escribe las palabras que quieres resaltar.

Empieza gratis · Sin tarjeta de crédito