markieren Sie Wörter in HTML mit Regex & Javascript - fast da
Ich schreibe ein JQuery-Plugin, das eine Suche nach Seiten im Browser-Stil durchführt. Ich muss die Suche verbessern, möchte das HTML aber noch nicht analysieren.
Momentan gehe ich so vor, dass ich ein gesamtes DOM-Element und alle verschachtelten Elemente nehme und einfach ein reguläres Suchen / Ersetzen für einen bestimmten Begriff durchführe. Beim Ersetzen werde ich einfach einen Bereich um den übereinstimmenden Begriff wickeln und diesen Bereich als Anker für das Hervorheben, Scrollen usw. verwenden.Es ist wichtig, dass keine Zeichen in HTML-Tags übereinstimmen.
Das ist so nah wie ich gekommen bin:
<code>(?<=^|>)([^><].*?)(?=<|$) </code>
Es macht einen sehr guten Job, alle Charaktere zu erfassen, die es sindnicht in einem HTML-Tag, aber ich habe Probleme herauszufinden, wie ich meinen Suchbegriff einfügen soll.
<code>Input: Any html element (this could be quite large, eg <body>) Search Term: 1 or more characters Replace Txt: <span class='highlight'>$1</span> </code>
AKTUALISIEREN
Der folgende reguläre Ausdruck macht, was ich will, wenn ich mit testehttp://gskinner.com/RegExr/...
<code>Regex: (?<=^|>)(.*?)(SEARCH_STRING)(?=.*?<|$) Replacement: $1<span class='highlight'>$2</span> </code>
Ich habe jedoch einige Probleme bei der Verwendung in meinem Javascript. Mit dem folgenden Code gibt Chrom mir den Fehler "Ungültiger regulärer Ausdruck: / (? <= ^ |>) (.?) (Mary) (? =.? <| $) /: Ungültige Gruppe ".
<code>var origText = $('#'+opt.targetElements).data('origText');
var regx = new RegExp("(?<=^|>)(.*?)(" + $this.val() + ")(?=.*?<|$)", 'gi');
$('#'+opt.targetElements).each(function() {
var text = origText.replace(regx, '$1<span class="' + opt.resultClass + '">$2</span>');
$(this).html(text);
});
</code>Es bricht in der Gruppe ab (? <= ^ |>) - ist das etwas ungeschickt oder ein Unterschied in den Regex-Motoren?
AKTUALISIEREN
Der Grund, warum dieser reguläre Ausdruck in dieser Gruppe nicht funktioniert, ist, dass Javascript keine regulären Lookbehinds unterstützt. Als Referenz und mögliche Lösungen:http://blog.stevenlevithan.com/archives/mimic-lookbehind-javascript.