如何使用 JavaScript 获取 Chrome 中光标下的单词？

在 JavaScript 中获取光标下的单词

在 Web 开发中，了解光标当前悬停在哪个单词上可能很有用。本文介绍了一个专门在 Chrome 浏览器中工作的 JavaScript 解决方案。

函数概述

函数 getWordAtPoint 接受三个参数：一个元素 (elem)、一个 x 坐标(x) 和 y 坐标 (y)。它使用 Range 对象来迭代 HTML 元素的文本内容，并确定指定坐标处光标下的单词。

实现

函数第一检查输入元素是否是文本节点。如果是这样，它会创建一个 Range 对象来选择元素的文本内容。然后，它使用循环逐步选择文本中的每个字符，并使用 getBoundingClientRect() 方法确定当前字符的边界矩形是否包含指定的坐标。如果找到匹配项，则使用 E​​xpand() 方法将 Range 对象扩展为包含整个单词。最后，该函数返回单词的字符串表示形式。

如果输入元素不是文本节点，该函数将递归迭代其子节点，直到找到包含指定坐标的文本节点。

用法

要使用此函数，您可以将其附加到所需 HTML 元素上的 mousemove 事件处理程序。例如：

<code class="javascript">document.addEventListener('mousemove', (e) => {
  const word = getWordAtPoint(e.target, e.x, e.y);
  console.log(word);
});</code>

每次用户将鼠标移动到指定元素上时，此代码都会将光标下的单词记录到控制台。

以上是如何使用 JavaScript 获取 Chrome 中光标下的单词？的详细内容。更多信息请关注PHP中文网其他相关文章！