window.getselection

window.getSelection() 是 JavaScript 中的一个方法，用于获取用户在页面上选中的文本内容。它返回一个 Selection 对象，该对象包含了用户选择的文本范围、起始位置、结束位置等信息。通过 window.getSelection()，开发者可以轻松地获取用户选择的文本，并对其进行进一步的处理，例如复制、格式化、分析等。

1. window.getSelection() 的基本用法

window.getSelection() 方法返回一个 Selection 对象，该对象代表了用户在页面上选择的文本范围。Selection 对象提供了多种属性和方法，用于操作和获取选择的详细信息。

const selection = window.getSelection();

通过 selection.toString() 方法，可以获取用户选择的文本内容：

const selectedText = selection.toString();
console.log(selectedText);

2. Selection 对象的属性和方法

Selection 对象提供了多种属性和方法，用于操作和获取选择的详细信息。以下是一些常用的属性和方法：

2.1 属性

• anchorNode: 返回选择范围的起始节点。
• anchorOffset: 返回选择范围在起始节点中的偏移量。
• focusNode: 返回选择范围的结束节点。
• focusOffset: 返回选择范围在结束节点中的偏移量。
• isCollapsed: 返回一个布尔值，表示选择范围是否为空（即用户是否只点击了页面而没有选择任何文本）。
• rangeCount: 返回选择范围中包含的 Range 对象的数量。

2.2 方法

• addRange(range): 将一个 Range 对象添加到选择范围中。
• collapse(node, offset): 将选择范围折叠到指定节点的指定偏移量处。
• containsNode(node, partialContainment): 判断指定节点是否在选择范围内。
• deleteFromDocument(): 从文档中删除选择范围内的内容。
• extend(node, offset): 将选择范围的结束位置扩展到指定节点的指定偏移量处。
• getRangeAt(index): 返回选择范围中指定索引处的 Range 对象。
• removeAllRanges(): 移除选择范围中的所有 Range 对象。
• selectAllChildren(node): 选择指定节点的所有子节点。
• setPosition(node, offset): 将选择范围设置到指定节点的指定偏移量处。

3. Range 对象

Selection 对象通常包含一个或多个 Range 对象。Range 对象代表了文档中的一个连续的区域，通常用于表示用户选择的文本范围。Range 对象提供了多种属性和方法，用于操作和获取范围的详细信息。

3.1 Range 对象的属性和方法

• startContainer: 返回范围的起始节点。

• startOffset: 返回范围在起始节点中的偏移量。

• endContainer: 返回范围的结束节点。

• endOffset: 返回范围在结束节点中的偏移量。

• collapsed: 返回一个布尔值，表示范围是否为空。

• commonAncestorContainer: 返回范围的起始节点和结束节点的共同祖先节点。

• setStart(node, offset): 设置范围的起始位置。

• setEnd(node, offset): 设置范围的结束位置。

• setStartBefore(node): 将范围的起始位置设置为指定节点的前面。

• setStartAfter(node): 将范围的起始位置设置为指定节点的后面。

• setEndBefore(node): 将范围的结束位置设置为指定节点的前面。

• setEndAfter(node): 将范围的结束位置设置为指定节点的后面。

• selectNode(node): 选择指定节点。

• selectNodeContents(node): 选择指定节点的所有内容。

• collapse(toStart): 将范围折叠到起始位置或结束位置。

• cloneContents(): 克隆范围内的内容并返回一个 DocumentFragment 对象。

• deleteContents(): 删除范围内的内容。

• extractContents(): 提取范围内的内容并返回一个 DocumentFragment 对象。

• insertNode(node): 在范围的起始位置插入指定节点。

• surroundContents(node): 将范围内的内容包裹在指定节点中。

• compareBoundaryPoints(how, sourceRange): 比较当前范围与指定范围的边界点。

• cloneRange(): 克隆当前范围并返回一个新的 Range 对象。

• detach(): 释放当前范围的所有资源。

4. 实际应用场景

window.getSelection() 方法在实际开发中有多种应用场景，以下是一些常见的例子：

4.1 获取用户选择的文本

通过 window.getSelection() 方法，可以轻松获取用户选择的文本内容，并将其用于进一步的处理，例如复制到剪贴板、进行文本分析等。

document.addEventListener('mouseup', () => {
  const selection = window.getSelection();
  const selectedText = selection.toString();
  console.log(selectedText);
});

4.2 高亮用户选择的文本

通过 window.getSelection() 方法，可以获取用户选择的文本范围，并对其进行高亮处理。例如，可以使用 Range 对象将选择的文本包裹在一个带有特定样式的 <span> 元素中。

document.addEventListener('mouseup', () => {
  const selection = window.getSelection();
  if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    const span = document.createElement('span');
    span.style.backgroundColor = 'yellow';
    range.surroundContents(span);
  }
});

4.3 自定义右键菜单

通过 window.getSelection() 方法，可以获取用户选择的文本，并根据选择的文本内容显示自定义的右键菜单。例如，可以显示一个包含“复制”、“翻译”、“搜索”等选项的菜单。

document.addEventListener('contextmenu', (event) => {
  const selection = window.getSelection();
  const selectedText = selection.toString();
  if (selectedText) {
    event.preventDefault();
    // 显示自定义右键菜单
    showCustomContextMenu(event.clientX, event.clientY, selectedText);
  }
});

4.4 文本分析和处理

通过 window.getSelection() 方法，可以获取用户选择的文本，并对其进行进一步的分析和处理。例如，可以统计选择的文本中的单词数量、字符数量，或者对文本进行分词、词性标注等自然语言处理操作。

document.addEventListener('mouseup', () => {
  const selection = window.getSelection();
  const selectedText = selection.toString();
  if (selectedText) {
    const wordCount = selectedText.split(/\s+/).length;
    const charCount = selectedText.length;
    console.log(`选择的文本包含 ${wordCount} 个单词和 ${charCount} 个字符。`);
  }
});

5. 兼容性和注意事项

window.getSelection() 方法在现代浏览器中得到了广泛的支持，但在某些旧版浏览器中可能存在兼容性问题。因此，在使用 window.getSelection() 方法时，建议进行兼容性检查，并采取相应的兼容性处理措施。

if (window.getSelection) {
  const selection = window.getSelection();
  const selectedText = selection.toString();
  console.log(selectedText);
} else {
  console.log('当前浏览器不支持 window.getSelection() 方法');
}

此外，需要注意的是，window.getSelection() 方法只能获取用户在页面上选择的文本内容，而不能获取用户在输入框（如 <input> 或 <textarea>）中选择的文本。如果需要获取输入框中选择的文本，可以使用 selectionStart 和 selectionEnd 属性。

const input = document.querySelector('input');
const selectedText = input.value.substring(input.selectionStart, input.selectionEnd);
console.log(selectedText);

6. 总结

window.getSelection() 是 JavaScript 中一个非常有用的方法，用于获取用户在页面上选择的文本内容。通过 Selection 和 Range 对象，开发者可以轻松地操作和获取选择的详细信息，并将其应用于各种实际场景中。无论是在文本处理、用户交互增强，还是在自然语言处理等领域，window.getSelection() 都能发挥重要作用。