Question

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

我希望能够在用户点击任何字词时执行某些操作。为了简单/概念，我只想alert()这个词。

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

我正在使用jQuery。

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的建议。

See it on jsFiddle

更新

那么，这会有效吗（例如，它不会冻结慢用户的浏览器吗？）另外，你能详细说明event.target是如何工作的吗？

它可能会很好地减慢30,000字的页面性能。我认为这是过度的，可能会受益于分页，但我不知道你的具体情况。

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

Answer 2

不幸的是，我认为你需要处理文字，并在每个单词周围添加<span class ='clickableWord'> YOUR_WORD </span>。

然后：

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

任何尝试使用绝对定位来定位单词的方法都会出现缩放，字体大小等问题。

这里已经解决了Getting text at clicked location in an HTML element

是否存在HTML doc静态或是否正在生成它？如果你正在生成它，那么在每个单词周围添加这些标签应该太难了。

如果你需要在事实之后对现有的HTML进行操作，那么这有点困难。选择包含大多数单词的元素（可能是div或p）并将这些单词读入数组。然后重新输出它们，然后是那些span标签

Answer 3

我参加派对的时间有点晚了。

试一试。

<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/

Answer 4

我没有通过代码来发布它是如何完成的，但事实上这是在这里完成的，没有在句子中插入任何额外的span或其他元素。

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

得到单词点击段落

4 个答案:

更新