Question

I got a big list with some content
For eg:

<ol>
    <li id="1">Content1</li>
    <li id="2">Content2</li>
    <li id="3">Content3</li>
    <li id="4">Content4</li>
    <li id="5">Content5</li>
    <li id="6">Content6</li>
    <li id="7">Content7</li>
    <li id="8">Content8</li>
    <li id="9">Content9</li>
    <li id="10">Content10</li>
    <li id="11">Content11</li>
    <li id="12">Content12</li>
    <li id="13">Content13</li>
</ol>

Now when i do a js like this :

$("li").hide();
$("li:contains('Content1')").show();

This will make ONLY the li’s with the Content1 visible but what i want is the should also highlight the found characters maybe by adding a class to only those characters or by any other method.

How can I do so?

Answer 1

Demo

$("li:contains('Content1')").each(function(){
    var content = "Content1";
    this.innerHTML = this.innerHTML.replace(content,"<span>"+content+"</span>")
})

This should work.