jQuery выделяет найденные символы, найденные с помощью: contains?

Question

Я получил большой список с некоторым содержанием Например:

<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>

Теперь, когда я делаю JS, как это:

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

Это сделает видимыми ТОЛЬКО li с Content1, но я также должен выделить найденные символы , возможно, добавив класс только к этим символам или любым другим методом. *

Как я могу это сделать?

Answer 1

Демо

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

Это должно работать.