javascript - 仅获取在 javascript 中构造成字符串的文本节点

Question

<div>
some text I want
<span><sup>text I don't want</sup></span>
</div>

以上是一些示例html。我希望能够只选择 div 的文本，而不选择位于跨度中的子 html 文本。有什么简单的方法可以做到这一点，还是我必须想出一些方法来破解标记？

我试过使用 jquery 选择器来选择 div，但是当我最终调用 .text() 方法时，你最终会再次得到所有文本......我是否遗漏了一些非常明显的东西？

Answer 1

可能是像下面这样的东西应该给你文字，

演示

var justText = $('div').contents().filter(function () {
    if (this.nodeType == 3) return true;
}).text();

请注意，这也会返回换行符和空格。

你可以$.trim用来摆脱那些，

justText = $.trim(justText);

Answer 2

只需收集直接子节点的文本：

function getImmediateText(el) {
  var node, nodes = el.childNodes;
  var text = '';

  for (var i=0, iLen=nodes.length; i<iLen; i++) {
    node = nodes[i];

    if (node.nodeType == 3) {
      text += node.data;
    }
  }
  // You may want to trim excess white space here
  return text;
}

这将适用于每个浏览器，并且不需要库支持。

Answer 3

尝试：

var text = $('div').contents().get(0);

Answer 4

尝试这个：

$('div').clone().children().remove().end().text()

Answer 5

jQuery 是完全没有必要的。剥离所有 HTML：

var text = node.innerHTML.replace(/<.+>/, '');

使用 jQuery演示选择 div。

Answer 6

可以在此处找到示例的完整解释答案：http: //jsfiddle.net/xHcPU/

//elem.childNodes is a NodeList containing all child nodes of the array
//This includes every node - text and elements
// https://developer.mozilla.org/En/DOM/Node.childNodes
var childNodes = document.getElementById( 'special' ).childNodes;

//arr.reduce receives an array-like object and a callback
// https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/Reduce

//We use func.call to call arr.reduce with the childNodes as the this variable
// https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call
var out = [].reduce.call( childNodes, function ( ret, child ) {

    //if a node's nodeType is 3, you can safely say it's a text node
    // https://developer.mozilla.org/en/nodeType
    if ( child.nodeType === 3 ) {
        ret += child.nodeValue.trim();
    }
    //if it's any other node, we just ignore it
    return ret;

}, '' );

//out will now contain the string you seek

请注意，这里使用的两个 ES5 函数Array.prototype.reduce和String.prototype.trim可以很容易地替换为 shim、您自己的实现，或者，如果存在，则可以使用 jQuery 等价物。我不记得有一个reduce等价物，但我确实相信存在trim一个。