getSelection() API 是一个用于获取用户在网页上选择的文本的 JavaScript API。它返回一个 Selection 对象，该对象包含有关所选文本的信息，例如所选文本的内容、起始位置和结束位置等。
使用方法：
const selection = window.getSelection();
if (selection.rangeCount > 0) { // 检查是否有选中的内容
const selectedText = selection.toString(); // 获取选中的文本
const range = selection.getRangeAt(0); // 获取选中区域的范围 (Range 对象)
// Range 对象可以用来获取更多信息，例如：
const startNode = range.startContainer; // 选区开始的节点
const startOffset = range.startOffset; // 选区开始的偏移量
const endNode = range.endContainer; // 选区结束的节点
const endOffset = range.endOffset; // 选区结束的偏移量
// 你还可以操作选区，例如：
range.deleteContents(); // 删除选中的内容
range.insertNode(document.createTextNode("新文本")); // 插入新的节点
selection.removeAllRanges(); // 清除选区
selection.addRange(range); // 重新设置选区
} else {
// 没有选中的内容
}
使用场景：
- 复制粘贴功能： 浏览器内置的复制粘贴功能就是基于
getSelection()API 实现的。 - 富文本编辑器： 富文本编辑器需要获取用户选中的文本，以便进行加粗、斜体、添加链接等操作。
- 文本分析工具： 例如，提取用户选择的文本进行情感分析、关键词提取等。
- 自定义上下文菜单： 根据用户选择的文本，显示不同的上下文菜单选项。例如，选中一段文本后，可以出现“翻译”、“搜索”等选项。
- 拼写检查和语法检查： 获取用户选中的文本进行拼写和语法检查。
- 辅助阅读功能： 例如，高亮用户选中的文本，或者朗读用户选中的文本。
- 获取用户反馈： 例如，用户可以选择网页上的文本并提交反馈，指出错误或提出建议。
示例：获取选中文本并显示在弹窗中
<!DOCTYPE html>
<html>
<head>
<title>getSelection() 示例</title>
</head>
<body>
<p>这是一段示例文本，请选中一部分。</p>
<button onclick="showSelectedText()">显示选中文本</button>
<script>
function showSelectedText() {
const selection = window.getSelection();
const selectedText = selection.toString();
if (selectedText) {
alert("你选中的文本是：" + selectedText);
} else {
alert("你没有选中任何文本。");
}
}
</script>
</body>
</html>
需要注意的点：
getSelection()返回的是一个实时的 Selection 对象，这意味着如果你修改了 DOM，Selection 对象也会随之改变。- 在 iframe 中使用
getSelection()需要注意上下文，需要使用iframe.contentWindow.getSelection()获取 iframe 中的 Selection 对象。
希望这些信息能帮助你理解和使用 getSelection() API。