Angenommen, eine Webseite enthält eine Zeichenfolge wie "Ich bin eine einfache Zeichenfolge", die ich finden möchte. Wie würde ich mit JQuery vorgehen?
Angenommen, eine Webseite enthält eine Zeichenfolge wie "Ich bin eine einfache Zeichenfolge", die ich finden möchte. Wie würde ich mit JQuery vorgehen?
Antworten:
jQuery hat die Methode enthält. Hier ist ein Ausschnitt für Sie:
<script type="text/javascript">
$(function() {
var foundin = $('*:contains("I am a simple string")');
});
</script>
Der obige Selektor wählt jedes Element aus, das die Zielzeichenfolge enthält. Das Foundin ist ein jQuery-Objekt, das ein übereinstimmendes Element enthält. Siehe die API-Informationen unter: https://api.jquery.com/contains-selector/
Eine Sache, die Sie mit dem Platzhalter '*' beachten sollten, ist, dass Sie alle Elemente erhalten, einschließlich Ihrer HTML- und Body-Elemente, die Sie wahrscheinlich nicht möchten. Aus diesem Grund verwenden die meisten Beispiele bei jQuery und anderen Orten $ ('div: enthält ("Ich bin eine einfache Zeichenfolge")').
Normalerweise suchen jQuery-Selektoren nicht innerhalb der "Textknoten" im DOM. Wenn Sie jedoch die Funktion .contents () verwenden, werden Textknoten eingeschlossen. Mit der Eigenschaft nodeType können Sie nur die Textknoten filtern, und mit der Eigenschaft nodeValue können Sie die Textzeichenfolge durchsuchen.
$ ('*', 'body') .andSelf () .Inhalt() .filter (function () { return this.nodeType === 3; }) .filter (function () { // Nur übereinstimmen, wenn irgendwo im Text 'einfache Zeichenfolge' enthalten ist return this.nodeValue.indexOf ('einfache Zeichenfolge')! = -1; }) .each (function () { // Mach etwas mit this.nodeValue });
.andSelf()
. Von api.jquery.com/andSelf : "jQuery-Objekte verwalten einen internen Stapel, der Änderungen an der übereinstimmenden Gruppe von Elementen verfolgt. Wenn eine der DOM-Durchquerungsmethoden aufgerufen wird, wird die neue Gruppe von Elementen auf den Stapel verschoben Der vorherige Satz von Elementen ist ebenfalls erwünscht. .andSelf () kann helfen. " Ich sehe keinen vorherigen Kontext. Was fehlt mir?
Dadurch werden nur die Blattelemente ausgewählt, die "Ich bin eine einfache Zeichenfolge" enthalten.
$('*:contains("I am a simple string")').each(function(){
if($(this).children().length < 1)
$(this).css("border","solid 2px red") });
Fügen Sie Folgendes in die Adressleiste ein, um es zu testen.
javascript: $('*:contains("I am a simple string")').each(function(){ if($(this).children().length < 1) $(this).css("border","solid 2px red") }); return false;
Wenn Sie nur "Ich bin eine einfache Zeichenfolge" greifen möchten . Wickeln Sie zuerst den Text in ein Element wie dieses.
$('*:contains("I am a simple string")').each(function(){
if($(this).children().length < 1)
$(this).html(
$(this).text().replace(
/"I am a simple string"/
,'<span containsStringImLookingFor="true">"I am a simple string"</span>'
)
)
});
und dann mach das.
$('*[containsStringImLookingFor]').css("border","solid 2px red");
Wenn Sie nur den Knoten möchten, der dem gesuchten Text am nächsten liegt, können Sie Folgendes verwenden:
$('*:contains("my text"):last');
Dies funktioniert sogar, wenn Ihr HTML so aussieht:
<p> blah blah <strong>my <em>text</em></strong></p>
Wenn Sie den obigen Selektor verwenden, wird das <strong>
Tag gefunden, da dies das letzte Tag ist, das die gesamte Zeichenfolge enthält.
<p>my text <b>my text</b></p>
- Entfernen der Vorfahren des <b>
Tags würde verlieren das andere Spiel
Schauen Sie sich das Highlight an (jQuery-Plugin).
Nur zu Tony Millers Antwort hinzuzufügen, da dies mich zu 90% zu dem brachte, wonach ich suchte, aber immer noch nicht funktionierte. Durch .length > 0;
das Hinzufügen am Ende seines Codes funktionierte mein Skript.
$(function() {
var foundin = $('*:contains("I am a simple string")').length > 0;
});
foundin += '*';
Diese Funktion sollte funktionieren. Im Grunde führt eine rekursive Suche durch, bis wir eine eindeutige Liste von Blattknoten erhalten.
function distinctNodes(search, element) {
var d, e, ef;
e = [];
ef = [];
if (element) {
d = $(":contains(\""+ search + "\"):not(script)", element);
}
else {
d = $(":contains(\""+ search + "\"):not(script)");
}
if (d.length == 1) {
e.push(d[0]);
}
else {
d.each(function () {
var i, r = distinctNodes(search, this);
if (r.length === 0) {
e.push(this);
}
else {
for (i = 0; i < r.length; ++i) {
e.push(r[i]);
}
}
});
}
$.each(e, function () {
for (var i = 0; i < ef.length; ++i) {
if (this === ef[i]) return;
}
ef.push(this);
});
return ef;
}