¿Cómo obtener el nodo de texto de un elemento?

Question

<div class="title"> 
    I am text node 
    <a class="edit">Edit</a> 
</div> 

Deseo obtener el "Soy nodo de texto", no deseo eliminar la etiqueta "Editar" y necesito una solución de navegador cruzado.

Answer 1

var text = $(".title").contents().filter(function() { 
    return this.nodeType == Node.TEXT_NODE; 
}).text(); 

Esto tiene la contents del elemento seleccionado, y se aplica un filtro funcionar para eso. La función de filtro devuelve solo nodos de texto (es decir, los nodos con nodeType == Node.TEXT_NODE).

Answer 2

.text() - for jquery

$('.title').clone() //clone the element 
.children() //select all the children 
.remove() //remove all the children 
.end() //again go back to selected element 
.text(); //get the text of element 

Answer 3

que pueda obtener el nodeValue de la primera childNode usando

$('.title')[0].childNodes[0].nodeValue 

http://jsfiddle.net/TU4FB/

Answer 4

Si se refiere a obtener el valor del primer nodo de texto en el elemento, el código funcionará:

var oDiv = document.getElementById("MyDiv"); 
var firstText = ""; 
for (var i = 0; i < oDiv.childNodes.length; i++) { 
    var curNode = oDiv.childNodes[i]; 
    if (curNode.nodeName === "#text") { 
     firstText = curNode.nodeValue; 
     break; 
    } 
} 

se puede ver esto en acción aquí: http://jsfiddle.net/ZkjZJ/

Answer 5

Esto ignorar el espacio en blanco como bueno, tu nunca obtuviste el código en blanco de los nodos de texto usando el núcleo del Javascript.

var oDiv = document.getElementById("MyDiv"); 
var firstText = ""; 
for (var i = 0; i < oDiv.childNodes.length; i++) { 
    var curNode = oDiv.childNodes[i]; 
    whitespace = /^\s*$/; 
    if (curNode.nodeName === "#text" && !(whitespace.test(curNode.nodeValue))) { 
     firstText = curNode.nodeValue; 
     break; 
    } 
} 

comprobarlo en jsFiddle: - http://jsfiddle.net/webx/ZhLep/

Answer 6

Otra solución nativa JS que puede ser útil para los elementos "complejas" o anidadas es utilizar NodeIterator. Ponga NodeFilter.SHOW_TEXT como el segundo argumento ("whatToShow"), e itere solo sobre el nodo de texto children del elemento.

var root = document.getElementById('...'), 
    iter = document.createNodeIterator (root, NodeFilter.SHOW_TEXT), 
    textnode; 

while (textnode = iter.nextNode()) { 
    // do something with the text node 
} 

También puedes usar TreeWalker. La diferencia entre los dos es que NodeIterator es un iterador lineal simple, mientras que TreeWalker le permite navegar a través de hermanos y ancestros también.

Answer 7

También puede usar la prueba de nodo text() de XPath para obtener solamente los nodos de texto. Por ejemplo

var target = document.querySelector('div.title'); 
var iter = document.evaluate('text()', target, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE); 
var node; 
var want = ''; 

while (node = iter.iterateNext()) { 
    want += node.data; 
} 

Answer 8

ES6 versión que devolver el contenido primer nodo #text

const extract = (node) => { 
    const text = Array.from(node.childNodes).find(f => f.nodeName === '#text'); 
    return text ? text.textContent.trim() : ''; 
}