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() 都能发挥重要作用。