使用 selectionStart 和 selectionEnd 管理 textarea 中的文本选择

在前端开发中，经常需要对文本框或文本域中的选定内容进行操作。这就需要使用到 selectionStart 和 selectionEnd 这两个属性了。本文将介绍这两个属性的用法和示例代码，并指导如何在实际开发中使用它们来管理文本选择。

selectionStart 和 selectionEnd 是什么？

在 HTML 中，文本框（<input type="text">）和文本域（<textarea>）都有 selectionStart 和 selectionEnd 这两个属性。它们分别表示当前选定文本的起始位置和结束位置，以字符为单位。

如何获取 selectionStart 和 selectionEnd 的值？

我们可以通过以下代码获取文本域（<textarea>）选中文本的起始位置和结束位置：

const textarea = document.querySelector('textarea');
const start = textarea.selectionStart;
const end = textarea.selectionEnd;

如何使用 selectionStart 和 selectionEnd 操作文本？

有了 selectionStart 和 selectionEnd，我们可以对文本域中的选定文本进行插入、替换、删除等操作。

插入文本

const textarea = document.querySelector('textarea');
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
const textToInsert = 'hello world';
textarea.value = textarea.value.substring(0, start) + textToInsert + textarea.value.substring(end);

上面的代码会在选定文本的起始位置插入一个字符串 'hello world'。

替换文本

const textarea = document.querySelector('textarea');
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
const textToReplace = 'hello world';
textarea.value = textarea.value.substring(0, start) + textToReplace + textarea.value.substring(end);

上面的代码会将选中的文本替换成字符串 'hello world'。

删除文本

const textarea = document.querySelector('textarea');
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
textarea.value = textarea.value.substring(0, start) + textarea.value.substring(end);

上面的代码会删除选中文本。

总结

本文介绍了如何使用 selectionStart 和 selectionEnd 属性来管理文本域中的选定内容。通过上述示例代码，我们可以实现插入、替换和删除文本等操作。在实际开发中，这些知识对于处理用户输入或实现富文本编辑器等功能都非常有用。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30923