Wörter in HTML-Seite mit Javascript finden

wie kann ich eine HTML-Seite schnell nach einem Wort durchsuchen? und wie kann ich das HTML-Tag bekommen, in dem sich das Wort befindet? (damit ich mit dem gesamten Tag arbeiten kann)

Antwort auf "Wörter in HTML-Seite mit Javascript finden " 4 von antworten

Sie können DOM-Elemente durchlaufen und nach einer Teilzeichenfolge in ihnen suchen. Weder schnell noch elegant, aber für kleine HTML könnte gut genug funktionieren.

Ich würde etwas Rekursives ausprobieren, wie: (Code nicht getestet)

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;
}

Um das Element zu finden, in dem das Wort vorhanden ist, müssen Sie den gesamten Baum durchlaufen und nur die Textknoten suchen und den gleichen Test wie oben anwenden. Sobald Sie das Wort in einem Textknoten gefunden haben, geben Sie das übergeordnete Element dieses Knotens zurück.

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;
        }
    }
}

das funktioniert in Firefox, keine Versprechungen für IE.

Was es tut, ist mit dem Körperelement zu beginnen und zu überprüfen, ob das Wort in diesem Element vorhanden ist. Wenn dies nicht der Falle ist, dann ist es das, und die Suche stoppt dort. Wenn es im Körperelement ist, dann schleift es durch alle unmittelbaren Kinder des Körpers. Wenn ein Textknoten gefunden wird, sehen Sie, ob sich das Wort in diesem Textknoten befindet. Wenn ein Element gefunden wird, schieben Sie es in die Warteschlange. Machen Sie weiter, bis Sie entweder das Wort gefunden haben oder es keine weiteren Elemente zum Suchen gibt.

Sie können versuchen, XPath zu verwenden, es ist schnell und genau

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

Auch wenn XPath etwas komplizierter ist, dann können Sie jede Javascript-Bibliothek wie jQuery ausprobieren, die den Code der Textbausteine ausblendet und es einfacher macht, darüber auszudrücken, was Sie finden möchten.

Auch, ab IE8 und dem nächsten Firefox 3.5, ist auch Selectors API implementiert. Alles, was Sie tun müssen, ist CSS zu verwenden, um auszudrücken, was zu suchen ist.

Sie können wahrscheinlich den Text des Dokumentbaums lesen und einfache String-Tests darauf schnell genug durchführen, ohne weit darüber hinaus gehen zu müssen - es hängt ein wenig von dem HTML ab, mit dem Sie arbeiten, obwohl - wie viel Kontrolle haben Sie über die Seiten? Wenn Sie innerhalb einer von Ihnen gesteuerten Website arbeiten, können Sie Ihre Suche wahrscheinlich auf die Teile der Seite konzentrieren, die wahrscheinlich von der Seite abweichen, wenn Sie mit den Seiten anderer Personen arbeiten, haben Sie einen härteren Job in Ihren Händen, nur weil Sie nicht unbedingt wissen, auf welche Inhalte Sie testen müssen.

Auch wenn Sie die gleiche Seite mehrmals durchsuchen und Ihr Datensatz groß ist, kann es sich lohnen, eine Art Index im Speicher zu erstellen, während es sich wahrscheinlich nicht lohnt, eine Art Index im Speicher zu erstellen, während es wahrscheinlich nicht die Zeit und Komplexität wert ist, diese zu erstellen, wenn Sie nur nach ein paar Wörtern suchen oder kleinere Dokumente verwenden.

Wahrscheinlich ist das Beste, was zu tun ist, einige Beispieldokumente zu bekommen, die Sie fühlen, wird repräsentativ sein und nur eine ganze Menge Prototyping auf der Grundlage der Ansätze, die die Menschen hier angeboten haben.