Jeśli mam taki HTML:
<li id="listItem">
This is some text
<span id="firstSpan">First span text</span>
<span id="secondSpan">Second span text</span>
</li>
Próbuję użyć, .text()
aby pobrać tylko ciąg „To jest jakiś tekst”, ale gdybym powiedział $('#list-item').text()
, otrzymuję „To jest jakiś tekst Pierwszy tekst o rozpiętości drugiego tekstu”.
Czy istnieje sposób, aby uzyskać (i ewentualnie usunąć, za pomocą czegoś podobnego .text("")
) tylko dowolny tekst w znaczniku, a nie tekst w jego znacznikach potomnych?
HTML nie został napisany przeze mnie, więc z tym muszę pracować. Wiem, że pisanie html byłoby proste po prostu zawinąć tekst w tagi, ale znowu html jest wstępnie napisany.
Odpowiedzi:
Podobała mi się ta implementacja wielokrotnego użytku oparta na
clone()
metodzie znalezionej tutaj, aby uzyskać tylko tekst wewnątrz elementu nadrzędnego.Kod podany dla łatwego odniesienia:
źródło
Prosta odpowiedź:
źródło
this.nodeType == Node.TEXT_NODE
zamiastthis.nodeType == 3
. Łatwiej czytać i rozumieć IMO..contents().filter(...)
wywołanie do zmiennej lokalnej i sprawdź jej długość, np.var text = $(this).contents().filter(...); if (text.length) { return text[0].nodeValue; } return "";
Wydaje mi się to nadużywaniem jquery. Poniższe pobierze tekst ignorując inne węzły:
Musisz to przyciąć, ale uzyskasz to, czego chcesz w jednej, łatwej linii.
EDYTOWAĆ
Powyższe otrzyma węzeł tekstowy . Aby uzyskać rzeczywisty tekst, użyj tego:
źródło
$('.foo')[0].childNodes[0].nodeValue.trim()
document
. Przyszedł tutaj za pomocącheerio
.Łatwiej i szybciej:
źródło
get(0)
zamiast tylko[0]
?Podobna do zaakceptowanej odpowiedzi, ale bez klonowania:
A oto wtyczka jQuery do tego celu:
Oto jak korzystać z tej wtyczki:
źródło
.contents()
część jest tutaj kluczowa!nie jest kodem:
właśnie stajesz się jQuery dla dobra jQuery? Gdy proste operacje wymagają użycia wielu powiązanych łańcuchów i tyle (niepotrzebnego) przetwarzania, być może nadszedł czas, aby napisać rozszerzenie jQuery:
zadzwonić:
argumenty występują w przypadku napotkania innego scenariusza, np
tekst będzie miał wartość:
źródło
Spróbuj tego:
źródło
Będzie to musiało być coś dostosowanego do potrzeb, które zależą od prezentowanej struktury. W podanym przykładzie działa to:
Demo: http://jquery.nodnod.net/cases/2385/run
Ale to dość zależy od tego, że znaczniki są podobne do tego, co opublikowałeś.
źródło
clone
metodę tutaj, jeśli nie jest to zamierzony efekt..detach()
metody zamiast.remove()
.Krótki wariant odpowiedzi Stuarta.
lub z
get()
źródło
źródło
To stare pytanie, ale najlepsza odpowiedź jest bardzo nieefektywna. Oto lepsze rozwiązanie:
I po prostu zrób to:
źródło
Zakładam, że byłoby to również dobre rozwiązanie - jeśli chcesz uzyskać zawartość wszystkich węzłów tekstowych, które są bezpośrednimi dziećmi wybranego elementu.
Uwaga: Dokumentacja jQuery używa podobnego kodu do wyjaśnienia funkcji zawartości: https://api.jquery.com/contents/
PS Istnieje również nieco bardziej brzydki sposób, ale pokazuje to bardziej szczegółowo, jak to działa, i pozwala na niestandardowy separator między węzłami tekstowymi (być może potrzebujesz podziału linii)
źródło
Proponuję użyć createTreeWalker do znalezienia wszystkich elementów tekstowych nieprzyłączonych do elementów HTML (ta funkcja może być użyta do rozszerzenia jQuery):
źródło
Jeśli pozycja
index
węzła tekstowego jest ustalona między rodzeństwem, możesz użyćźródło
Nie wiem, jak elastycznie lub ile spraw potrzebujesz, aby to uwzględnić, ale na przykład, jeśli tekst zawsze pojawia się przed pierwszymi znacznikami HTML - dlaczego nie po prostu podzielić wewnętrzny HTML na pierwszy znacznik i wziąć pierwszy:
a jeśli potrzebujesz go szerszego, może po prostu
a jeśli potrzebujesz tekstu między dwoma znacznikami, na przykład po jednej rzeczy, ale przed drugą, możesz zrobić coś takiego (nieprzetestowane) i użyć instrukcji if, aby uczynić go wystarczająco elastycznym, aby mieć znacznik początkowy lub końcowy lub oba, jednocześnie unikając błędów zerowania odwołania :
Generalnie tworzę funkcje użyteczne dla takich przydatnych rzeczy, robię je bezbłędne, a następnie polegam na nich często, gdy są solidne, zamiast zawsze przepisywać tego typu manipulacje ciągami i ryzykować zerowe odwołania itp. W ten sposób możesz ponownie użyć funkcji w wielu projektach i nigdy więcej nie trzeba tracić czasu na debugowanie, dlaczego odwołanie do ciągu zawiera nieokreślony błąd odwołania. Być może nie będzie to najkrótszy 1-liniowy kod w historii, ale po uruchomieniu funkcji narzędziowej jest to jedna linia od tego momentu. Zauważ, że większość kodu to po prostu obsługa parametrów, aby uniknąć błędów :)
Na przykład:
źródło
$('#listItem').html( newHTML )
; gdzie newHTML jest zmienną, która ma już usunięty tekst.To dla mnie dobry sposób
źródło
Wymyśliłem konkretne rozwiązanie, które powinno być znacznie wydajniejsze niż klonowanie i modyfikowanie klonu. To rozwiązanie działa tylko z następującymi dwoma zastrzeżeniami, ale powinno być bardziej wydajne niż obecnie akceptowane rozwiązanie:
Powiedziawszy to, oto kod:
źródło
Podobnie jak na pytanie, starałem się tekst ekstraktu w tym celu pewne podstawienie regex tekstu, ale był już problemów, gdzie moje elementy wewnętrzne (np:
<i>
,<div>
,<span>
, itd.) Brali również usunięte.Poniższy kod wydaje się działać dobrze i rozwiązał wszystkie moje problemy.
Wykorzystuje niektóre z podanych tutaj odpowiedzi, ale w szczególności zastąpi tekst tylko wtedy, gdy element jest
nodeType === 3
.To, co powyższe robi, polega na przechodzeniu przez wszystkie elementy danego elementu
el
(który został po prostu uzyskany za pomocą$("div.my-class[name='some-name']");
. Dla każdego elementu wewnętrznego, w zasadzie je ignoruje. Dla każdej części tekstu (określonej przezif (this.nodeType === 3)
) zastosuje podstawienie wyrażenia regularnego tylko do tych elementów .this.textContent = text
Część po prostu zastępuje Zmieniony tekst, który w moim przypadku, ja szukałem takich jak tokeny[[min.val]]
,[[max.val]]
itpTen krótki fragment kodu pomoże każdemu, kto spróbuje zrobić to, o co pytało pytanie ... i jeszcze więcej.
źródło
po prostu umieść to w
<p>
lub<font>
i weź tę $ ('# listItem font'). text ()Pierwsza rzecz, jaka przyszła mi do głowy
źródło
Możesz tego spróbować
źródło
Użyj dodatkowego warunku, aby sprawdzić, czy innerHTML i innerText są takie same. Tylko w tych przypadkach zastąp tekst.
http://jsfiddle.net/7RSGh/
źródło
Aby móc przyciąć wynik, użyj DotNetWala:
Dowiedziałem się, że użycie krótszej wersji jak
document.getElementById("listItem").childNodes[0]
nie działa z trim () jQuery.źródło
document.getElementById("listItem").childNodes[0]
jest to zwykły javascript, musiałbyś zawinąć go w funkcję jQuery$(document.getElementById("listItem").childNodes[0]).trim()
.trim()
do końca. Czy ta odpowiedź jest konieczna?Nie jestem ekspertem od jquery, ale co powiesz na
źródło
To nie zostało przetestowane, ale myślę, że możesz spróbować czegoś takiego:
http://api.jquery.com/not/
źródło
$('#listItem').text()
.#listItem
nie jest<span>
tak, więc dodawanienot('span')
nic nie robi.