在段落中获取单词点击

Question

我有一个包含大约30,000个单词的HTML文档。

当用户单击任何单词时，我想做一些事情。为了简化/概念，现在我只想使用 alert() 弹出那个单词。

例如，在上面的段落中，如果我点击“have”，它应该运行alert("have")。

我正在使用jQuery。

- Aaron Yodaiken

---

正如@Chintsu在我的答案下提到的那样，在我看来，这个答案提供了更好的解决方案，而不需要插入任何额外的元素https://dev59.com/XGsz5IYBdhLWcg3w8Mcb#9304990。 - dav

Answer 1

var p = $('p');

p
 .html(function(index, oldHtml) {
    return oldHtml.replace(/\b(\w+?)\b/g, '<span class="word">$1</span>')
 })
 .click(function(event) { alert(event.target.innerHTML) });

我考虑了Pablo Fernandez的建议。

在jsFiddle上查看。

更新

那么，这样做是否有良好的性能（例如，它不会使缓慢用户的浏览器冻结？）此外，你能详细解释一下event.target是如何工作的吗？

如果页面有30,000个单词，这种方法很可能会影响性能。我认为这太过于冗余了，可能需要分页处理，但具体情况需要视实际情况而定。

event.target属性保存了启动事件的元素 - 事件冒泡 / 传播到其父级，然后由其父级处理事件，因此您不必在单独的元素上处理30,000个事件。

- alex

---

这将创建三万个事件处理程序。不要这样做。 - Pablo Fernandez

@alex 是的，使用 event.target 属性。 - Pablo Fernandez

好的编辑，+1。 :) 你可能也可以使用jQuery Live来实现这个，但我不知道那样做的性能影响。 - Sasha Chedygov

可悲的想法，如果你有大量的HTML，你的页面将会被伪造掉.. 不推荐。 - Usman Younas

@UsmanY 我想我明白你想说什么。但是你可以尝试更好地组织你的观点，不要表现得像个混蛋。 - alex

Answer 2

我没有仔细查看代码，无法准确地说明它是如何完成的，但事实上它是在这里完成的，而不需要插入任何额外的span或其他元素到句子中。

http://www.wordreference.com/enit/something

- dav

---

显然它的工作原理就像这个答案中所解释的那样。 - sad comrade

@Chintsu，看起来好像是这样的。 - dav

Answer 3

很遗憾，我认为您需要处理文本并在每个单词周围放置<span class ='clickableWord'> YOUR_WORD </span>。

然后：

$(".clickableWord").click(
             function(this){alert(this.text());}
                         );

任何试图使用绝对定位来定位单词的方法都可能遇到缩放、字体大小等问题。

这里已经解决了在HTML元素中获取点击位置的文本。

HTML文档是静态的还是您正在生成它？如果您正在生成它，那么添加每个单词周围的标记不应该太难。

如果您需要在事后对现有的HTML进行操作，则会稍微麻烦一些。选择包含大部分单词的元素（可能是div或p），将这些单词读入数组中。然后重新输出它们，后跟这些span标记。

- jon_darkstar

Answer 4

看来我来晚了一点。

试试这个。

<div id="text"><!-- 文本 --></div>

init()

function init()
{
    addListeners();
    adjustText(document.getElementById("text"));   
}

function addListeners()
{
    document.body.onclick = clicked;   
}

function adjustText(holder)
{
    text = holder.innerHTML.split(" ");
    holder.innerHTML = "";
    for(var i=0;i<text.length;i++)
    {
        text[i] = text[i].replace("\n", "");
        var newText = document.createElement("span");
        var leadSpace = document.createTextNode(" ");
        var endSpace = document.createTextNode(" ");
        newText.innerHTML = text[i];
        holder.appendChild(leadSpace);
        holder.appendChild(newText);
        holder.appendChild(endSpace);
    }
}

function clicked(evt)
{
    if(evt.target.tagName == "SPAN" && evt.target.innerHTML)
    {
        alert(evt.target.innerHTML);
    }  
}

http://jsfiddle.net/AdwCA/2/

- user1385191