Wie markieren Sie Text innerhalb und außerhalb von Tags?

Question

Ich entwickle WebApp. Ich habe Feature um schnell nach Artikeln zu suchen.

In zwei Wörtern Struktur ist:

• Seite
• globale Array (JSON- 100-150 Artikel) mit den Artikeln, die von ajax abgerufen wird. (mit Feldern: ID, Titel, Snippet). Titel & Snippet kann einfache Stil-Markup-Tags enthalten.

Also, wenn Benutzertyp Abfrage in Popup-Abbuchung von Feld, app

1. Suchen im globalen Array
2. Wenn gefundene Übereinstimmungen, push temporäre Suchergebnisse Array (mit Cache)
3. Highlight Übereinstimmungen in Temp. Ergebnisse Array und Show to Benutzer

Wie Sie sehen können, ändert Original Array nicht.

Currenty ich verwende primitive String.indexOf, aber es kann nicht Text passen innerhalb via HTML-Tags Text (Beispiel unten) formatiert:

Frage ist über RegEx-Muster. Ich verstehe klar, dass es nicht zu empfehlen ist, RegEx zu verwenden, um mit DOM zu manipulieren, und die untenstehenden Ergebnisse sind nicht semantisch korrekt, aber es passt.

Zum Beispiel: wir haben so etwas wie diese:

<ul><li>Item <i><span style="color:red">Y</span></i></li></ul>

und wir brauchen Abfrage markieren e, Ergebnis erwartet: ... It<em>e</em>m ..., aber wenn Gebrauch trivial replace(/e/ig, '<em>$&</em>') es wird e in style="color:red" ersetzen.

d. H. Welche RegEx-Muster, um Wörter in Tags nicht zu berühren?

---

Zweites Beispiel: Wir müssen Item Y markieren, so erwartete Ergebnis ist <ul><li><em>Item <i><span style="color:red">Y</em></span></i></li></ul>

Answer 1

Eine kurze hackish Lösung für Markup zwischen jedem einzelnen Buchstaben des Suchbegriffs zu suchen ist.Wenn Ihr Stichwort "Suche" ist, würde es so aussehen:

(s)(<[.^>]*>)*(e)(<[.^>]*>)*(a)(<[.^>]*>)*(r)(<[.^>]*>)*(c)(<[.^>]*>)*(h)

Aber in Wirklichkeit brauchen Sie mehr als das zu tun, denn:

• Skripte
• Textbereiche
• display:none , visibility:hidden, usw.

Answer 2

Wenn ich verstehe richtig, müssen Sie innerhalb Textinhalt eines Fragments eines DOM-Baums suchen. Eine Möglichkeit, dies zu erreichen, besteht darin, die XML/HTML-Textinhalte zu verwenden. Dieses Beispiel macht Gebrauch von jQuery, aber die Idee ist leicht tragbar zu anderen Libs:

HTML:

<div id="article_contents"> 
Blah blah blah, Item 1, Item 2 blah blah <b>Ite</b>m <span>1</span> blah blah 
</div> 

JavaScript:

var source = jQuery('#article_contents').text(); 
var queryRegexp = new RegExp ('Item 1', 'g'); 
var results = source.match (queryRegexp); 

Jetzt results werden alle Vorkommen des Suchtext halten. Um Ihr Ziel der Hervorhebung von Ergebnissen zu erreichen, müssen Sie natürlich ein paar Schritte weiter gehen (z. B. mit RegExp.exec, um die Offsets der Matches zu erhalten).