如何使用Javascript在网站的任何部分获取当前文本选择？

Question

我想从网站获取所选文本，但是当我使用

document.getSelection

时，它不适用于文本区域内的选择，并且要从文本区域获取选择，我需要知道哪个文本区域有要使用的选择文本区域功能。是否有一种简单的方法来获取当前选择，或者我是否需要迭代所有元素以测试它们是否包含所选文本？

Answer 1

一般文档内容中的文本选择和用户输入元素中的文本选择是互斥的。

• HTMLTextAreaElement 和 HTMLInputElement 都具有

  selectionStart

  和

  selectionEnd

  属性，它们是所选文本在其内容中的偏移量

• 不支持选择的INPUT元素返回

  null

  作为选择开始/结束属性。

• 如果

  selectionStart

  和

  selectionEnd

  具有相同的值，则元素内没有选择，如果值是数字，则给出元素中光标的位置。

• 如果单击页面上的其他位置，INPUT 和 TEXTAREA 元素将失去焦点，并且其中的任何选定内容都会被取消选择。

• document.activeElement

  保存对当前焦点元素的引用。

  null

  值表示用户已单击浏览器中的外部网页内容，可能是为了更改选项卡。非空

  tagName

  的

  activeElement

  属性表示它是大写的元素类型。

将所有这些放在一起，我将从类似于下面的函数开始 - 如果页面不处于焦点或两种类型的对象之一，它返回 null：选择对象或包含用户输入详细信息的自定义对象将

type

属性设置为“UIText”。

function getCurrentSelection() {
  let selection;

  const active = document.activeElement;
  if(!active) return null;

  let tagName = active.tagName;
  if( tagName == "INPUT" || tagName == "TEXTAREA") {
    const {selectionStart, selectionEnd} = active;
    selection = selectionStart === null ? null :
      {
        type: "UIText",
        element: active,
        tag: tagName,
        selectionStart,
        selectionEnd,
       text: active.value.substring(selectionStart, selectionEnd)
    };
   }
   else {
      selection = document.getSelection()
   }
   return selection;
}