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

Demonstration

我认为你问题中的代码只是一个示例，但为了注意在跨度中不允许使用div（参见span permitted content）。

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('<'));

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

如何从span中获取自己的文本而不检索其子节点的文本？

4 个答案: