javascript - 当鼠标悬停在单词上时获取单词

Question

很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它， visit the help center 。

已关闭 10 年前。

我开发了 chrome 扩展，当鼠标悬停在任何网页上的单词上时，我需要获取该单词。我不想将所有单词放入特定容器，然后通过 id 获取它。例如，如果我有 <p>The weather is very good today</p>我想将鼠标悬停在“very”一词上并将其放入我的 js 中(例如 alert('very') )。

Answer 1

我想向您展示一个 proof of concept 此功能。这是非常幼稚和薄弱的，但表明使用适当的正则表达式是可能的。基本上，将鼠标悬停在绿色边框的 div 上即可查看结果。

通过这种方法，每个段落都通过正则表达式分割成跨区 block 。当然，正则表达式越强大，结果就越好。然后，onmousemove 冒泡，由跨度触发。读取跨度的内容是小菜一碟。

这种方法是非常侵入性的，它会修改 DOM 结构，你可能不想碰它。不过它可以在纯 JS 中运行。更高级(仍然简单)的方法如下:

1. 请勿触摸任何段落。
2. 观察onmousemove找到鼠标下的段落。
3. 保存clientX和clientY。
4. 复制该段落，使其透明并position:absolute。
5. 在副本上执行spanify()操作。
6. 使用document.elementFromPoint查找正在悬停的跨度。使用保存的 (3.) clientX 和 clientY 移动副本的位置(左、上)。
7. 你有这个跨度。您已获得其内容。
8. 从 DOM 中删除段落副本。

这个 hack 在纯 JS 中仍然有效。快乐编码! ;)