Utilisation de .text() pour récupérer uniquement le texte non imbriqué dans des balises enfant

Question

Si j'ai un html comme ça :

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

J'essaie d'utiliser .text() pour récupérer juste la chaîne "Ceci est du texte", mais si je disais $('#list-item').text() j'obtiens "This is some textFirst span textSecond span text".

Existe-t-il un moyen d'obtenir (et éventuellement de supprimer, via quelque chose du genre .text("") ) seulement le texte libre à l'intérieur d'une balise, et non le texte à l'intérieur de ses balises enfants ?

Le HTML n'a pas été écrit par moi, c'est donc avec cela que je dois travailler. Je sais qu'il serait simple d'envelopper le texte dans des balises lors de l'écriture du code HTML, mais là encore, le code HTML est pré-écrit.

Answer 1

J'ai aimé cette mise en œuvre réutilisable basée sur la clone() méthode trouvée ici pour obtenir uniquement le texte à l'intérieur de l'élément parent.

Le code est fourni pour une référence facile :

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

Answer 2

Réponse simple :

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

Answer 3

Cela ressemble à un cas de surutilisation de Jquery pour moi. Ce qui suit va saisir le texte en ignorant les autres noeuds :

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

Vous aurez besoin de couper ça, mais ça vous donne ce que vous voulez en une seule ligne facile.

EDIT

Ce qui précède permettra d'obtenir le nœud de texte . Pour obtenir le texte réel, utilisez ceci :

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

Answer 4

Plus facile et plus rapide :

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

Answer 5

Similaire à la réponse acceptée, mais sans clonage :

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

Et voici un plugin jQuery à cet effet :

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

Voici comment utiliser ce plugin :

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