如何通过JavaScript精确控制网页中的光标位置和文本选区？

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

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

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

在处理一些业务场景，例如高亮文本、输入编辑等，经常需要操作光标和选区。下面介绍如何使用Selection和Range对象来操作光标和选区。

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

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

Selection 对象

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

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

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

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

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