Verwenden von .text (), um nur Text abzurufen, der nicht in untergeordneten Tags verschachtelt ist

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.

Ich mochte diese wiederverwendbare Implementierung, die auf der hierclone() gefundenen Methode basiert , um nur den Text innerhalb des übergeordneten Elements zu erhalten.

Code zur einfachen Bezugnahme:

$("#foo")
    .clone()    //clone the element
    .children() //select all the children
    .remove()   //remove all the children
    .end()  //again go back to selected element
    .text();

Einfache Antwort:

$("#listItem").contents().filter(function(){ 
  return this.nodeType == 3; 
})[0].nodeValue = "The text you want to replace with" 

Dies scheint mir ein Fall von Überbeanspruchung von Fragen zu sein. Im Folgenden wird der Text erfasst, wobei die anderen Knoten ignoriert werden:

document.getElementById("listItem").childNodes[0];

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:

document.getElementById("listItem").childNodes[0].nodeValue;

Einfacher und schneller:

$("#listItem").contents().get(0).nodeValue

Ähnlich der akzeptierten Antwort, jedoch ohne Klonen:

$("#foo").contents().not($("#foo").children()).text();

Und hier ist ein jQuery-Plugin für diesen Zweck:

$.fn.immediateText = function() {
    return this.contents().not(this.children()).text();
};

So verwenden Sie dieses Plugin:

$("#foo").immediateText(); // get the text without children

ist nicht der Code:

var text  =  $('#listItem').clone().children().remove().end().text();

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:

(function ($) {
    function elementText(el, separator) {
        var textContents = [];
        for(var chld = el.firstChild; chld; chld = chld.nextSibling) {
            if (chld.nodeType == 3) { 
                textContents.push(chld.nodeValue);
            }
        }
        return textContents.join(separator);
    }
    $.fn.textNotChild = function(elementSeparator, nodeSeparator) {
    if (arguments.length<2){nodeSeparator="";}
    if (arguments.length<1){elementSeparator="";}
        return $.map(this, function(el){
            return elementText(el,nodeSeparator);
        }).join(elementSeparator);
    }
} (jQuery));

anrufen:

var text = $('#listItem').textNotChild();

Die Argumente sind für den Fall, dass ein anderes Szenario auftritt, z

<li>some text<a>more text</a>again more</li>
<li>second text<a>more text</a>again more</li>

var text = $("li").textNotChild(".....","<break>");

Text hat Wert:

some text<break>again more.....second text<break>again more

Versuche dies:

$('#listItem').not($('#listItem').children()).text()

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:

$(document).ready(function(){
     var $tmp = $('#listItem').children().remove();
     $('#listItem').text('').append($tmp);
});

Demo: http://jquery.nodnod.net/cases/2385/run

Aber es hängt ziemlich davon ab, dass das Markup dem ähnelt, was Sie gepostet haben.

$($('#listItem').contents()[0]).text()

Kurze Variante der Antwort von Stuart.

oder mit get()

$($('#listItem').contents().get(0)).text()

jQuery.fn.ownText = function () {
    return $(this).contents().filter(function () {
        return this.nodeType === Node.TEXT_NODE;
    }).text();
};

Dies ist eine alte Frage, aber die beste Antwort ist sehr ineffizient. Hier ist eine bessere Lösung:

$.fn.myText = function() {
    var str = '';

    this.contents().each(function() {
        if (this.nodeType == 3) {
            str += this.textContent || this.innerText || '';
        }
    });

    return str;
};

Und mach einfach das:

$("#foo").myText();

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.

$(selector).contents().filter(function(){ return this.nodeType == 3; }).text();

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)

$(selector).contents().filter(function(){ return this.nodeType == 3; }).map(function() { return this.nodeValue; }).toArray().join("");

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):

function textNodesOnlyUnder(el) {
  var resultSet = [];
  var n = null;
  var treeWalker  = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, function (node) {
    if (node.parentNode.id == el.id && node.textContent.trim().length != 0) {
      return NodeFilter.FILTER_ACCEPT;
    }
    return NodeFilter.FILTER_SKIP;
  }, false);
  while (n = treeWalker.nextNode()) {
    resultSet.push(n);
  }
  return resultSet;
}



window.onload = function() {
  var ele = document.getElementById('listItem');
  var textNodesOnly = textNodesOnlyUnder(ele);
  var resultingText = textNodesOnly.map(function(val, index, arr) {
    return 'Text element N. ' + index + ' --> ' + val.textContent.trim();
  }).join('\n');
  document.getElementById('txtArea').value = resultingText;
}

