Wie finde ich DIV mit einem bestimmten Text? Beispielsweise:
<div>
SomeText, text continues.
</div>
Ich versuche so etwas zu benutzen:
var text = document.querySelector('div[SomeText*]').innerTEXT;
alert(text);
Aber natürlich wird es nicht funktionieren. Wie kann ich es tun?
javascript
innertext
selectors-api
passwd
quelle
quelle
Antworten:
Die Frage von OP bezieht sich auf einfaches JavaScript und nicht auf jQuery . Obwohl es viele Antworten gibt und ich die Antwort von @Pawan Nogariya mag, probieren Sie bitte diese Alternative aus.
Sie können XPATH in JavaScript verwenden. Weitere Infos zum MDN-Artikel hier .
Die
document.evaluate()
Methode wertet eine XPATH-Abfrage / einen XPATH-Ausdruck aus. So können Sie dort XPATH-Ausdrücke übergeben, in das HTML-Dokument wechseln und das gewünschte Element suchen.In XPATH können Sie ein Element über den Textknoten wie folgt auswählen, das das Element mit dem folgenden Textknoten erhält
div
.Verwenden Sie Folgendes, um ein Element zu erhalten, das Text enthält:
Die
contains()
Methode in XPATH verwendet einen Knoten als ersten Parameter und den zu suchenden Text als zweiten Parameter.Überprüfen Sie diesen Punkt hier , dies ist ein Beispiel für die Verwendung von XPATH in JavaScript
Hier ist ein Code-Snippet:
Wie Sie sehen können, kann ich das HTML-Element greifen und es nach Belieben ändern.
quelle
alert(thisHeading.textContent.replace(/.*You have login (.*) times.*/,'$1')) ;
.evaluate()
verwendet. Bitte korrigiert mich jemand, wenn ich falsch liege). Erstens können Sie nicht nach etwas suchen, das einem regulären Ausdruck entspricht. Zweitens gibt die.textContent
Eigenschaft den Textknoten des Elements zurück. Wenn Sie einen Wert aus diesem Text herausholen möchten, sollten Sie ihn explizit behandeln, wahrscheinlich indem Sie eine Funktion erstellen, die einem regulären Ausdruck entspricht und den übereinstimmenden Wert in group zurückgibt. Dazu stellen Sie eine neue Frage in einem separaten Thread.Sie könnten diese ziemlich einfache Lösung verwenden:
Das
Array.from
konvertiert die NodeList in ein Array (es gibt mehrere Methoden, um dies zu tun, wie den Spread-Operator oder das Slice).Das Ergebnis, das jetzt ein Array ist, ermöglicht die Verwendung der
Array.find
Methode. Sie können dann ein beliebiges Prädikat eingeben. Sie können den textContent auch mit einem regulären Ausdruck oder was auch immer Sie möchten überprüfen.Beachten Sie, dass
Array.from
undArray.find
ES2015-Funktionen sind. Sie sind kompatibel mit älteren Browsern wie IE10 ohne Transpiler:quelle
find
durchfilter
.Da Sie es in Javascript gefragt haben, können Sie so etwas haben
Und dann nenne es so
quelle
[object HTMLDivElement],[object HTMLDivElement]
foundDivs[0].innerText
Diese Lösung führt Folgendes aus:
Verwendet den ES6-Spread-Operator, um die NodeList aller
div
s in ein Array zu konvertieren .Bietet Ausgabe, wenn die Abfragezeichenfolge
div
enthält , nicht nur, wenn sie genau der Abfragezeichenfolge entspricht (was bei einigen anderen Antworten der Fall ist). zB Es sollte nicht nur für 'SomeText', sondern auch für 'SomeText, Text wird fortgesetzt' ausgegeben.Gibt den gesamten
div
Inhalt aus, nicht nur die Abfragezeichenfolge. Beispiel: Für 'SomeText, Text wird fortgesetzt' sollte die gesamte Zeichenfolge ausgegeben werden, nicht nur 'SomeText'.Ermöglicht, dass mehrere
div
s die Zeichenfolge enthalten, nicht nur eine einzelnediv
.quelle
innerHTML
Ihre Top-<div>
s sind. Sie sollten zuerstdiv
s herausfiltern, die untergeordnete Elemente enthalten. Auch verdächtigdocument.getElementsByTagName('div')
kann schneller sein, aber ich würde Benchmark, um sicher zu sein.Sie sehen am besten, ob Sie ein übergeordnetes Element des Div haben, das Sie abfragen. Wenn ja, holen Sie sich das übergeordnete Element und führen Sie eine aus
element.querySelectorAll("div")
. Sobald Sie das erhalten,nodeList
wenden Sie einen Filter auf dieinnerText
Eigenschaft an. Angenommen, ein übergeordnetes Element des Div, das wir abfragen, hat einid
voncontainer
. Normalerweise können Sie direkt von der ID aus auf den Container zugreifen, aber machen wir es richtig.So, das war es.
quelle
Wenn Sie jquery oder ähnliches nicht verwenden möchten, können Sie Folgendes versuchen:
Sobald Sie die Knoten in einem Array haben, die den Text enthalten, können Sie etwas damit tun. Als ob Sie jeden alarmieren oder auf die Konsole drucken würden. Eine Einschränkung ist, dass dies nicht unbedingt Divs per se erfasst, sondern das übergeordnete Element des Textknotens, der den gesuchten Text enthält.
quelle
Verwenden Sie Datenattribute, da die Länge des Texts in einem Datenattribut unbegrenzt ist! Und dann können Sie normale CSS-Selektoren verwenden, um Ihre Elemente wie vom OP gewünscht auszuwählen.
Idealerweise führen Sie den Teil zum Einstellen der Datenattribute beim Laden des Dokuments aus und schränken den Selector querySelectorAll für die Leistung ein wenig ein.
quelle
Google hat dies als Top-Ergebnis für diejenigen, die einen Knoten mit einem bestimmten Text suchen müssen. Durch die Aktualisierung kann eine Knotenliste jetzt in modernen Browsern iteriert werden, ohne dass sie in ein Array konvertiert werden muss.
Die Lösung kann für jeden so verwenden.
Dies funktionierte für mich, um einen Text zum Suchen / Ersetzen in einer Knotenliste zu erstellen, wenn ein normaler Selektor nicht nur einen Knoten auswählen konnte, sodass ich jeden Knoten einzeln filtern musste, um ihn auf die Nadel zu überprüfen.
quelle
Verwenden Sie XPath und document.evaluate () und stellen Sie sicher, dass Sie text () verwenden und nicht. für das enthält () -Argument, oder Sie haben den gesamten HTML-Code oder das äußerste div-Element abgeglichen.
oder ignorieren Sie führende und nachfolgende Leerzeichen
oder mit allen Tag-Typen übereinstimmen (div, h1, p usw.)
Dann iterieren
quelle
thisheading.setAttribute('class', "esubject")
Hier ist der XPath-Ansatz, jedoch mit einem Minimum an XPath-Jargon.
Regelmäßige Auswahl anhand von Elementattributwerten (zum Vergleich):
XPath-Auswahl basierend auf Text innerhalb des Elements.
Und hier ist die Groß- und Kleinschreibung nicht zu beachten, da der Text volatiler ist:
quelle
Ich hatte ein ähnliches Problem.
Funktion, die alle Elemente zurückgibt, die Text von arg enthalten.
Das funktioniert bei mir:
}}
quelle
Hier gibt es bereits viele großartige Lösungen. Um jedoch eine optimierte Lösung und eine weitere Lösung zu finden, die der Idee eines Verhaltens und einer Syntax von querySelector entspricht, habe ich mich für eine Lösung entschieden, die Object um einige Prototypfunktionen erweitert. Beide Funktionen verwenden reguläre Ausdrücke zum Abgleichen von Text. Es kann jedoch eine Zeichenfolge als loser Suchparameter bereitgestellt werden.
Implementieren Sie einfach die folgenden Funktionen:
Mit diesen implementierten Funktionen können Sie jetzt wie folgt Anrufe tätigen:
document.queryInnerTextAll('div.link', 'go');
Dies würde alle Divs finden, die die Link- Klasse mit dem Wort go im innerText enthalten (z. B. Go Left oder GO down oder go right oder It's Go od ).
document.queryInnerText('div.link', 'go');
Dies würde genau wie im obigen Beispiel funktionieren, außer dass nur das erste übereinstimmende Element zurückgegeben wird.
document.queryInnerTextAll('a', /^Next$/);
Finden Sie alle Links mit dem genauen Text Weiter (Groß- und Kleinschreibung beachten). Dies schließt Links aus, die das Wort Weiter zusammen mit anderem Text enthalten.
document.queryInnerText('a', /next/i);
Suchen Sie den ersten Link, der das Wort next enthält , unabhängig von der Groß- / Kleinschreibung (z. B. Next Page oder Go to next ).
e = document.querySelector('#page');
e.queryInnerText('button', /Continue/);
Dies führt eine Suche innerhalb eines Containerelements nach einer Schaltfläche durch, die den Text Weiter enthält (Groß- und Kleinschreibung beachten). (zB Weiter oder Weiter mit Weiter, aber nicht fortfahren )
quelle