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 put "Hello" it appears written in Blue. Without having to tag in each word, but instead configure the styles.css so that when there is a "Hello" on the page it will directly turn it blue.
Only with
css
it 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 style it[word=hola]
:In addition to @aldanux's answer
RegExp
, we can use to do a case-insensitive search.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 for "Hello" and replace with
<div class="color-blue">Hola</div>
y in the css you should have:.color-blue{color:blue;}
Greetings.
This is not possible with just
CSS
. However, you can use a regex and the functionreplace
toJavascript
display all occurrences of a word in text of a given color.What I do in this case is to replace (detecting with a regex where the word is
hola
) thehola
original with a new onehola
that will be contained within aspan
with a classazul
. This class is going to be the one that gives the style to the word.Example:
NOTE: This example would not work if you were to retrieve the HTML of a container (which will also retrieve the HTML of any child elements it contains) if any of the child elements have as
id
orclase
the keyword we want to replace, as it will also replace these IDs or classes, which will cause inconsistencies in the HTML. You should use it carefully.