I would like to know if it is possible to do this that I contemplate:
We have a text that I want to highlight X Word, for example, Every time I type "Hello" it appears written in Blue. Without having to label in each word, but configure the styles.css so that when there is a "Hello" on the page, it is directly in blue.
Only with css will not be possible, I leave you a code of this answer which works with javascript.
Then you can use css to search for the words and give it a% [word=hola] :
function makeHighlightable() {
var n;
var a=[];
var walk = document.createTreeWalker(document.body,NodeFilter.SHOW_TEXT,null,false);
while (n = walk.nextNode()) a.push(n);
for (var i = 0; i < a.length; i++) {
var newSpan = document.createElement('span');
var words = a[i].nodeValue.split(' ');
for(var j = 0; j < words.length; j++) {
var escapedWord = words[j].replace(/^\w /ig,'');
words[j] = '<span word="'+escapedWord+'">'+words[j]+'</span>';
}
words = words.join(' ');
newSpan.innerHTML = words;
a[i].parentNode.replaceChild(newSpan,a[i]);
}
}
makeHighlightable().hola1 [word=Hóla] {
color: blue;
font-weight: bold;
}
.hola2 [word=hóla] {
color: darkorange ;
font-weight: bold;
}
.hola3 [word=hola] {
color: red;
font-weight: bold;
}<p class="hola1">Hóla hóla ahora sin tilde Hola hola ahora con puntos Hóla::: hóla::: y sin puntos Hóla hóla</p>
<p class="hola2">Hóla hóla ahora sin tilde Hola hola ahora con puntos Hóla::: hóla::: y sin puntos Hóla hóla</p>
<p class="hola3">Hóla hóla ahora sin tilde Hola hola ahora con puntos Hóla::: hóla::: y sin puntos Hóla hóla</p> In addition to the response from @aldanux, we can use RegExp to make a search insensitive to the uppercase or lowercase.
function highlight(word) {
var wordRe = new RegExp('('+word+')', 'ig');
var treeWalker = document.createTreeWalker(
document.body,
NodeFilter.SHOW_TEXT,
null,
false
);
var nodes = [];
while (treeWalker.nextNode()) {
if (treeWalker.currentNode.textContent.match(wordRe)) {
nodes.push(treeWalker.currentNode);
}
}
var element, i;
for (i = 0; i < nodes.length; i++) {
element = document.createElement('span');
element.innerHTML = nodes[i].textContent.replace(wordRe, '<span class="blue">$1</span>');
nodes[i].parentNode.replaceChild(element, nodes[i]);
}
}
highlight('hola');.blue{
color: blue;
}<div id="hola">
Hola este es un texto de prueba. Asi es hola, es una prueba
Hola este es un texto de prueba. Asi es hola, es una prueba hola
<p>Hola este es un texto de prueba. Asi es hola, es una prueba</p>
Hola este es un texto de prueba. Asi es hola, es una prueba
<p>Hola este es un texto de prueba. Asi es hola, es una prueba as dasd</p>
</div>With only CSS it is not possible . But with Javascript if you can, you would have to do a search in the DOM and replace the texts that you want.
Ex: Search "Hello" and replace with <div class="color-blue">Hola</div> and in the css you should have:
.color-blue{color:blue;}
Greetings.
This is not possible simply with CSS . However, you can use a regex and the function replace of Javascript to show all the occurrences of a word in a text of a certain color.
What I do in this case is replace (detecting with a regex where the word hola is) the original hola for a new hola that will be contained within a span with a class azul . This class is going to be the one that gives the style to the word.
Example:
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> REMARK: This example would not work if you retrieved the HTML of a container (which will also retrieve the HTML of the child elements it contains) if any of the child elements have a id or clase the keyword that we want to replace, since it will also replace these ID or classes, which will cause inconsistencies in the HTML. You should use it with care.