Jak mogę znaleźć DIV z określonym tekstem? Na przykład:
<div>
SomeText, text continues.
</div>
Próbuję użyć czegoś takiego:
var text = document.querySelector('div[SomeText*]').innerTEXT;
alert(text);
Ale oczywiście to nie zadziała. Jak mogę to zrobić?
javascript
innertext
selectors-api
passwd
źródło
źródło
Odpowiedzi:
Pytanie OP dotyczy zwykłego JavaScript, a nie jQuery . Chociaż odpowiedzi jest mnóstwo i podoba mi się odpowiedź @Pawan Nogariya , sprawdź tę alternatywę.
Możesz używać XPATH w JavaScript. Więcej informacji o artykule MDN tutaj .
document.evaluate()
Sposób ocenia się zapytania xPath / ekspresji. Możesz więc przekazać tam wyrażenia XPATH, przejść do dokumentu HTML i zlokalizować żądany element.W XPATH możesz wybrać element za pomocą węzła tekstowego, takiego jak poniżej, który otrzyma ten,
div
który ma następujący węzeł tekstowy.Aby uzyskać element, który zawiera tekst, użyj:
Plik
contains()
Metoda w XPATH zajmuje węzeł jako pierwszy parametr i tekst do wyszukania jako drugi parametr.Sprawdź ten plunk tutaj , to jest przykład użycia XPATH w JavaScript
Oto fragment kodu:
Jak widać, mogę pobrać element HTML i zmodyfikować go tak, jak mi się podoba.
źródło
alert(thisHeading.textContent.replace(/.*You have login (.*) times.*/,'$1')) ;
.evaluate()
używa. Proszę kogoś poprawić, jeśli się mylę), więc po pierwsze, nie możesz wyszukać czegoś, co pasuje do wyrażenia regularnego. Po drugie,.textContent
właściwość zwraca węzeł tekstowy elementu. Jeśli chcesz pobrać wartość z tego tekstu, powinieneś obsłużyć to jawnie, prawdopodobnie tworząc jakąś funkcję, która pasuje do wyrażenia regularnego i zwraca pasującą wartość w grupie, aby utworzyć nowe pytanie w osobnym wątku.Możesz użyć tego całkiem prostego rozwiązania:
Array.from
Przekształci liście węzłów do tablicy (istnieją liczne sposoby wykonania tej jak operator do smarowania lub plaster)Rezultatem jest teraz tablica, która pozwala na użycie
Array.find
metody, możesz następnie wstawić dowolny predykat. Możesz również sprawdzić textContent za pomocą wyrażenia regularnego lub cokolwiek chcesz.Zwróć uwagę, że
Array.from
iArray.find
są to funkcje ES2015. Są kompatybilne ze starszymi przeglądarkami, takimi jak IE10 bez transpilera:źródło
find
sięfilter
.Ponieważ poprosiłeś o to w javascript, więc możesz mieć coś takiego
A potem nazwij to tak
źródło
[object HTMLDivElement],[object HTMLDivElement]
foundDivs[0].innerText
, tak prosteTo rozwiązanie wykonuje następujące czynności:
Używa operatora rozproszenia ES6 do konwersji NodeList wszystkich
div
s na tablicę.Dostarcza dane wyjściowe, jeśli
div
zawiera ciąg zapytania, a nie tylko jeśli dokładnie jest równy ciągowi zapytania (co ma miejsce w przypadku niektórych innych odpowiedzi). np. Powinien dostarczyć dane wyjściowe nie tylko dla „Jakiś tekst”, ale także dla „Jakiś tekst, kontynuacja tekstu”.Wyprowadza całą
div
zawartość, a nie tylko ciąg zapytania. np. dla „Jakiś tekst, tekst kontynuowany” powinien wypisać cały ciąg, a nie tylko „Jakiś tekst”.Pozwala na wiele
div
znaków, aby zawierały ciąg, a nie tylko jedendiv
.źródło
innerHTML
są Twoje najlepsze strony<div>
.div
Najpierw należy odfiltrować pliki zawierające dzieci. Podejrzany równieżdocument.getElementsByTagName('div')
może być szybszy, ale dla pewności wykonałbym test porównawczy.Najlepiej sprawdzić, czy masz element nadrzędny elementu div, o który pytasz. Jeśli tak, pobierz element nadrzędny i wykonaj polecenie
element.querySelectorAll("div")
. Po otrzymaniunodeList
zastosuj na nim filtr nainnerText
właściwości. Załóżmy, że element nadrzędny elementu div, którego dotyczy zapytanie, ma wartośćid
ofcontainer
. Zwykle możesz uzyskać dostęp do kontenera bezpośrednio z identyfikatora, ale zróbmy to we właściwy sposób.Więc to jest to.
źródło
Jeśli nie chcesz używać jquery lub czegoś podobnego, możesz spróbować tego:
Gdy masz już węzły w tablicy zawierającej tekst, możesz coś z nimi zrobić. Powiadom każdego lub wydrukuj na konsoli. Jedynym zastrzeżeniem jest to, że niekoniecznie musi to przechwytywać elementy div jako takie, spowoduje to przechwycenie rodzica węzła tekstowego, który zawiera tekst, którego szukasz.
źródło
Ponieważ nie ma ograniczeń co do długości tekstu w atrybucie danych, użyj atrybutów danych! Następnie możesz użyć zwykłych selektorów css, aby wybrać element (y) tak, jak chce OP.
Idealnie byłoby zrobić część ustawiania atrybutu danych podczas ładowania dokumentu i nieco zawęzić selektor querySelectorAll dla wydajności.
źródło
Google ma to jako najlepszy wynik dla tych, którzy muszą znaleźć węzeł z określonym tekstem. W ramach aktualizacji lista węzłów jest teraz iterowalna w nowoczesnych przeglądarkach bez konieczności konwertowania jej na tablicę.
Rozwiązanie może używać forEach w ten sposób.
Pomogło mi to w znalezieniu / zamianie tekstu na liście węzłów, gdy normalny selektor nie mógł wybrać tylko jednego węzła, więc musiałem filtrować każdy węzeł jeden po drugim, aby sprawdzić go pod kątem igły.
źródło
Użyj XPath i document.evaluate () i upewnij się, że używasz text (), a nie. dla argumentu zawiera (), w przeciwnym razie dopasowany zostanie cały kod HTML lub najbardziej zewnętrzny element div.
lub zignoruj początkowe i końcowe spacje
lub dopasuj wszystkie typy tagów (div, h1, p itp.)
Następnie wykonaj iterację
źródło
thisheading.setAttribute('class', "esubject")
Oto podejście XPath, ale z minimalnym żargonem XPath.
Zwykły wybór na podstawie wartości atrybutów elementu (do porównania):
Wybór XPath na podstawie tekstu w elemencie.
A oto z rozróżnianiem wielkości liter, ponieważ tekst jest bardziej zmienny:
źródło
Miałem podobny problem.
Funkcja zwracająca wszystkie elementy zawierające tekst z arg.
To działa dla mnie:
}
źródło
Jest tu już wiele świetnych rozwiązań. Jednak, aby zapewnić bardziej usprawnione rozwiązanie i jeszcze jedno zgodne z ideą zachowania i składni querySelector, zdecydowałem się na rozwiązanie, które rozszerza Object o kilka funkcji prototypowych. Obie te funkcje używają wyrażeń regularnych do dopasowywania tekstu, jednak jako luźny parametr wyszukiwania można podać ciąg.
Wystarczy zaimplementować następujące funkcje:
Po zaimplementowaniu tych funkcji możesz teraz wykonywać połączenia w następujący sposób:
document.queryInnerTextAll('div.link', 'go');
Spowoduje to znalezienie wszystkich elementów div zawierających klasę linków ze słowem go w tekście wewnętrznym (np. Idź w lewo lub GO w dół lub w prawo lub It's Go od )
document.queryInnerText('div.link', 'go');
To działałoby dokładnie tak, jak w powyższym przykładzie, z tą różnicą, że zwróciłoby tylko pierwszy pasujący element.
document.queryInnerTextAll('a', /^Next$/);
Znajdź wszystkie linki z dokładnym tekstem Dalej (z uwzględnieniem wielkości liter). Spowoduje to wykluczenie łączy zawierających słowo Dalej wraz z innym tekstem.
document.queryInnerText('a', /next/i);
Znajdź pierwszy link, który zawiera słowo następne , niezależnie od wielkości liter (np. Następna strona lub Przejdź do następnej )
e = document.querySelector('#page');
e.queryInnerText('button', /Continue/);
Spowoduje to wyszukanie w elemencie kontenera przycisku zawierającego tekst Kontynuuj (z uwzględnieniem wielkości liter). (np. Kontynuuj lub Przejdź do następnego, ale nie kontynuuj )
źródło