Как оптимизировать тег jQuery: содержит () селектор?

Question

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

words = ["sky", "element", "dry", "smooth", "java", "running", "illness", "lake", "soothing", "cardio", "gymnastic"]

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

// 14 essential tags 
items = ["p", "li", "h2", "h3", "h4", "h5", "h6", "b", "small", "td", "span", "strong", "blockquote", "div"] 

также мне нужно обеспечить пробел границы слова. Поэтому для каждого слова мне нужно определить 3 проверки в jquery селектор (), как показано ниже.

tagName:contains('sky '), tagName:contains(' sky'), tagName:contains(' sky ')`

Итак, итоговый запрос для приведенного выше сценария составляет words.length * items.length * 3 14 * 11 * 3 = 462 селекторы. Это само по себе большой запрос, и когда массив слов начинает расти, мой запрос выглядит следующим образом.

$(p:icontains('ACCESSIBLE '), p:icontains(' ACCESSIBLE'), p:icontains(' ACCESSIBLE '), li:icontains('ACCESSIBLE '), li:icontains(' ACCESSIBLE'), li:icontains(' ACCESSIBLE '), h3:icontains('ACCESSIBLE '), h3:icontains(' ACCESSIBLE'), h3:icontains(' ACCESSIBLE '), h4:icontains('ACCESSIBLE '), h4:icontains(' ACCESSIBLE'), h4:icontains(' ACCESSIBLE '), h5:icontains('ACCESSIBLE '), h5:icontains(' ACCESSIBLE'), h5:icontains(' ACCESSIBLE '), b:icontains('ACCESSIBLE '), b:icontains(' ACCESSIBLE'), b:icontains(' ACCESSIBLE '), td:icontains('ACCESSIBLE '), td:icontains(' ACCESSIBLE'), td:icontains(' ACCESSIBLE '), span:icontains('ACCESSIBLE '), span:icontains(' ACCESSIBLE'), span:icontains(' ACCESSIBLE '), strong:icontains('ACCESSIBLE '), strong:icontains(' ACCESSIBLE'), strong:icontains(' ACCESSIBLE '), div:icontains('ACCESSIBLE '), div:icontains(' ACCESSIBLE'), div:icontains(' ACCESSIBLE ')p:icontains('ADDRESS '), p:icontains(' ADDRESS'), p:icontains(' ADDRESS '), li:icontains('ADDRESS '), li:icontains(' ADDRESS'), li:icontains(' ADDRESS '), h3:icontains('ADDRESS '), h3:icontains(' ADDRESS'), h3:icontains(' ADDRESS '), h4:icontains('ADDRESS '), h4:icontains(' ADDRESS'), h4:icontains(' ADDRESS '), h5:icontains('ADDRESS '), h5:icontains(' ADDRESS'), h5:icontains(' ADDRESS '), b:icontains('ADDRESS '), b:icontains(' ADDRESS'), b:icontains(' ADDRESS '), td:icontains('ADDRESS '), td:icontains(' ADDRESS'), td:icontains(' ADDRESS '), span:icontains('ADDRESS '), span:icontains(' ADDRESS'), span:icontains(' ADDRESS '), strong:icontains('ADDRESS '), strong:icontains(' ADDRESS'), strong:icontains(' ADDRESS '), div:icontains('ADDRESS '), div:icontains(' ADDRESS'), div:icontains(' ADDRESS ')p:icontains('ANTIEMETICS '), p:icontains(' ANTIEMETICS'), p:icontains(' ANTIEMETICS '), li:icontains('ANTIEMETICS '), li:icontains(' ANTIEMETICS'), li:icontains(' ANTIEMETICS '), h3:icontains('ANTIEMETICS '), h3:icontains(' ANTIEMETICS'), h3:icontains(' ANTIEMETICS '), h4:icontains('ANTIEMETICS '), h4:icontains(' ANTIEMETICS'), h4:icontains(' ANTIEMETICS '), h5:icontains('ANTIEMETICS '), h5:icontains(' ANTIEMETICS'), h5:icontains(' ANTIEMETICS '), b:icontains('ANTIEMETICS '), b:icontains(' ANTIEMETICS'), b:icontains(' ANTIEMETICS '), td:icontains('ANTIEMETICS '), td:icontains(' ANTIEMETICS'), td:icontains(' ANTIEMETICS '), span:icontains('ANTIEMETICS '), span:icontains(' ANTIEMETICS'), span:icontains(' ANTIEMETICS '), strong:icontains('ANTIEMETICS '), strong:icontains(' ANTIEMETICS'), strong:icontains(' ANTIEMETICS '), div:icontains('ANTIEMETICS '), div:icontains(' ANTIEMETICS'), div:icontains(' ANTIEMETICS ')p:icontains('BRAND '), p:icontains(' BRAND'), p:icontains(' BRAND '), li:icontains('BRAND '), li:icontains(' BRAND'), li:icontains(' BRAND '), h3:icontains('BRAND '), h3:icontains(' BRAND'), h3:icontains(' BRAND '), h4:icontains('BRAND '), h4:icontains(' BRAND'), h4:icontains(' BRAND '), h5:icontains('BRAND '), h5:icontains(' BRAND'), h5:icontains(' BRAND '), b:icontains('BRAND '), b:icontains(' BRAND'), b:icontains(' BRAND '), td:icontains('BRAND '), td:icontains(' BRAND'), td:icontains(' BRAND '), span:icontains('BRAND '), span:icontains(' BRAND'), span:icontains(' BRAND '), strong:icontains('BRAND '), strong:icontains(' BRAND'), strong:icontains(' BRAND '), div:icontains('BRAND '), div:icontains(' BRAND'), div:icontains(' BRAND ')p:icontains('CAPABLE '), p:icontains(' CAPABLE'), p:icontains(' CAPABLE '), li:icontains('CAPABLE '), li:icontains(' CAPABLE'), li:icontains(' CAPABLE '), h3:icontains('CAPABLE '), h3:icontains(' CAPABLE'), h3:icontains(' CAPABLE '), h4:icontains('CAPABLE '), h4:icontains(' CAPABLE'), h4:icontains(' CAPABLE '), h5:icontains('CAPABLE '), h5:icontains(' CAPABLE'), h5:icontains(' CAPABLE '), b:icontains('CAPABLE '), b:icontains(' CAPABLE'), b:icontains(' CAPABLE '), td:icontains('CAPABLE '), td:icontains(' CAPABLE'), td:icontains(' CAPABLE '), span:icontains('CAPABLE '), span:icontains(' CAPABLE'), span:icontains(' CAPABLE '), strong:icontains('CAPABLE '), strong:icontains(' CAPABLE'), strong:icontains(' CAPABLE '), div:icontains('CAPABLE '), div:icontains(' CAPABLE'), div:icontains(' CAPABLE ')p:icontains('COMMAND '), p:icontains(' COMMAND'), p:icontains(' COMMAND '), li:icontains('COMMAND '), li:icontains(' COMMAND'), li:icontains(' COMMAND '), h3:icontains('COMMAND '), h3:icontains(' COMMAND'), h3:icontains(' COMMAND '), h4:icontains('COMMAND '), h4:icontains(' COMMAND'), h4:icontains(' COMMAND '), h5:icontains('COMMAND '), h5:icontains(' COMMAND'), h5:icontains(' COMMAND '), b:icontains('COMMAND '), b:icontains(' COMMAND'), b:icontains(' COMMAND '), td:icontains('COMMAND '), td:icontains(' COMMAND'), td:icontains(' COMMAND '), span:icontains('COMMAND '), span:icontains(' COMMAND'), span:icontains(' COMMAND '), strong:icontains('COMMAND '), strong:icontains(' COMMAND'), strong:icontains(' COMMAND '), div:icontains('COMMAND '), div:icontains(' COMMAND'), div:icontains(' COMMAND ')p:icontains('CONFLUENCE ') ....

Запрос с 87Kb селекторов, выполнение которого на странице занимает около 30-40 секунд. Есть ли способ оптимизировать это. Я уже удаляю теги, которых нет на странице, перед выполнением запроса.

РЕДАКТИРОВАТЬ: причина, по которой я не могу выполнить синтаксический анализ текста всей страницы с помощью регулярных выражений, состоит в том, что мне нужно заменить эти совпадающие слова некоторыми HTML после синтаксического анализа, это похоже на выделение этих слов на странице, добавив немного HTML на их место. Если я сделаю регулярное выражение, я потеряю контроль над элементом HTML и их положением. Также замена регулярных выражений не гарантирует текстовые узлы. Он также заменяет слова, написанные внутри атрибутов заголовка и других атрибутов, если они присутствуют.

Answer 1

Вместо этого, почему бы просто не использовать всю страницу html и использовать регулярные выражения для массива слов?

Тест HTML:

<div id='container'>
<p>Chess</p>
<span>Chess and Checkers</span>
<h1> Chess and Checkers</h1>
</div>

Javascript:

$("document").ready(function() {
    var html = $("#container").html();
    var words = ["Chess", "checkers"];

    $.each(words, function() {
      var phrase = this;    
      html = html.replace(new RegExp(phrase, "gim"), "foo");
    });
    $("#container").html(html);
});

Вывод:

foo

foo and foo

foo and foo