上一篇
Firefoxjs文字选中怎么实现？，如何解决？
在 Firefox 浏览器中，通过 JavaScript 的 Selection API 可以获取和操作页面中用户选中的文字，该 API 以 window.getSelection() 为核心，返回一个 Selection 对象，代表当前选中的区域，Firefox 支持标准的 Selection API，并提供了丰富的属性和方法来处理选中内容。
获取选中文本
要获取用户选中的纯文本,使用 window.getSelection().toString()，该方法返回一个字符串，包含选中区域的所有文本内容，忽略 HTML 标签。
- 用户选中一段文字后,调用 getSelection().toString() 即可得到文本。
- 如果未选中任何内容,返回空字符串。
操作选中区域
Selection 对象包含 Range 对象，用于细粒度控制选中区域，常用操作包括：
- addRange(range)：向选中区域添加一个范围。
- removeAllRanges()：清除所有选中区域。
- getRangeAt(index)：获取指定索引的 Range 对象。
- collapse(node, offset)：将选中区域折叠到指定位置。
Range 对象提供更多方法，如 selectNode()、selectNodeContents()、deleteContents() 等，用于修改选中内容。
示例代码
以下是一个简单的示例,获取并显示选中文本：
document.addEventListener('mouseup', function() { const selectedText = window.getSelection().toString(); if (selectedText) { console.log('选中文字：', selectedText); } });
如需清除选中状态,使用：
window.getSelection().removeAllRanges();
属性与方法表格
| 属性/方法 | 描述 | 示例 |
|---|---|---|
| toString() | 返回选中文本 | getSelection().toString() |
| removeAllRanges() | 清除所有选中区域 | getSelection().removeAllRanges() |
| addRange(range) | 添加一个 Range 到选中 | getSelection().addRange(range) |
| getRangeAt(0) | 获取第一个 Range | getSelection().getRangeAt(0) |
| isCollapsed | 是否无选中区域 | getSelection().isCollapsed |
| anchorNode | 选中起始节点 | getSelection().anchorNode |
| focusNode | 选中结束节点 | getSelection().focusNode |
注意事项
- 在 Firefox 中，getSelection() 在非 contentWindow 上下文中可能返回 null，需确保在页面主窗口中使用。
- 使用 addRange() 时，需先创建 Range 对象，并确保节点在文档中。
- 选中操作可能受用户交互限制,如 document.execCommand 已废弃，推荐使用 Selection API。
相关问题与解答
问题1：如何在 Firefox 中检测用户是否选中了文字？
解答：使用 getSelection().isCollapsed 属性，如果返回 true，表示没有选中区域；如果返回 false，表示有选中文字。
if (!window.getSelection().isCollapsed) { console.log('用户选中了文字'); }
问题2：如何修改选中文字的内容？
解答：通过 Range 对象的 deleteContents() 和 insertNode() 方法，首先获取 Range，然后删除内容并插入新节点。
const range = window.getSelection().getRangeAt(0); range.deleteContents(); const newNode = document.createTextNode('替换文本'); range.insertNode(newNode);
