如何通过JavaScript实现光标定位与文本选区操作？

本文共计5705个文字，预计阅读时间需要23分钟。

JavaScript中如何操作光标和选择区？

下面本章节为大家解读了Selection和Range对象，介绍了一下如何借助这两个对象来操作光标和选择区。

在一些业务场景中，比如高亮文本、输入编辑等，操作光标和选择区是非常实用的功能。下面我们来具体了解一下。

JavaScript中如何操作光标和选区？下面本篇文章带大家了解一下 Selection 对象和 Range 对象，介绍一下怎么借助这两个对象来操作光标和选区。

在一些业务场景，比如高亮文本、输入编辑、等场景中需要对光标和选区进行操作时，可以使用浏览器提供的 Selection 对象和 Range 对象来操作光标和选区。

Selection 对象

Selection 对象表示用户选择的选区或插入符号的当前位置，它可能横跨多个元素。

//获取 Selection 对象 window.getSelection();

用户可能从左到右（与文档方向相同）选择文本或从右到左（与文档方向相反）选择文本。

anchor （锚点）： 指用户开始选择的地方。
focus （焦点）： 指用户结束选择的地方。

如果你使用鼠标选择文本的话，anchor 就指你按下鼠标键的地方，而 focus 就指你松开鼠标键的地方。