Wenn ich HTML wie folgt habe:
<li id="listItem">
This is some text
<span id="firstSpan">First span text</span>
<span id="secondSpan">Second span text</span>
</li>
Ich versuche, .text()
nur die Zeichenfolge "Dies ist ein Text" abzurufen, aber wenn ich sagen würde $('#list-item').text()
, erhalte ich "Dies ist ein TextFirst span textSecond span text".
Gibt es eine Möglichkeit, .text("")
nur den freien Text in einem Tag und nicht den Text in den untergeordneten Tags abzurufen (und möglicherweise über so etwas zu entfernen )?
Der HTML-Code wurde nicht von mir geschrieben, daher muss ich damit arbeiten. Ich weiß, dass es einfach wäre, den Text beim Schreiben des HTML-Codes einfach in Tags zu verpacken, aber auch hier ist der HTML-Code vorab geschrieben.
Antworten:
Ich mochte diese wiederverwendbare Implementierung, die auf der hier
clone()
gefundenen Methode basiert , um nur den Text innerhalb des übergeordneten Elements zu erhalten.Code zur einfachen Bezugnahme:
quelle
Einfache Antwort:
quelle
this.nodeType == Node.TEXT_NODE
stattdessen verwendenthis.nodeType == 3
. IMO leichter zu lesen und zu verstehen..contents().filter(...)
Aufruf einfach in einer lokalen Variablen und überprüfen Sie deren Länge, z. B.var text = $(this).contents().filter(...); if (text.length) { return text[0].nodeValue; } return "";
Dies scheint mir ein Fall von Überbeanspruchung von Fragen zu sein. Im Folgenden wird der Text erfasst, wobei die anderen Knoten ignoriert werden:
Sie müssen das kürzen, aber es bringt Ihnen in einer einfachen Linie das, was Sie wollen.
BEARBEITEN
Das Obige erhält den Textknoten . Verwenden Sie Folgendes, um den eigentlichen Text zu erhalten:
quelle
$('.foo')[0].childNodes[0].nodeValue.trim()
document
. Kam hier mitcheerio
.Einfacher und schneller:
quelle
get(0)
statt nur[0]
?Ähnlich der akzeptierten Antwort, jedoch ohne Klonen:
Und hier ist ein jQuery-Plugin für diesen Zweck:
So verwenden Sie dieses Plugin:
quelle
.contents()
Teil ist hier kritisch!ist nicht der Code:
Nur um jQuery willen jQuery werden? Wenn einfache Operationen so viele verkettete Befehle und so viel (unnötige) Verarbeitung beinhalten, ist es vielleicht an der Zeit, eine jQuery-Erweiterung zu schreiben:
anrufen:
Die Argumente sind für den Fall, dass ein anderes Szenario auftritt, z
Text hat Wert:
quelle
Versuche dies:
quelle
Es muss etwas sein, das auf die Bedürfnisse zugeschnitten ist, die von der Struktur abhängen, mit der Sie präsentiert werden. Für das von Ihnen bereitgestellte Beispiel funktioniert dies:
Demo: http://jquery.nodnod.net/cases/2385/run
Aber es hängt ziemlich davon ab, dass das Markup dem ähnelt, was Sie gepostet haben.
quelle
clone
Methode hier anwenden, wenn dies nicht der beabsichtigte Effekt ist..detach()
Methode anstelle von.remove()
.Kurze Variante der Antwort von Stuart.
oder mit
get()
quelle
quelle
Dies ist eine alte Frage, aber die beste Antwort ist sehr ineffizient. Hier ist eine bessere Lösung:
Und mach einfach das:
quelle
Ich gehe davon aus, dass dies auch eine gute Lösung wäre - wenn Sie den Inhalt aller Textknoten abrufen möchten, die direkte untergeordnete Elemente des ausgewählten Elements sind.
Hinweis: In der jQuery-Dokumentation wird ein ähnlicher Code verwendet, um die Inhaltsfunktion zu erläutern: https://api.jquery.com/contents/
PS Es gibt auch einen etwas hässlicheren Weg, dies zu tun, aber dies zeigt detaillierter, wie die Dinge funktionieren, und ermöglicht ein benutzerdefiniertes Trennzeichen zwischen Textknoten (vielleicht möchten Sie dort einen Zeilenumbruch)
quelle
Ich schlage vor, den createTreeWalker zu verwenden, um alle Textelemente zu finden, die nicht an HTML-Elemente angehängt sind (diese Funktion kann zum Erweitern von jQuery verwendet werden):
quelle
Wenn die Position
index
des Textknotens unter seinen Geschwistern festgelegt ist, können Sie verwendenquelle
Sie sind sich nicht sicher, wie flexibel oder wie viele Fälle Sie benötigen, um es abzudecken, aber zum Beispiel, wenn der Text immer vor den ersten HTML-Tags steht - warum nicht einfach das innere HTML beim ersten Tag aufteilen und das erstere nehmen:
und wenn Sie es breiter brauchen, vielleicht nur
und wenn Sie den Text zwischen zwei Markierungen benötigen, wie nach einer Sache, aber vor einer anderen, können Sie so etwas wie (ungetestet) tun und if-Anweisungen verwenden, um ihn flexibel genug zu machen, um eine Start- oder Endmarkierung oder beides zu haben, während Null-Ref-Fehler vermieden werden ::
Im Allgemeinen mache ich Dienstprogrammfunktionen für nützliche Dinge wie diese, mache sie fehlerfrei und verlasse mich dann häufig auf sie, sobald sie fest sind, anstatt diese Art der Zeichenfolgenmanipulation immer neu zu schreiben und Nullreferenzen usw. zu riskieren. Auf diese Weise können Sie die Funktion wiederverwenden in vielen Projekten und müssen nie wieder Zeit damit verschwenden, zu debuggen, warum eine Zeichenfolgenreferenz einen undefinierten Referenzfehler aufweist. Könnte nicht der kürzeste 1-Zeilen-Code aller Zeiten sein, aber nachdem Sie die Utility-Funktion haben, ist es von da an eine Zeile. Beachten Sie, dass der größte Teil des Codes nur Parameter behandelt, die vorhanden sind oder nicht, um Fehler zu vermeiden :)
Zum Beispiel:
quelle
$('#listItem').html( newHTML )
; Dabei ist newHTML eine Variable, die bereits den abgespeckten Text enthält.Das ist ein guter Weg für mich
quelle
Ich habe eine spezifische Lösung gefunden, die viel effizienter sein sollte als das Klonen und Modifizieren des Klons. Diese Lösung funktioniert nur mit den folgenden zwei Vorbehalten, sollte jedoch effizienter sein als die derzeit akzeptierte Lösung:
Hier ist der Code:
quelle
Genau wie die Frage, ich habe versucht zu extrahieren Text , um einige regex Substitution des Textes zu tun , sondern war immer Probleme , wo meine inneren Elemente (zB:
<i>
,<div>
,<span>
, etc.) wurden ebenfalls entfernt zu werden .Der folgende Code scheint gut zu funktionieren und hat alle meine Probleme gelöst.
Es werden einige der hier angegebenen Antworten verwendet, aber insbesondere wird der Text nur ersetzt, wenn das Element von ist
nodeType === 3
.Was das Obige tut, ist eine Schleife durch alle Elemente des Gegebenen
el
(was einfach mit erhalten wurde$("div.my-class[name='some-name']");
. Für jedes innere Element werden sie grundsätzlich ignoriert. Für jeden Teil des Textes (wie durch bestimmtif (this.nodeType === 3)
) wird die Regex-Substitution nur auf diese Elemente angewendet .Der
this.textContent = text
Teil ersetzt einfach den substituierten Text, der in meinem Fall, ich war für Token, die wie[[min.val]]
,[[max.val]]
usw.Dieser Kurzcode-Auszug hilft jedem, der versucht, das zu tun, was die Frage gestellt hat ... und ein bisschen mehr.
quelle
Gib es einfach in ein
<p>
oder<font>
und nimm das $ ('# listItem font'). text ()Das erste, was mir in den Sinn kam
quelle
Sie können dies versuchen
quelle
Verwenden Sie eine zusätzliche Bedingung, um zu überprüfen, ob innerHTML und innerText identisch sind. Ersetzen Sie den Text nur in diesen Fällen.
http://jsfiddle.net/7RSGh/
quelle
Verwenden Sie DotNetWala wie folgt, um das Ergebnis zu kürzen:
Ich fand heraus, dass die Verwendung der kürzeren Version wie
document.getElementById("listItem").childNodes[0]
mit jQuerys trim () nicht funktioniert.quelle
document.getElementById("listItem").childNodes[0]
es sich um einfaches Javascript handelt. Sie müssten es in die jQuery-Funktion einbinden$(document.getElementById("listItem").childNodes[0]).trim()
.trim()
am Ende hinzugefügt . Ist diese Antwort notwendig?Ich bin kein JQuery-Experte, aber wie wäre es,
quelle
Dies ist noch nicht getestet, aber ich denke, Sie können möglicherweise Folgendes ausprobieren:
http://api.jquery.com/not/
quelle
$('#listItem').text()
.#listItem
ist nicht<span>
so hinzufügennot('span')
macht nichts.