: Как выделить определенные слова с помощью jQuery

Question

Я ищу сценарий, который может выделить определенное количество слов в зависимости от их положения. Например, для следующего контента я хочу выделить только второе, третье и четвертое слова:

<p>
    Quisque bibendum sem ut lacus. Integer dolor ullamcorper libero.
    Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>

результат должен быть таким:

<p>
    Quisque <span class="highlight">bibendum sem ut</span> lacus. Integer dolor ullamcorper libero.
    Aliquam rhoncus eros at augue. Suspendisse vitae mauris.
</p>

Большое спасибо!

Answer 1

Этот плагин jQuery - это то, что вы ищете:

• jQuery Highlight

Он делает именно то, что вам нужно, обходит текстовые узлы DOM и ищет текст для поиска, а при обнаружении одного вхождения создает элемент span.

Использование:

$('p').highlight('bibendum sem ut'); 

Answer 2

Я написал очень простую функцию, которая использует jQuery для итерации элементов, заключающих каждое ключевое слово в класс .highlight.

function highlight_words(word, element) {
    if(word) {
        var textNodes;
        word = word.replace(/\W/g, '');
        var str = word.split(" ");
        $(str).each(function() {
            var term = this;
            var textNodes = $(element).contents().filter(function() { return this.nodeType === 3 });
            textNodes.each(function() {
              var content = $(this).text();
              var regex = new RegExp(term, "gi");
              content = content.replace(regex, '<span class="highlight">' + term + '</span>');
              $(this).replaceWith(content);
            });
        });
    }
}

Подробнее:

http://www.hawkee.com/snippet/9854/