鼠标突出显示单词

Question

您是否知道突出单词并添加onmouseover事件的最有效方法？

我有文字，我想制作一些单词解释字段，所以当用户将光标放在单词上时，我将AJAX称为字典并显示其意义。

我有两个想法：1）在显示文本之前，将每个单词放到<span onmouseon="my_foo("word");"> wrapper。 例如：

<span onmouseon="my_foo("Hello");">Hello</span>
<span onmouseon="my_foo("world");">world</span>

但我认为这会严重超载页面。

2）当用户在一个区域内按住光标超过0.5秒时，我得到指针坐标，计算显示的单词（我不知道是否可能）并进行AJAX调用。

您认为更好，更容易编码的内容是什么？

Answer 1

首先突出光标下的单词然后显示它的含义，检查我的小提琴： http ： //jsfiddle.net/shahe_masoyan/z7nkU/1/

HTML

    <div>
        <span>This text is a test text</span>
    </div>

JavaScript的

$('div').each(function() {
    var $this = $(this);
    $this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
});

$('div span').hover(
    function() { 
        $(this).css('background-color','#ffff66'); 
        alert(getTheMeaningOfTheWord($(this).html()));
    },
    function() { 
        $(this).css('background-color',''); 
    }
);

function getTheMeaningOfTheWord(word){

    return word+' = theMeaning';
}

Answer 2

我认为1很简单，可以这样做：

小提琴： http ： //jsfiddle.net/9d227/

HTML

<div id="yourDiv" style="Display: none;">your Text Here</div>
<div id="yourActualDiv"></div>

JQuery的

var wordArray = $('#yourDiv').html().split(' ');
var totalString = "";
for(var i=0;i<wordArray.length;i++)
    totalString += "<span>" + wordArray[i] + " </span>";
$('#yourActualDiv').html(totalString);
var ConcurrenyFlag = 0;
$('#yourActualDiv span').mouseover(
    function()
    {
       if(ConcurrenyFlag == 0)
       {
           ConcurrenyFlag = 1;
           // Your code here.
           ConcurrenyFlag = 0;
       }
    }
)

这样，您只需将文本放在yourDiv 。 javascript代码将为您处理剩下的事情。
希望这对你有所帮助。

ConcurrenyFlag将有助于减少客户端的负载，因为一次只能运行一个代码部分。

Answer 3

这样的事情应该做一些接近你正在寻找的事情。

$('.addWordDictionary').html('<span>'+$('.addWordDictionary').html().replace(/ {1,}/g, '</span> <span>')+'</span>');

但是，正如你所说，它可能是客户密集型的，特别是如果有很多文本。

Answer 4

您可以使用Lettering.js来解决此问题

http://letteringjs.com/

简化示例：

http://jsfiddle.net/Zzxpx/

HTML：

<div class="w">"You will die of suffocation, in the icy cold of space"<div>

JS：

$(".w").lettering('words');

Answer 5

我做了这些东西： http ： //jsfiddle.net/wared/eAq9k/ 。 需要textarea并通过点击而不是悬停来工作。 有关getCaret()更多详细信息，请访问： https ： //stackoverflow.com/a/263796/1636522 。

<textarea readonly>Lorem ipsum</textarea>

textarea {
    display: block;
    width: 100%;
    border: none;
    resize: none;
    outline: none;
    margin: .5em 0;
}

$(function () {
    var el = $('textarea'),
        text = el.text();
    el.click(function () {
        var i = getCaret(this),
            w = getWord(text, i);
        $('p').text(i + ' : "' + w + '"');
    });

    // https://stackoverflow.com/a/995374/1636522

    el[0].style.height = '1px';
    el[0].style.height = 25 + el[0].scrollHeight + 'px';
});

function getWord(s, i) {
    var r = /\s/g;
    while (i && !r.test(s[--i])) {}
    r.lastIndex = i && ++i;
    return s.slice(i, (
        r.exec(s) || { index: s.length }
    ).index);
}