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

标签 javascript jquery google-chrome google-chrome-extension

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

最佳答案

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

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

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

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

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

关于javascript - 当鼠标悬停在单词上时获取单词,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13712885/

相关文章:

javascript - 如何按顺序执行watcher.on处理和其他监视任务?

javascript - 登录后 meteor 重新渲染登录表单

javascript - 如何在 Typescript 中推送数组数组中的元素

jquery - 切换类中的双重操作

javascript - 忽略 Chrome Dev Tools Pane 中的点击

google-chrome - Chrome 上的 IndexedDB 刷新到磁盘

javascript - 从 Ajax 查询中获取结果

jquery - $ ("#MyForm").submit(function () { 在 IE8 中不起作用,但在 FireFox 8 中不起作用?

javascript - Wordpress 中的滚动导航不起作用

javascript - 使用工作空间时在 chrome 开发工具中美化代码