¿Cómo obtener el nodo de texto de un elemento?
<div class="title">
I am text node
<a class="edit">Edit</a>
</div>
Deseo obtener el nodo "Soy un nodo de texto", no deseo eliminar la etiqueta "editar" y necesito una solución para varios navegadores.
var text = $(".title").contents().filter(function() {
return this.nodeType == Node.TEXT_NODE;
}).text();
Esto obtiene el contents
elemento seleccionado y le aplica una función de filtro. La función de filtro devuelve sólo nodos de texto (es decir, aquellos nodos con nodeType == Node.TEXT_NODE
).
Puede obtener el valor de nodo del primer nodo secundario usando
$('.title')[0].childNodes[0].nodeValue
http://jsfiddle.net/TU4FB/
Otra solución JS nativa que puede resultar útil para elementos "complejos" o profundamente anidados es utilizar NodeIterator . Colóquelo NodeFilter.SHOW_TEXT
como segundo argumento ("whatToShow") e itere solo sobre los nodos secundarios de texto del elemento.
var root = document.querySelector('p'),
iter = document.createNodeIterator(root, NodeFilter.SHOW_TEXT),
textnode;
// print all text nodes
while (textnode = iter.nextNode()) {
console.log(textnode.textContent)
}
<p>
<br>some text<br>123
</p>
También puedes usar TreeWalker
. La diferencia entre los dos es que NodeIterator
es un iterador lineal simple, mientras que TreeWalker
también le permite navegar a través de hermanos y antepasados.
Versión ES6 que devuelve el contenido del primer nodo #text
const extract = (node) => {
const text = [...node.childNodes].find(child => child.nodeType === Node.TEXT_NODE);
return text && text.textContent.trim();
}