我正在构建一个 JS 脚本，该脚本在某个时刻能够在给定页面上允许用户单击任何单词并将该单词存储在变量中。
我有一个非常丑陋的解决方案，并且涉及使用 jQuery 进行类解析：
我首先解析整个 html，将所有内容拆分到每个空间上" "，并重新附加包含在 a 中的所有内容<span class="word">word</span>，然后我使用 jQ 添加一个事件来检测对此类的点击，并使用 $(this).innerHTML 获取点击的单词。
这在很多方面都是缓慢且丑陋的，我希望有人知道另一种方法来实现这一目标。
PS：我可能会考虑将其作为浏览器扩展来运行，所以如果这听起来仅用 JS 是不可能的，并且如果您知道允许这样做的浏览器 API，请随时提及！
一种可能的解决方法是让用户突出显示该单词而不是单击它，但我真的很希望只需单击一下即可实现相同的操作！
这是一个无需在文档中添加大量跨度的解决方案（适用于 Webkit、Mozilla 和 IE9+）：
https://jsfiddle.net/Vap7C/15/ https://jsfiddle.net/Vap7C/15/
$(".clickable").click(function(e){
s = window.getSelection();
var range = s.getRangeAt(0);
var node = s.anchorNode;
// Find starting point
while(range.toString().indexOf(' ') != 0) {
range.setStart(node,(range.startOffset -1));
}
range.setStart(node, range.startOffset +1);
// Find ending point
do{
range.setEnd(node,range.endOffset + 1);
}while(range.toString().indexOf(' ') == -1 && range.toString().trim() != '');
// Alert result
var str = range.toString().trim();
alert(str);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="clickable">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum ante nunc. Proin sit amet sem purus. Aliquam malesuada egestas metus, vel ornare purus sollicitudin at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porta turpis ut mi pharetra rhoncus. Ut accumsan, leo quis hendrerit luctus, purus nunc suscipit libero, sit amet lacinia turpis neque gravida sapien. Nulla facilisis neque sit amet lacus ornare consectetur non ac massa. In purus quam, imperdiet eget tempor eu, consectetur eget turpis. Curabitur mauris neque, venenatis a sollicitudin consectetur, hendrerit in arcu.
</p>
在IE8中，由于getSelection而出现问题。这个链接（getSelection() 是否有跨浏览器解决方案？ https://stackoverflow.com/questions/3076052/is-there-a-cross-browser-solution-for-getselection）可能有助于解决这些问题。我还没有在 Opera 上测试过。
I used https://jsfiddle.net/Vap7C/1/ https://jsfiddle.net/Vap7C/1/从一个类似的问题作为起点。它使用了选择.修改 https://developer.mozilla.org/en/DOM/Selection功能：
s.modify('extend','forward','word');
s.modify('extend','backward','word');
不幸的是，他们并不总能了解全部内容。作为解决方法，我得到了Range https://developer.mozilla.org/en/DOM/range用于选择并添加两个循环来查找单词边界。第一个不断向单词添加字符，直到到达空格为止。第二个循环转到单词的末尾，直到到达空格。
这也会捕获单词末尾的所有标点符号，因此请确保在需要时将其删除。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
