在前端开发中，有时我们需要获取用户选定的文本或者实现一些高亮显示的效果。在这篇文章中，我将介绍如何使用 JavaScript 和 CSS 实现这些功能。
获取选定文本
要获取用户选定的文本，我们可以使用 window.getSelection() 方法。该方法会返回一个 Selection 对象，它代表了当前页面上被选中的文本内容。
const selection = window.getSelection();
获取选中文本的字符串
要获取选中文本的字符串，我们可以调用 Selection 对象的 toString() 方法。
const selectedText = selection.toString(); console.log(selectedText);
获取选中文本所在的 DOM 元素
要获取选中文本所在的 DOM 元素，我们可以使用 Selection 对象的 anchorNode 和 focusNode 属性。这两个属性分别代表了选取文本的起始和结束节点。
const startNode = selection.anchorNode.parentElement; const endNode = selection.focusNode.parentElement; console.log(startNode, endNode);
高亮显示选中文本
要实现高亮显示选中文本的效果，我们可以使用 CSS 的 ::selection 伪类。该伪类可以选择用户选中的文本并对其应用样式。
::selection {
background-color: yellow;
}如果想要只对某个元素内部的选中文本进行高亮显示，可以使用 ::selection 伪类的子选择器。
div::selection {
background-color: yellow;
}示例代码
下面是一个完整的示例，演示了如何获取选中文本并对其进行高亮显示。
-- -------------------- ---- -------
-----
--------------
--------------
------
--------
------------------------------------ -- -- -
----- --------- - ----------------------
-- ------------------------ -
----- ----- - ------------------------
----- ------------ - -----------------
-----------------------
----- ---- - -------------------------------
-------------------------- - ---------
--------------------------------------------------------
-----------------------
------------------
-
---
---------
-------
----------- -
----------------- -------
-
--------在上述示例代码中，我们在 mouseup 事件监听器中获取用户选中的文本。如果选中文本不为空，则创建一个 <span> 元素，并将其背景色设置为黄色。然后将选中文本作为 <span> 的子节点，并将其插入到原来的位置。最后清空选中状态。同时，我们还使用 CSS 的 ::selection 伪类对选中文本进行了全局样式设置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8708