2

我有一个 div 设置是这样的：

<div id="test"> <p>Hello</p> <p style="display: none">Goodbye</p> </div>

编辑：为了澄清，这是最简单的例子。div 可以有任意数量的 n 个深度嵌套的子级。

$('#test').getText()返回“你好再见”。这是在 Firebug 中测试的单行代码：jQuery('<div id="test"> <p>Hello</p> <p style="display: none">Goodbye</p> </div>').text()

这似乎是因为 jQuery 内部使用的 textContent（对于非 IE）返回隐藏元素作为文本的一部分。哼。

有没有办法返回忽略 display:none'd 元素的文本内容？基本上，我试图模仿用鼠标突出显示 div 并复制到系统剪贴板的文本。这忽略了隐藏的文本。

有趣的是，如果您创建一个选择范围并从中获取文本，这也会在 display:none 元素中返回文本。

var range = document.body.createTextRange();
range.moveToElementText($('#test')[0]);
range.select();

console.log(range.toString()); // Also logs Hello Goodbye!

因此，就 display:none 元素而言，创建文档选择范围似乎与用鼠标突出显示不同。我该如何解决这个肮脏的泡菜难题？

编辑：.filter(':visible').text建议使用，但它不适用于这种情况。我需要返回的文本与鼠标选择的内容完全相同。例如：

$('<div>test1 <p>test2</p>\r\n <b>test3</b> <span style="display:none">none</span></div>').appendTo(document.body).children().filter(':visible').text()

返回

"test2test3"

当我真正想要的输出是

test1 test2
 test3

换行符、空格和所有，来自 \r\n

4

6 回答 6

4

使用 过滤元素.filter(":visible")。

或者使用这个：

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

但是jQuery 文档建议我们.filter()改用：

因为:visible是 jQuery 扩展而不是 CSS 规范的一部分，所以使用的查询:visible不能利用原生 DOMquerySelectorAll()方法提供的性能提升。为了在使用 :visible 选择元素时获得最佳性能，首先使用纯 CSS 选择器选择元素，然后使用.filter(":visible").

于 2011-09-12T01:00:50.040 回答
2

在您的选择器中使用:visible：

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

一个函数示例：

- 编辑：

http://jsfiddle.net/8H5ka/ （在 Chrome 上工作它在结果中显示“Hello”）

如果上述方法不起作用：

http://jsfiddle.net/userdude/8H5ka/1/

于 2011-09-12T01:03:07.517 回答
1

如果空间不是主要问题，您可以复制标记、删除隐藏元素并输出该文本。

var x = $('#test').clone();
x.filter(':not(:visible)').remove();
return x.text();
于 2011-09-12T02:09:30.433 回答
0

以下是我使用 MooTools 的方法：

$extend(Selectors.Pseudo, {
    invisible: function() {
        if(this.getStyle('visibility') == 'hidden' || this.getStyle('display') == 'none') {
            return this;
        }
    }
});

Element.implement({
    getTextLikeTheBrowserWould = function() {
        var temp = this.clone();
        temp.getElements(':invisible').destroy();
        return temp.get('text').replace(/ |&amp;/g, ' ');
    }
})
于 2012-07-31T23:18:34.140 回答
0

我遇到了这个问题并找到了这个问题，看来实际的解决方案是基于提供的答案，但实际上并没有写出来。所以这是一个适用于我的情况的完整解决方案，它与 OP 相同，但额外规定元素可能由于基于 DOM 位置的外部样式而不可见。例子：

<style>.invisible-children span { display: none; }</style>
<div class="invisible-children">
  <div id="test">Hello <span>Goodbye</span></div>
</div>

解决方案是：

  1. 克隆整个对象。
  2. 将不可见的物体移走；如果我们#test在移除不可见对象之前从 DOM 中取出，jQuery 可能不知道它们是不可见的，因为它们将不再符合 CSS 规则。
  3. 获取对象的文本。
  4. 用我们制作的克隆替换原始对象。

编码：

var $test = $('#test');
// 1:
var $testclone = $test.clone();
// 2: We assume that $test is :visible and only remove children that are not.
$test.find('*').not(':visible').remove();
// 3:
var text = $test.text();
// 4:
$test.replaceWith($testclone);
// Now return the text...
return text;
// ...or if you're going to keep going and using the $test variable, make sure
// to replace it so whatever you do with it affects the object now in DOM and
// not the original from which we got the text after removing stuff.
$test = $testclone;
$test.css('background', 'grey'); // For example.
于 2012-07-31T22:11:19.380 回答
0

我搜索并找到了这个问题，但没有解决方案。对我来说，解决方案就是离开 jquery 来使用 DOM：

var $test = $('#test').get(0).innerText

或者如果选择器数组中的元素不止一个，则需要一个 for 循环和一个合并，但我想大多数时候它是您需要的第一个版本。

var $test = $('#test').get().map(a => a.innerText).join(' ');
于 2019-03-16T10:23:50.890 回答