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

351

是否有可能在网站的某个段落中获得突出显示的文本，例如使用jQuery？

javascript jquery textselection

— 担
source

2

这是一个有效的解决方案dipaksblogonline.blogspot.in/2014/11/…–

— Dipak

简单的JavaScript为我工作。document.getSelection（）。anchorNode.data.substr（document.getSelection（）。anchorOffset，document.getSelection（）。focusOffset-document.getSelection（）。anchorOffset）

— Rohit Verma

@RohitVerma：只有在单个文本节点中包含选择的简单情况下，这才起作用，但绝不能保证是这种情况。

— 蒂姆·

@Dipak如何复制您在帖子中引用的博客中的社交共享功能？我试图将变量填充到Twitter链接中，而不仅仅是返回选定的字符串。

481

获取用户选择的文本相对简单。涉及jQuery没有任何好处，因为除了windowand document对象外，您什么都不需要。

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

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

function getSelectionText() {
    var text = "";
    var activeEl = document.activeElement;
    var 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>

展开摘要

— 蒂姆·唐
source

9

如果{} -fork有什么用，那还有什么呢？“控制”是什么？

— 丹

29

@丹：对不起，我错过了这个问题（不要以为我让我警惕了）。第二个分支用于IE <= 8（IE 9实现window.getSelection()）。该document.selection.type检查正在测试选择的是文本的选择，而不是控制选择。在IE中，控件选择是可编辑元素内部的选择，其中包含一个或多个带有轮廓和调整大小手柄的元素（例如图像和表单控件）。如果调用.createRange()这样的选择，则得到ControlRange而不是TextRange，而ControlRanges没有text属性。

— Tim Down

2

@TimDown说“ jQuery没有X”是一件很容易的事，因为当然，有了正确的插件，它就可以用JavaScript在浏览器中完成任何事情。在这种情况下，我们有jquery.selection（madapaja.github.io/jquery.selection）。说“也不应该”同样是错误的。我到达这里是因为我一直在寻找这个。我有一个用例，而jQuery是正确的解决方案。

— Auspex

8

@Auspex：我有点明白你的意思，但是我不同意。jQuery插件是一个依赖jQuery的库；它本身不是jQuery。在选择处理的情况下，jQuery本身不提供任何功能（这应该是正确的，因为选择处理不是jQuery的目的），因此任何使用jQuery的解决方案都会附带使用它。

— 蒂姆·唐

1

@ Dennis98：我不会被远程惹恼或冒犯:)检查输入类型是因为，如果您尝试访问Chrome控制台中的内容，selectionStart或者selectionEnd在没有访问的<input>元素类型（例如“数字”）中收到警告，支持它（例如，参见jsfiddle.net/6zoposby/2）。我离开了检查是否存在，selectionStart以便代码不会在IE <= 8中中断。我承认activeElement现在的检查可能已经过时。我slice之所以使用它，是因为它更强大（尽管在这里没有用），并且键入的时间比短substring。

— 蒂姆·唐

111

通过以下方式获取突出显示的文本：

window.getSelection().toString()

当然对以下对象也有特殊待遇：

document.selection.createRange().htmlText

— 帕帕
source

2

对于IE> = 10，“ document.selection IE10中的支持已删除，并替换为 window.getSelection ”。资料来源：connect.microsoft.com/IE/feedback/details/795325/…–

— user2314737

在多种浏览器（例如Firefox）中，这会在多种情况下失败。

— Makyen

11

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

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

— 安德鲁·肯尼迪
source

0

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

您可以在developer.mozilla.org上阅读更多内容

— 埃布卡
source