Esto no es posible simplemente con CSS
. Sin embargo, puedes usar una regex y la función replace
de Javascript
para mostrar todas las ocurrencias de una palabra en un texto de un color determinado.
Lo que hago en este caso es reemplazar (detectando con una regex donde está la palabra hola
) el hola
original por un nuevo hola
que va estar contenido dentro de un span
con una clase azul
. Esta clase va a ser la que le de el estilo a la palabra.
Ejemplo:
var span = document.getElementById("texto");
var texto = span.innerHTML;
var textoReemplazado = texto.replace(/hola/g, "<span class=\"azul\">hola</span>");
span.innerHTML = textoReemplazado;
.azul{
color: blue;
}
<span id="texto">Texto hola este texto en el que pone hola, y a su vez otra vez hola, pero hola, y hola, y hola otra vez de nuevo.</span>
OBSERVACIÓN: Este ejemplo no funcionaría si recuperaras el HTML de un contenedor (el cual recuperará también el HTML de los elementos hijos que contenga) si alguno de los elementos hijos tiene como id
o clase
la palabra clave que queremos reemplazar, ya que también reemplazará estos ID o clases, lo que provocará que se produzcan inconsistencias en el HTML. Deberías de usarlo con cuidado.