鼠标悬停时突出显示的单词答案

【问题标题】：Words highlight on mouse over鼠标悬停时突出显示的单词
【发布时间】：2023-03-23 12:20:02
【问题描述】：

你知道高亮单词和添加鼠标悬停事件的最有效方法吗？

我有文本，我想制作某种单词解释字段，所以当用户将光标放在单词上时，我调用 AJAX 到字典并显示他的意思。

我有两个想法： 1）在显示文本之前，将每个单词放入 wrapper。例如：

Hello
world

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

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

你认为什么更好，更容易编码？

【问题讨论】：

我不认为 2 是可能的，因为不同浏览器中字体渲染的差异。你永远不会确切地知道它是哪个词。我会在服务器端包装所有内容。或 onLoad 将所有内容包装在跨度中。悬停在该类的任何跨度上都会调用 ajax
2 是可能的。但是您将面临不同浏览器的问题。我确实以相同的方式实现了注释功能。这很艰难。对于 1，在事件函数定义中有更好的方法，您可以获取 span 的内部文本，因此您不需要将字符串放在每个调用中。
情况 1 的性能如何？还好吗？例如，我的意思是 5000 字的文本。

标签： javascript jquery html

【解决方案1】：

我做了这些东西：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);
}

【讨论】：

【解决方案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 将有助于减少客户端的负载，因为一次只能运行一个代码部分。

【讨论】：

【解决方案3】：

首先突出显示光标下的单词然后显示它的含义，检查我的小提琴：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';
}

【讨论】：

我是否需要刷新 DOM 或其他东西。我做了试验：一些 onmouseover 工作，但悬停不。
你不需要刷新任何东西，你运行小提琴了吗？
@Tigran 在小提琴中看到我的代码，我的 span 上没有任何 onmouseover 功能
在 iframe 中会起作用吗？我试过你的代码。我已经分开了跨度并给出了类名。所以我使用：$('word_in_text').hover()。可能是我做错了什么，但它会在 iframe 中工作吗？
$('word_in_text') 是无效的 jquery 选择器，你必须像这样放置 span 或元素的 id：$('#word_in_text')。你能给我看看你的代码吗？

【解决方案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');

【讨论】：

【解决方案5】：

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

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

但是，正如您所说，它可能需要大量客户端，尤其是在有大量文本的情况下。

【讨论】：