获取元素的文本节点

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

我希望得到“我是文本节点”不希望删除“编辑”标签，并需要一个跨浏览器的解决scheme。 这可能是简单的事情，但我想不出另一种办法。

Answer 1

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

这将获取所选元素的contents ，并为其应用filterfunction。 过滤函数只返回文本节点（即nodeType == Node.TEXT_NODE节点）。

Answer 2

你可以使用第一个childNode的nodeValue

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

http://jsfiddle.net/TU4FB/

Answer 3

如果您的意思是获取元素中第一个文本节点的值，则此代码将工作：

 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; } } 

你可以在这里看到这个： http : //jsfiddle.net/ZkjZJ/

Answer 4

.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 5

另一个可用于“复杂”或深度嵌套元素的原生JS解决scheme是使用NodeIterator 。 把NodeFilter.SHOW_TEXT作为第二个参数（“whatToShow”），并遍历元素的文本节点子节点。

 var root = document.getElementById('...'), iter = document.createNodeIterator (root, NodeFilter.SHOW_TEXT), textnode; while (textnode = iter.nextNode()) { // do something with the text node } 

你也可以使用TreeWalker 。 两者之间的区别在于NodeIterator是一个简单的线性迭代器，而TreeWalker允许您通过兄弟和祖先进行导航。

Answer 6

返回第一个#text节点内容的ES6版本

 const extract = (node) => { const nodes = Array.from(node.childNodes).filter(f => f.nodeName === '#text'); return nodes.length ? nodes[0].textContent.trim() : ''; } 

Answer 7

这将忽略空白，所以，你从来没有得到空白textNodes..code使用核心的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; } } 

检查它在jsfiddle： – http://jsfiddle.net/webx/ZhLep/

Answer 8

您也可以使用XPath的text()节点testing来获取文本节点。 例如

 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; }