<li id="listItem">
    This is some text
    <span id="firstSpan">First span text</span>
    <span id="secondSpan">Second span text</span>
</li>
<textarea id="txtArea" style="width: 400px;height: 200px;"></textarea>

Wenn die Position indexdes Textknotens unter seinen Geschwistern festgelegt ist, können Sie verwenden

$('parentselector').contents().eq(index).text()

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:

$('#listItem').html().split('<span')[0]; 

und wenn Sie es breiter brauchen, vielleicht nur

$('#listItem').html().split('<')[0]; 

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 ::

var startMarker = '';// put any starting marker here
var endMarker = '<';// put the end marker here
var myText = String( $('#listItem').html() );
// if the start marker is found, take the string after it
myText = myText.split(startMarker)[1];        
// if the end marker is found, take the string before it
myText = myText.split(endMarker)[0];
console.log(myText); // output text between the first occurrence of the markers, assuming both markers exist.  If they don't this will throw an error, so some if statements to check params is probably in order...

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:

/**
* Get the text between two string markers.
**/
function textBetween(__string,__startMark,__endMark){
    var hasText = typeof __string !== 'undefined' && __string.length > 0;
    if(!hasText) return __string;
    var myText = String( __string );
    var hasStartMarker = typeof __startMark !== 'undefined' && __startMark.length > 0 && __string.indexOf(__startMark)>=0;
    var hasEndMarker =  typeof __endMark !== 'undefined' && __endMark.length > 0 && __string.indexOf(__endMark) > 0;
    if( hasStartMarker )  myText = myText.split(__startMark)[1];
    if( hasEndMarker )    myText = myText.split(__endMark)[0];
    return myText;
}

// now with 1 line from now on, and no jquery needed really, but to use your example:
var textWithNoHTML = textBetween( $('#listItem').html(), '', '<'); // should return text before first child HTML tag if the text is on page (use document ready etc)

Das ist ein guter Weg für mich

   var text  =  $('#listItem').clone().children().remove().end().text();

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:

1. Sie erhalten nur den Text
2. Der Text, den Sie extrahieren möchten, steht vor den untergeordneten Elementen

Hier ist der Code:

// 'element' is a jQuery element
function getText(element) {
  var text = element.text();
  var childLength = element.children().text().length;
  return text.slice(0, text.length - childLength);
}

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.

$(el).contents().each(function() { 
  console.log(" > Content: %s [%s]", this, (this.nodeType === 3));

  if (this.nodeType === 3) {
    var text = this.textContent;
    console.log(" > Old   : '%s'", text);

    regex = new RegExp("\\[\\[" + rule + "\\.val\\]\\]", "g");
    text = text.replace(regex, value);

    regex = new RegExp("\\[\\[" + rule + "\\.act\\]\\]", "g");
    text = text.replace(regex, actual);

    console.log(" > New   : '%s'", text);
    this.textContent = text;
  }
});

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 bestimmt if (this.nodeType === 3)) wird die Regex-Substitution nur auf diese Elemente angewendet .

Der this.textContent = textTeil 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.

Gib es einfach in ein <p>oder <font>und nimm das $ ('# listItem font'). text ()

Das erste, was mir in den Sinn kam

<li id="listItem">
    <font>This is some text</font>
    <span id="firstSpan">First span text</span>
    <span id="secondSpan">Second span text</span>
</li>

Sie können dies versuchen

alert(document.getElementById('listItem').firstChild.data)

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.

$(function() {
$('body *').each(function () {
    console.log($(this).html());
    console.log($(this).text());
    if($(this).text() === "Search" && $(this).html()===$(this).text())  {
        $(this).html("Find");
    }
})
})

http://jsfiddle.net/7RSGh/

Verwenden Sie DotNetWala wie folgt, um das Ergebnis zu kürzen:

$("#foo")
    .clone()    //clone the element
    .children() //select all the children
    .remove()   //remove all the children
    .end()  //again go back to selected element
    .text()
    .trim();

Ich fand heraus, dass die Verwendung der kürzeren Version wie document.getElementById("listItem").childNodes[0]mit jQuerys trim () nicht funktioniert.

Ich bin kein JQuery-Experte, aber wie wäre es,

$('#listItem').children().first().text()

Dies ist noch nicht getestet, aber ich denke, Sie können möglicherweise Folgendes ausprobieren:

 $('#listItem').not('span').text();

http://api.jquery.com/not/