2009-11-29 24 views
5

¿Es posible resaltar texto en un documento HTML usando sin envolverlo con <span> o cualquier otra etiqueta para ese asunto?¿Cómo resaltar el texto HTML sin envolverlo con etiquetas?

Por ejemplo, en el código HTML <p>The quick fox</p> me gustaría resaltar quick pero sin agregar un elemento DOM a su alrededor. Agregar un elemento DOM a un elemento primario está bien.

Gracias!

+4

¿Por qué quieres hacer esto? – DOK

+1

Me gustaría resaltar (usando recuadros delimitadores) MÚLTIPLES elementos de búsqueda. Sin embargo, imagine los siguientes 2 elementos de búsqueda: "The quick" y "quick fox". Si resalto "Lo rápido" al envolverlo, se convertirá en un nodo TEXTO independiente y dificultaría encontrar "zorro rápido". Una técnica en la que estoy pensando es: 1. Agregando temporalmente un elemento . 2. Encontrar el cuadro delimitador del elemento (utilizando desplazamiento(), ancho, alto). 3. Eliminando el elemento anterior. 4. Agregar un cuadro con las dimensiones anteriores al contenedor. Podría funcionar si el texto no está ajustado ... – Sleepster

Respuesta

8

No, no es posible.

No puede indicarle al navegador que represente un fragmento de texto de forma diferente sin cambiar el DOM de forma inherente, independientemente de si lo hace de forma estática o dinámica (con Javascript, por ejemplo, como paso de procesamiento posterior).

+1

No necesita cambiar el DOM si sus píxeles cambian en una superposición de lienzo transparente. –

+0

¿Cómo obtendrías la posición absoluta de una pieza de texto sin cambiar el DOM? –

+0

Agregue el elemento al DOM, descubra su posición, luego bórrelo y normalice(). – Sleepster

0

No es posible.

Si simplemente no desea etiquetas en el código fuente original, podría ser posible mediante la adición de etiquetas más tarde utilizando Javascript Magic. Se podría hacer algo como

<p highlight="quick">The quick fox</p> 

y escribir una función jQuery/Prototype/plain JS para resaltarlo sobre la marcha, pero ¿para qué y por qué? Si elaboras un poco, alguien puede tener una idea.

0

La única manera de hacer esto de lo que puedo imaginar sería usar el elemento <canvas>, y renderizar absolutamente todo a mano.

1

Es posible si utiliza un elemento absolutamente posicionado con una imagen de fondo repetitiva transparente o un color de fondo transparente (usando rgba o hsla) y colóquelo sobre el área seleccionada.

Otra forma de hacerlo sería tener un elemento canvas completamente posicionado sin fondo que ocupe toda la ventana del navegador y dibuje un rectángulo transparente sobre la selección.

+0

¿Cómo obtendría la posición absoluta de una pieza de texto sin cambiar el DOM? –

+0

Agregue el elemento al DOM, descubra su posición, luego bórrelo y normalice(). – Sleepster

Cuestiones relacionadas