Выделите слово с помощью jQuery

Question

Мне нужно выделить определенное слово в блоке текста. Например, представьте, что я хотел выделить слово «dolor» в этом тексте:

<p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
<p>
    Quisque bibendum sem ut lacus. Integer dolor ullamcorper libero.
    Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>

Как мне преобразовать вышеупомянутое во что-то вроде этого:

<p>
    Lorem ipsum <span class="myClass">dolor</span> sit amet, consectetuer adipiscing elit.
</p>
<p>
    Quisque bibendum sem ut lacus. Integer <span class="myClass">dolor</span> ullamcorper
    libero. Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>

Возможно ли это с помощью jQuery?

Редактировать : Как Себастьян указал , это вполне возможно без jQuery - но я надеялся, что может быть специальный метод jQuery, который позволил бы Вы делаете селекторы на самом тексте. Я уже активно использую jQuery на этом сайте, поэтому хранение всего в jQuery сделает все, возможно, немного более аккуратным.

Answer 1

$(function () {
    $("#txtSearch").keyup(function (event) {
        var txt = $("#txtSearch").val()
        if (txt.length > 3) {
            $("span.hilightable").each(function (i, v) {
                v.innerHTML = v.innerText.replace(txt, "<hilight>" + txt + "</hilight>");
            });

        }
    });
});

Jfiddle здесь

Answer 2

Возможно ли получить приведенный выше пример:

jQuery.fn.highlight = function (str, className)
{
    var regex = new RegExp(str, "g");

    return this.each(function ()
    {
        this.innerHTML = this.innerHTML.replace(
            regex,
            "<span class=\"" + className + "\">" + str + "</span>"
        );
    });
};

не заменять текст внутри html-тегов, как это, в противном случае страница будет разбита.

Answer 3

Если вы действительно играете, вы можете посмотреть в источнике StackOverflow, как он делает подсветку синтаксиса для блоков кода;)

По сути, вам просто нужно динамически вставлять HTML (лучше всего использовать span), где вам это нужно.