检测在文本中点击了哪个单词 [英] Detect which word has been clicked on within a text

问题描述

我正在构建一个JS脚本，它可以在给定的页面上允许用户单击任何单词并将该单词存储在变量中。

我有一个相当丑陋的解决方案，它涉及使用jQuery进行类解析：
我首先解析整个html，将每个空间上的所有内容拆分为 ，然后重新添加包裹在< span class =word>单词< / span> 中的所有内容，然后使用jQ添加事件以检测点击这样一个类，并使用$（this）.innerHTML我得到了点击的单词。

这在很多方面都很慢很丑，我希望有人知道另一种方式来实现这一点。

PS：我可能会考虑将它作为浏览器扩展运行，所以如果它不适合单纯的JS，并且您知道浏览器的API，这将允许，随时提及它！

一个可能的owrkaround将让用户突出显示单词而不是点击它，但我会reall只需点击一下就可以实现同样的功能！

解决方案

这是一个解决方案，跨越到文档（适用于Webkit和Mozilla以及IE9 +）：

http://jsfiddle.net/Vap7C/15/

 < p class =clickable >一些词< / p> 
 
 $（。clickable）。click（function（e）{
s = window.getSelection（）; 
 var range = s.getRangeAt（0）; 
 var node = s.anchorNode; 
 while（range.toString（）。indexOf（''）！= 0）{
 range.setStart（node，（range.startOffset  -  1））; 
} 
 range.setStart（node，range.startOffset + 1）; 
 do {
 range.setEnd（node，range.endOffset + 1）; 
 $ （）.string（）。indexOf（''）== -1&& amp; range.toString（）。trim（）！=''&& range.ndOffset< node.length ）; 
 var str = range.toString（）。trim（）; 
 alert（str）; 
}）; 
   
 
 
在IE8中，它由于getSelection而存在问题。此链路（是否有getSelection（）一个跨浏览器溶液<？ / a>）可能有助于解决这些问题。我还没有在Opera上进行测试。
 
 
 
我使用 http ：//jsfiddle.net/Vap7C/1/ 从一个类似的问题作为出发点。它使用了 Selection.modify 功能：
  s.modify（'extend'，'forward'，'word'）; 
 s.modify（'extend'，'backward'，'word'）; 
  
不幸的是，他们并不总是全盘接受这个词。作为解决方法，我为选择获得了范围，并添加了两个循环来查找单词边界。第一个人不断地给这个词添加字符，直到它到达一个空间。第二个循环到达单词的末尾，直到它到达一个空间。 
 
 
 
这也可以在单词结尾处抓住任何标点符号，因此如果需要的话，请确保您修剪掉。
 
I am building a JS script which at some point is able to, on a given page, allow the user to click on any word and store this word in a variable.

I have one solution which is pretty ugly and involves class-parsing using jQuery:
I first parse the entire html, split everything on each space " ", and re-append everything wrapped in a <span class="word">word</span>, and then I add an event with jQ to detect clicks on such a class, and using $(this).innerHTML I get the clicked word.

This is slow and ugly in so many ways and I was hoping that someone knows of another way to achieve this.

PS: I might consider running it as a browser extension, so if it doesn't sound possible with mere JS, and if you know a browser API that would allow that, feel free to mention it !

A possible owrkaround would be to get the user to highlight the word instead of clicking it, but I would really love to be able to achieve the same thing with only a click !
解决方案
Here's a solution that will work without adding tons of spans to the document (works on Webkit and Mozilla and IE9+):

http://jsfiddle.net/Vap7C/15/
<p class="clickable">some words</p>

$(".clickable").click(function(e) {
    s = window.getSelection();
    var range = s.getRangeAt(0);
    var node = s.anchorNode;
    while (range.toString().indexOf(' ') != 0) {
        range.setStart(node, (range.startOffset - 1));
    }
    range.setStart(node, range.startOffset + 1);
    do {
        range.setEnd(node, range.endOffset + 1);

    } while (range.toString().indexOf(' ') == -1 && range.toString().trim() != '' && range.endOffset < node.length);
    var str = range.toString().trim();
    alert(str);
});​
in IE8, it has problems because of getSelection. This link ( Is there a cross-browser solution for getSelection()? ) may help with those issues. I haven't tested on Opera.

I used http://jsfiddle.net/Vap7C/1/ from a similar question as a starting point. It used the Selection.modify function:
s.modify('extend','forward','word');
s.modify('extend','backward','word');
Unfortunately they don't always get the whole word. As a workaround, I got the Range for the selection and added two loops to find the word boundaries. The first one keeps adding characters to the word until it reaches a space. the second loop goes to the end of the word until it reaches a space. 

This will also grab any punctuation at the end of the word, so make sure you trim that out if you need to.

                        
这篇关于检测在文本中点击了哪个单词的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！