Usar .text() para recuperar solo texto no anidado en etiquetas secundarias
Si tengo html como este:
<li id="listItem">
This is some text
<span id="firstSpan">First span text</span>
<span id="secondSpan">Second span text</span>
</li>
Estoy tratando de usar .text()para recuperar solo la cadena "Este es un texto", pero si dijera $('#list-item').text(), obtengo "Este es un textoPrimer texto extendidoSegundo texto extendido".
¿Hay alguna manera de obtener (y posiblemente eliminar mediante algo como .text("")) solo el texto libre dentro de una etiqueta y no el texto dentro de sus etiquetas secundarias?
El HTML no lo escribí yo, así que esto es con lo que tengo que trabajar. Sé que sería sencillo simplemente envolver el texto en etiquetas al escribir el html, pero nuevamente, el html está preescrito.
Me gustó esta implementación reutilizable basada en el clone()método que se encuentra aquí para obtener solo el texto dentro del elemento principal.
Código proporcionado para fácil referencia:
$("#foo")
.clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text();
Respuesta sencilla:
$("#listItem").contents().filter(function(){
return this.nodeType == Node.TEXT_NODE;
})[0].nodeValue = "The text you want to replace with"
Si por alguna razón necesita admitir Internet Explorer por debajo de la versión 8, debe usar 3en lugar de Node.TEXT_NODE.
Esto me parece un caso de uso excesivo de jquery. Lo siguiente capturará el texto ignorando los otros nodos:
document.getElementById("listItem").childNodes[0];
Tendrás que recortarlo, pero obtendrás lo que deseas en una línea sencilla.
EDITAR
Lo anterior obtendrá el nodo de texto . Para obtener el texto real, use esto:
document.getElementById("listItem").childNodes[0].nodeValue;
Similar a la respuesta aceptada, pero sin clonación:
$("#foo").contents().not($("#foo").children()).text();
Y aquí hay un complemento jQuery para este propósito:
$.fn.immediateText = function() {
return this.contents().not(this.children()).text();
};
A continuación se explica cómo utilizar este complemento:
$("#foo").immediateText(); // get the text without children
