在前端开发中，我们经常需要对用户选中的文本做出相应的处理。JavaScript提供了一些事件触发器来帮助我们实现这个功能。
选定文本事件
当用户在浏览器中选中文本时，会触发以下三个事件之一：
selectstart: 当用户开始选择文本时触发。selectionchange: 当文本选择发生变化时触发。selectend: 当用户完成文本选择时触发。
这些事件都是在document对象上触发的。如果你想监听其中一个事件，可以使用以下代码：
-- -------------------- ---- ------- ---------------------------------------- -------- ------- - ------------------- --------- --- -------------------------------------------- -------- ------- - ---------------------- ----------- --- -------------------------------------- -------- ------- - ------------------- ------- ---
获取选中文本
通过选定文本事件，我们可以获取用户选中的文本。在selectionchange事件中，可以通过window.getSelection()方法获取当前选中的文本。例如：
document.addEventListener('selectionchange', function (event) {
var selection = window.getSelection().toString();
console.log('Selected text:', selection);
});修改选中文本
除了获取选中的文本，我们还可以修改它。首先，我们需要获取选中的文本所在的DOM节点。在selectionchange事件中，可以通过window.getSelection()方法获取当前选中的文本节点。例如：
-- -------------------- ---- -------
-------------------------------------------- -------- ------- -
--- --------- - ----------------------
-- --------------------- - -- -
--- ----- - ------------------------
--- ---- - ------------------------------
-- --------
-----------------------
--------------------------------------------- --------
-- ---------------
----------------------------
--------------------------
-
---这里，我们首先获取了选中的文本节点，并通过range.deleteContents()方法删除选中的文本。接着，我们使用range.insertNode()方法插入新的文本。最后，我们将光标移动到修改后的文本末尾。
结论
JavaScript中的选定文本事件触发器可以帮助我们监听用户选中文本的行为，并对选中的文本进行修改。通过学习这些事件并应用它们，我们可以实现更加灵活和交互性的前端页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14490