Найти слова в html странице с помощью javascript

Ответ 1

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

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, no promises для IE.

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

Ответ 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;
}

Ответ 3

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

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

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

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

Ответ 4

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

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

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