获取突出显示/选定的文本

Question

是否可以通过使用 jQuery 来获取网站段落中突出显示的文本？

Answer 1

获取用户选择的文本相对简单。使用 jQuery 没有任何好处，因为除了 window 和 document 对象之外您不需要任何其他东西。

function getSelectionText() {
    let text = "";

    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }

    return text;
}

如果您对处理 </code> 和 texty <code><input></code> 元素中的选择的实现感兴趣，您可以使用以下内容。由于现在是 2016 年，我省略了 IE <= 8 支持所需的代码，但我已经在 SO 上的许多地方发布了相关内容。

function getSelectionText() {
    let text = "";
    const activeEl = document.activeElement;
    const activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null;

    if (
      (activeElTagName == "textarea") || (activeElTagName == "input" &&
      /^(?:text|search|password|tel|url)$/i.test(activeEl.type)) &&
      (typeof activeEl.selectionStart == "number")
    ) {
        text = activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd);
    } else if (window.getSelection) {
        text = window.getSelection().toString();
    }

    return text;
}

document.onmouseup = document.onkeyup = document.onselectionchange = function() {
  document.getElementById("sel").value = getSelectionText();
};

Selection:
<br>
<textarea id="sel" rows="3" cols="50"></textarea>
<p>Please select some text.</p>
<input value="Some text in a text input">
<br>
<input type="search" value="Some text in a search input">
<br>
<input type="tel" value="4872349749823">
<br>
<textarea>Some text in a textarea</textarea>

Answer 2

通过这种方式获取突出显示的文本：

window.getSelection().toString()

当然还有对 ie 的特殊处理：

document.selection.createRange().htmlText

Answer 3

使用window.getSelection().toString()。

您可以在 developer.mozilla.org 上了解更多信息

Answer 4

如果您使用 Chrome（无法验证其他浏览器）并且文本位于同一 DOM 元素中，则此解决方案有效：

window.getSelection().anchorNode.textContent.substring(
  window.getSelection().extentOffset, 
  window.getSelection().anchorOffset)

Answer 5

是的，您可以使用简单的 JavaScript 代码片段来做到这一点：

document.addEventListener('mouseup', event => {  
    if(window.getSelection().toString().length){
       let exactText = window.getSelection().toString();        
    }
}

Answer 6

如果需要，您可以使用事件

    document.addEventListener('selectionchange', (e)=>{
        console.log("Archor node - ",window.getSelection().anchorNode);
        console.log("Focus Node - ",window.getSelection().toString());
    });

Answer 7

只要找到另一种方法就可以了。 window.getSelection() 的设计非常糟糕，令人沮丧。从第一天开始，它应该是一个基于文本的函数，而不是一个基于节点的函数。

让我们看一些非常基本的东西 - 您想要突出显示文本并使该部分变为粗体。太棒了，window.getSelection() 非常适合...一次。

然而，由于您还想让该文本的一部分变为斜体……好吧……现在您完蛋了。您想要突出显示的文本现在被划分在 2 个或可能更多的节点之间...当 window.getSelection() 给出的起点仅适用于指定的节点并且不考虑格式时，这是一个问题 - 的数量当文本被分成几个节点时，文本开头所在的节点右侧的字符......它变得一团糟。

您无法再完整地查找选定的短语，因为像 或
这样的标签将导致您找不到文本，或者，如果您在没有格式化的情况下查找，那么您现在需要循环遍历每个字符 - 甚至那么您可能有几段相同的文本，因此循环遍历节点不会帮助您到达应该对文本进行编辑的位置，因为您现在需要交叉引用格式化和未格式化的文本...

只是不要不要使用它，它是来自一个时代的垃圾，在这个时代，糟糕的程序员认为他们有责任规定你使用什么浏览器或如何突出显示文本 - 如果出现错误或错误，那是用户没有按照程序员的方式做事的错希望他们这样做。

从头开始自己编写更好的代码。

哎呀，即使是像将所有字母放入一个数组中，其中数组中的每个项目都是一个单独的字母，然后使用 onmousedown/onmouseup 决定起点和终点这样的事情也更简单更快，而不是如果您必须处理 window.onmousedown/onmouseup 。 getSelection() 完全是垃圾。

不幸的是，99% 的你想让它做的事情它都不适合。

如果使用 getSelected(text); 会好得多。返回第一个和最后一个字符以及所选文本的位置。或者将其分为 3 个独立的函数，以满足我的所有需求。

那会好一千倍。