javascript - 如何从跨度获取自己的文本而不检索其子节点的文本？

Question

我有一段动态形成的 HTML，如下所示：

<span>
  10/10/2012
  <div class="calendar">
     lots of text elements here
  </div>
</span>

如何仅检索10/10/2012文本？

我试过span.outerText了，但它在 IE 和 Chrome 中有效，但在 Firefox 中无效。

Answer 1

使用 jQuery：

var s = $('span').clone();
s.children().remove();
var text = s.text();

没有 jQuery ：

var text = '';
for (var i=0; i<spanElement.childNodes.length; i++) {
   var n =  spanElement.childNodes[i];
   if (n.nodeType==3) text += n.textContent;
}

示范

我想您问题中的代码只是一个示例，但以防万一请注意跨度中不允许使用 div（请参阅跨度允许的内容）。

Answer 2

这是一个设计问题。将您的第一行包装<span>成另一个您可以轻松选择和操作的非块元素有什么问题？

像这样：

<span>
  <span class="date">10/10/2012</span>
  <div class="calendar">
  ....
</span>

您的文字将是：

$('.date').text();

Answer 3

如果你使用jQuery：

var text = $("span").clone().children().remove().end().text();

另一种方式：

var text = $("span").contents().filter(function() {
    return this.nodeType === 3;
}).text();

Answer 4

这不是最好的方法，但我可能会使用 innerHTLM 然后解析内容..

var tmpText = span.innerHTML;
var text = tmpText.subString(0,tmpText.indexOf('<'));

不漂亮，但它应该可以解决问题。至少在这种情况下.. 如果您有更多文本与其他子节点嵌套，则必须进行更多解析。