CSS/JavaScript：获取元素的用户可见文本

Posted 2023-05-07

【中文标题】CSS/JavaScript：获取元素的用户可见文本

【英文标题】：CSS/JavaScript: get user-visible text of an element

【发布时间】：2011-01-22 00:25:26

【问题描述】：

假设我有以下 html：

<div id="test">
  <span style="display:inline;">foo</span>
  <span style="display:none;">bar</span>
  <span style="display:inline;">baz</span>
</div>

.. 在 javascript 中有什么方法可以让我获得输出“foo baz”（而不是“foo bar baz”）？

$('test').textContent 返回后者，innerHTML 执行相同的操作。

我根本不在乎使用的方法是hackish还是roundabout，如果它是特定于浏览器或需要Flash的，我可以处理它。

但是，它不能需要除 JS 或 Flash 以外的任何东西，不能需要任何用户交互，并且不能返回 'bar'。

想法？

【参考方案1】：

您可以这样做，但请注意它不会像您的示例那样有空格，因为标记中没有空格：

$("#test :visible").text()

这是另一种选择，例如您的示例为每个跨度间隔开：

var s = new Array();
$("#test :visible").each(function() 
   s.push($(this).text());
);
alert(s.join(' '));

【讨论】：

这正是我想要的。完美的。我不需要添加数组，因为我可以在每个锚标记文本的内部添加一个空格。需要注意的一件事：您的方法需要 jQuery。

PS 实施并感谢：cssfingerprint.com :) 在 Safari 中，这种方法比我以前的方法快 4 倍。在 Firefox 中，这不是改进。还是值得的。谢谢！