如何使用JavaScript获取网站任意区域的当前文本选中内容？

document.getSelection()只能抓取普通文本节点的选中内容，<textarea>和文本类型的<input>因为有独立的选中状态管理，所以得单独处理，但完全不需要遍历所有元素，用下面的方法就能快速搞定：

• 先通过document.activeElement拿到当前聚焦的元素——同一时刻只有一个元素能获得焦点，所以如果有表单控件存在选中内容，它必然是当前聚焦的元素
• 针对不同元素类型分别处理：

  let selectedContent = '';
  const focusedEl = document.activeElement;
  
  // 处理textarea和文本输入框
  if (focusedEl.tagName === 'TEXTAREA' || (focusedEl.tagName === 'INPUT' && focusedEl.type === 'text')) {
    const startPos = focusedEl.selectionStart;
    const endPos = focusedEl.selectionEnd;
    selectedContent = focusedEl.value.slice(startPos, endPos);
  } else {
    // 处理普通文本、contenteditable元素的选中
    const selection = document.getSelection();
    selectedContent = selection.toString();
  }
  
  // 输出结果
  console.log(selectedContent);
  

补充说明： #

• 对于设置了contenteditable="true"的元素，它们的选中内容可以直接用document.getSelection()获取，不需要额外处理
• 这种方式的效率远高于遍历所有元素，因为利用了浏览器原生的焦点机制，直接定位到可能存在选中内容的目标元素

内容的提问来源于stack exchange，提问作者allo