4

可以说我有一些这样的html：

<div id="content">Foo<span style='display:none'>hidden</span>Bar</div>

实际上，这更复杂，并且是由角度使用ng-hide和类似方法生成的。我需要从content用户可见的 div 中获取所有文本。在这种情况下，我想得到FooBar.

$('#content').text()是我发现的最接近的东西，但FoohiddenBar在这种情况下给了我。有没有一种只获取 div 的可见内容的好方法？我真的需要一个text()跳过隐藏元素的功能。

4

3 回答 3

9

创建一个克隆，将其添加到 DOM（如 slindberg 所指出的），删除所有隐藏元素，然后获取文本：

var clone = $('#content').clone();

clone.appendTo('body').find(':hidden').remove();

var text = clone.text();

clone.remove();

小提琴

于 2013-07-19T19:37:43.873 回答
5

不幸的是，@adeneo 的答案在大多数情况下都不起作用，因为克隆会创建一个文档片段，其子项根据定义是不可见的（它们未附加到文档），因此在.text()调用之前全部删除。这意味着元素的子元素的文本不会包含在结果中。

我发现这样做的唯一方法是实际上自上而下遍历所有节点，省略视觉上隐藏的节点。幸运的是，这可以用一个相当简洁的插件来表达：

jQuery.fn.visibleText = function() {
  return $.map(this.contents(), function(el) {
    if (el.nodeType === 3) {
      return $(el).text();
    }
    if ($(el).is(':visible')) {
      return $(el).visibleText();
    }
  }).join('');
};

请注意，此插件假定选择器的根元素不是文本节点（几乎从来不是这种情况）。另请注意，如果您不必支持 IE8 ，$(el).text()则可以替换为。el.textContent

JSFiddle

于 2014-03-19T21:41:37.613 回答
0

诀窍是修改 DOM 以获取文本，然后在完成后将其恢复为原始状态。以下是诀窍：

function get_visible_text(content) {
    // Not so easy to get the visible text
    var saved = $(content).clone();
    // Remove the hidden parts
    $(content).find(':hidden').remove();
    // Get the remaining text
    var visible_text = $(content).text();
    // Now revert back to our saved version
    $(content).replaceWith(saved);
    return visible_text;
}

请注意，@slindberg 是正确的，@adeneo 的答案将不起作用，因为克隆的对象在插入 DOM 之前是不可见的。通过就地修改 DOM，我们避免了这个问题。

于 2014-04-22T05:45:14.503 回答