Question

Lets say I have a div like this:

<div id="test" class="sourcecode">
"Some String"
</div>

Is it possible to have css and js to highlight a portion of that string based on a search query?

Like if I was searching for the word Stri it would just highlight that part?

Answer 1

You’ll have to divide the text, separating the highlighted part into a <span>. Like this.

<div id="test" class="sourcecode">
"Some <span style="background-color:yellow">Stri</span>ng"
</div>

To do characters that represent HTML tags, if you have:

<div id="test" class="sourcecode">
    &lt;html&gt;String&lt;/html&gt;
</div>

…you can highlight the same way as before:

<div id="test" class="sourcecode">
    <span style="background-color:yellow">&lt;html&gt;Stri</span>ng&lt;/html&gt;
</div>