如何使用 jQuery（或 Javascript）获取可见文本？

Question

我有网站可以转换Japanese Kanji into Romaji (roman letters):

输出显示和隐藏用户需要根据输入标准查看的内容。例如：

<div id="output"><span class="roman">watashi</span> <span class="english">I</span></div>

该界面允许用户根据他们想要看到的内容在watashi 或I 之间切换和输出。 CSS 使用 jQuery 和切换按钮隐藏其中之一。 （隐藏机制包括简单地向 body 添加一个类并让 CSS 完成它的工作）。

问题在于，当用户将文本复制/粘贴到 Word 中时，它会复制所有内容。所以我决定使用一个系统来复制粘贴文本，使用 JavaScript 和 jQuery，但问题再次出现：

$('#output').text() 输出watashi I，即使I 在页面本身而不是watashi 上是不可见的。有什么方法可以只获取可见文本？

Answer 1

使用:visible selector of jQuery

在你的情况下，我认为你想做：

$('#output').children(":visible").text() 

Answer 2

不要隐藏 span，而是删除 span 元素并保留对它的引用。当用户单击切换按钮时，删除另一个并插入您保留引用的那个。用户将无法再选择不在 DOM 中的内容。

Answer 3

其他解决方案没有给我我需要的东西。

简答

我的答案是：

$('#output *:not(:has(*)):visible').text()

plunkr

TL;DR

marcgg解决方案的问题

你不应该询问某个根元素下所有元素的文本..

为什么？ - 它将重复输出并忽略隐藏标志

让我们看一个简单的例子

<div id="output" class="my-root">
    <div class="some-div">
         <span class="first" style="display:none"> hidden text </span>
         <span class="second" > visible text </span>
    </div>
<div>

现在如果我这样做$('#output').children(":visible").text()

我会得到.some-div 和.second.. 事实上.some-div 对我来说并不重要..

当我在这些元素上请求 text() 时，.some-div 也会返回隐藏文本..

所以从技术上讲，marcgg 的解决方案是错误的恕我直言......

我回答的原因

现在，为了正确回答这个问题，我们必须做出一个假设。对我来说，这似乎足够合理。

假设是文本只出现在叶元素中..

所以我们不会看到这样的：

<div id="output" class="my-root">
    <div class="some-div">
         <span class="first" style="display:none"> hidden text </span>
         <span class="second" > visible text </span>
    </div>

    some text here.. 

<div>

为什么这个假设对我来说似乎是合理的？两个原因：

• 因为很难维护以这种方式构建的页面 - 并且随着时间的推移，有经验的人会学习并避免它。
• 很容易将您的 html 转换为这样的结构。只需用跨度包装父母的文字。所以即使这个假设现在不存在，也很容易实现。

有了这个假设，你要做的是请求所有的叶子元素（没有子元素的元素），过滤掉可见的元素，然后请求它们的文本..

$('#output *:not(:has(*)):visible').text()

这应该会产生正确的结果。

必须在叶子元素之外有文字吗？

cmets 建议有时您只需要在叶子元素之外添加文本

<div> This is some <strong style="display:none"> text </strong>  </div>

如您所见，您有<strong> 作为叶子，并且在此示例中通常在其外部放置文本。

您可以使用我上面建议的解决方法来解决它。但是如果您不能呢？

您可以克隆 dom，然后删除所有隐藏的元素。 这里的问题是，为了让:visible 选择器或:hidden 选择器工作，我必须在文档上有 dom 元素（这意味着用户实际上可以看到）。 所以，这种方法有一些副作用，所以要小心。

这是一个例子

对于这个 html

 <div id="output" class="my-root">
     <span>
         some text <strong style="display:none">here.. </strong>
     </span>
</div>

这个javascript有效

$(function(){
     var outputClone = $('#output').clone();
    $('#output :hidden').remove(); 
    console.log($('#output').text()); // only visible text
    $('#output').replaceWith(outputClone);
    console.log($('#output').text()); // show original state achieved. 
})

见plunker here

如前所述 - 副作用可能看起来像瞬间闪烁，或一些应该运行的初始化脚本。有些可能会通过一些原始想法来避免（大小为 1px/1px 的 div 包含原始内容旁边的克隆？）取决于你的场景。

Answer 4

小伙答对了。

但是，我正在处理一个“this”对象，因此要让他的答案起作用，您需要使用以下语法...

$('*:not(:has(*)):visible', this).text()

Answer 5

var lookup = function(element, text) {
    //DFS Recursive way of finding text on each level
    //Visible only works on elements that take up space(i.e. not fixed position elements)
    var results = element.children(':visible');

    //Look at the text at each level with the children removed
    var newText = '';
    results.each(function(index, value) {
        newText += $(value).clone()
            .children()
            .remove()
            .end()
            .text();
    });

    var moreResultText = '';
    results.each(function(index, value) {
        moreResultText += lookup($(value), text);
    })

    if (results.length > 0) {
        return text + newText + moreResultText;
    } else {
        return text;
    }
};

lookup($('#output'), ''));

大多数其他功能在页面的大部分区域运行时都会崩溃，这应该是一种更准确的方法来确定实际向用户显示的内容，不会损坏页面，也不会返回不可见的文本用户。

当然要小心，这不会保留任何格式感，并且元素之间的输出间距可能不正确。此外，它可能没有正确排序返回的文本，在这些方面它的使用将受到限制。另一个考虑因素是可见的真正定义对nail down 来说有点困难，但对于这个例子，我接受 ":visible" 适用于大多数常见情况。

我用它来检查页面是否包含可见文本（只需在 body 元素上运行它），但它可能也适用于这个示例。

Answer 6

在现代浏览器中试试这个（这里的“元素”是一个非 JQuery DOM 对象）：

function getVisibleText(element) {
    window.getSelection().removeAllRanges();

    let range = document.createRange();
    range.selectNode(element);
    window.getSelection().addRange(range);

    let visibleText = window.getSelection().toString().trim();
    window.getSelection().removeAllRanges();

    return visibleText;
}

然后：

getVisibleText(document.getElementById('output'));