No need to modify DOM to highlight text in a web page

The easiest and fastest way to highlight keywords in a web application

A Find or Filter field is a indispensable attribute of the web applications visualising text data. When a user searches for a string, it is easy to filter the displayed data but it can be complicated to highlight the matches. Until recently there was only one way — to wrap each match in an additional specifically styled inline element, for example in i tag. Imagine a web page that displays formatted text:

The text is encoded by a p tag with two b tags inside:

If a user searches for string tree is a node, the text in several text nodes has to be wrapped in the marker tag i:

Now, if i is styled by a rule

i {
    background-color: orangered;
    color: white;
}

the searched string will look highlighted in the target text:

Normally users search for short strings that do not have nested tags. Still, if the target text is styled with tags, the search should work with any strings, even those spanning multiple nested elements, which might be complicated to implement.

Since recently, Chrome 105, there is a more straightforward way to style many fragments of displayed…