随着 Web 应用程序的发展，越来越多的网站需要实现基于文本选择区域的交互。例如，一些在线编辑器允许用户高亮某些段落、添加注释或下划线。为此，开发人员需要能够获取用户所选择文本的坐标信息。
在本文中，我们将介绍如何使用 JavaScript 和 DOM API 获取在浏览器中选择的文本坐标，并演示如何利用这些坐标创建用户交互。
如何获取选中文本的坐标
在 JavaScript 中，我们可以通过 Selection 对象来获取在浏览器中所选文本的信息。Selection 对象表示当前选中内容的范围，其中包含了起始和结束点在文档中的位置。
const selection = window.getSelection();
要获取选中文本的坐标信息，我们还需要使用另一个 DOM API：Range 对象。Range 对象表示文档中的一个连续范围，可以由其开始和结束节点来定义。
const range = selection.getRangeAt(0);
有了 Range 对象后，我们就可以获取选中文本的坐标。
const rects = range.getClientRects();
getClientRects() 方法会返回一个包含选中文本框的矩形区域列表。这些矩形区域是相对于浏览器视口的坐标，因此需要使用 window.scrollX 和 window.scrollY 属性来获取正确的坐标。
const firstRect = rects[0]; const x = firstRect.left + window.scrollX; const y = firstRect.top + window.scrollY; const width = firstRect.width; const height = firstRect.height;
现在，我们已经获得了选中文字的坐标信息。可以将这些信息用于创建交互式功能，如显示弹出菜单或提示框。
示例代码
下面是一个示例代码，它演示了如何获取选中文本的坐标并在选中文本旁边显示一个提示框。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
---------- --------- -------------------
-------
-------- -
--------- ---------
----------------- -----
------- --- ----- -----
-------- ----
----------- --- --- --- ------- -- -- -----
-
--------
-------
------
---
----- ----- ----- --- ----- ----------- ---------- ----- --- -----------
------ ------- ----- --- ---- --- ----- -------- -------- ---- -- -----
----- -------- ------ ----- ----- --------- - -------- ------ --------
----- --------- --- --------- --------- ----- --- -------- -----------
-------- ---- ------- ---- - ------ --------- ------- ------- --- -----
--- ---- --------- ---------- -- --- --------- ------ --------- -------
--- ----- -- ------ ------- --------- ------ ------- ----- - -----
-------- --- ------- ---- ----------- ------- ------- --------- ---- --
----------
----
--------
------------------------------------ ------- -- -
----- --------- - ----------------------
-- ------------------------ -
----- ----- - ------------------------
----- ----- - -----------------------
----- --------- - ---------
----- - - -------------- - ---------------
----- - - ------------- - ---------------
----- ------- - ------------------------------
---------------------------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------