Найти слова в HTML-странице с помощью JavaScript

Question

Как я могу быстро найти на html-странице слово? и как я могу получить HTML-тег, в котором находится слово? (так что я могу работать со всем тегом)

Answer 1

Чтобы найти элемент, в котором существует слово, вам нужно пройти по всему дереву, просматривая только текстовые узлы, применяя тот же тест, что и выше. Как только вы найдете слово в текстовом узле, верните родителя этого узла.

var word = "foo",
    queue = [document.body],
    curr
;
while (curr = queue.pop()) {
    if (!curr.textContent.match(word)) continue;
    for (var i = 0; i < curr.childNodes.length; ++i) {
        switch (curr.childNodes[i].nodeType) {
            case Node.TEXT_NODE : // 3
                if (curr.childNodes[i].textContent.match(word)) {
                    console.log("Found!");
                    console.log(curr);
                    // you might want to end your search here.
                }
                break;
            case Node.ELEMENT_NODE : // 1
                queue.push(curr.childNodes[i]);
                break;
        }
    }
}

это работает в Firefox, никаких обещаний для IE.

Он начинает с элемента body и проверяет, существует ли слово в этом элементе. Если этого не произойдет, то это все, и поиск на этом заканчивается. Если он находится в элементе тела, то он проходит через всех непосредственных потомков тела. Если он находит текстовый узел, то посмотрите, находится ли слово в этом текстовом узле. Если он найдет элемент, вставьте его в очередь. Продолжайте, пока вы не найдете слово или больше нет элементов для поиска.

Answer 2

Вы можете перебирать элементы DOM, ища в них подстроку. Ни быстро, ни элегантно, но для маленького HTML может работать достаточно хорошо.

Я бы попробовал что-то рекурсивное, например: (код не проверен)

findText(node, text) {
  if(node.childNodes.length==0) {//leaf node
   if(node.textContent.indexOf(text)== -1) return [];
   return [node];
  }
  var matchingNodes = new Array();
  for(child in node.childNodes) {
    matchingNodes.concat(findText(child, text));
  }
  return matchingNodes;
}

Answer 3

Вы можете попробовать использовать XPath, это быстро и точно

http://www.w3schools.com/Xpath/xpath_examples.asp

Также, если XPath немного сложнее, вы можете попробовать любую библиотеку javascript, такую ​​как jQuery, которая скрывает шаблонный код и облегчает выражение того, что вы хотите найти.

Также, начиная с IE8 и следующего Firefox 3.5, реализован также API селекторов. Все, что вам нужно сделать, это использовать CSS, чтобы выразить, что искать.

Answer 4

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

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

Вероятно, лучше всего получить образцы документов, которые, по вашему мнению, будут репрезентативными, и просто сделать много прототипов, основанных на подходах, предложенных здесь людьми.

Answer 5

      form.addEventListener("submit", (e) => {
e.preventDefault();
var keyword = document.getElementById("search_input");
let words = keyword.value;
var word = words,
    queue = [document.body],
    curr;
while (curr = queue.pop()) {
    if (!curr.textContent.toUpperCase().match(word.toUpperCase())) continue;
    for (var i = 0; i < curr.childNodes.length; ++i) {
        switch (curr.childNodes[i].nodeType) {
            case Node.TEXT_NODE: // 3
                if (curr.childNodes[i].textContent.toUpperCase().match(word.toUpperCase())) {
                    console.log("Found!");
                    console.log(curr);
                    curr.scrollIntoView();
                }
                break;
            case Node.ELEMENT_NODE: // 1
                queue.push(curr.childNodes[i]);
                break;
        }
    }
}

});