Question

假设我有一些像这样的HTML：

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

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

$('#content').text()是我找到的最接近的东西，但在这种情况下，这给了我FoohiddenBar。有没有一个很好的方法来获得div的可见内容？我真的需要一个跳过隐藏元素的text()函数。

Answer 1

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

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

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

var text = clone.text();

clone.remove();

FIDDLE

Answer 2

不幸的是，@ 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

Answer 3

诀窍是修改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，我们可以避免这个问题。

仅使用jquery获取可见文本

3 个答案: