JavaScript中利用Range对象实现复杂的文本选择操作

张开发
• 2026/4/19 6:04:31 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

JavaScript中利用Range对象实现复杂的文本选择操作
Range 是 JavaScript 中精确控制文档文本选区的核心对象由起点和终点定义支持跨节点操作需结合 Selection 实现界面反馈。JavaScript 中的 Range 对象是精确控制文档中任意文本片段选择的核心工具比 selection API 更底层、更灵活适合实现高亮、富文本编辑、光标定位、跨节点选区等复杂场景。理解 Range 的基本构成Range 表示文档中连续的一段内容由起点startContainer / startOffset和终点endContainer / endOffset共同定义。起点和终点可以是文本节点、元素节点甚至跨不同父级——这是它能处理复杂结构的关键。创建方式主要有两种document.createRange()新建空 Range再用 setStart()、setEnd() 或 selectNode() 等方法设定范围 getSelection().getRangeAt(0)从当前用户选区中提取已存在的 Range需确保有选区常见实用操作示例以下操作均基于一个已创建并配置好的 range 实例 有道翻译AI助手 有道翻译提供即时免费的中文、英语、日语、韩语、法语、德语、俄语、西班牙语、葡萄牙语、越南语、印尼语、意大利语、荷兰语、泰语全文翻译、网页翻译、文档翻译、PDF翻

更多文章