如何通过双击从网页中输入一个单词？

Question

我想要构建一个web应用程序，它需要从网页上双击一个单词作为输入。我知道这是可能的，因为我在Google扩展的E2B字典中看到了这种机制。本申请网站连结-

E2B字典

但是，我不知道他们是怎么做到的。我搜索了很多谷歌，但没有得到有用的信息。因此，具体来说，在JavaScript中是否有任何API或库函数可以做到这一点。如果在JavaScript中没有这样的库函数，那么他们如何才能做到呢？

Answer 1

此脚本使用window#getSelection和document#execCommand，并在chrome、firefox和edge中工作：

​

var demo = document.getElementById('demo');
var body = document.querySelector('body');

demo.addEventListener('dblclick', function(e) {
  var s = window.getSelection();
  var w = s.focusNode.data.substring(s.anchorOffset, s.focusOffset).trim();
  var inp = document.createElement('input');
  body.appendChild(inp)
  inp.value = w;
  inp.select();
  document.execCommand('copy', false);
  inp.remove();
});

<div id="demo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis mi et eleifend tristique. Fusce tincidunt interdum augue, vel tincidunt quam accumsan a. Aliquam erat volutpat. Nam congue urna in mauris varius posuere. Vivamus sit amet magna
  purus. Suspendisse convallis porttitor elit, quis ultricies enim consectetur id. Vestibulum justo ligula, mattis ut eleifend eu, varius egestas nisl. Donec porta eros sodales nunc mollis, vel hendrerit magna semper. Phasellus convallis bibendum turpis.
  Praesent nisl risus, dictum sed luctus id, aliquam laoreet libero. In ac auctor nibh. Pellentesque mattis, quam sit amet mollis tincidunt, est leo fermentum elit, eget pretium urna elit id metus. Sed id tellus id nisi venenatis dignissim.</div>

​

Answer 2

chrome扩展可以使用原始的网页内容(已经在浏览器中加载)并向其添加自己的功能(脚本/样式/修改dom)。在这种情况下，您可能需要将所有文本拆分成文字，并将它们包装成几个类似跨度的html标记，并附加单击事件，以显示一些工具提示。