如何通过双击将一个单词作为网页输入？

Question

我想构建一个Web应用程序，需要通过双击它来从网页上输入一个单词作为输入。 我知道这是可能的，因为我在Google Chrome扩展程序的E2B词典中看到了这种机制。 此应用程序网站链接 -

E2B字典

但是，我不知道他们是如何做到的。 我搜索谷歌很多但没有获得有用的信息。 所以，特别是在JavaScript中有任何API或库函数可以做到这一点。 如果JavaScript中没有这样的库函数那么他们怎么做呢？

Answer 1

这个脚本使用窗口#getSelection和文档#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）。 在这种情况下，您可能希望按单词拆分所有文本，并将它们包装到几个类似span的html标记中，并附带单击事件以显示一些工具提示。