javascript - Words highlight on mouse over - Stack Overflow

admin管理员组

文章数量:1350949

Do you know the most efficient way to highlight word and add onmouseover event?

I have text and I want to make somekind of word explanation field, so when user put his cursor on the word, I call AJAX to dictionary and show him meaning.

I have two ideas: 1) Before showing text, put each word to <span onmouseon="my_foo("word");"> wrapper. For example:

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

But I think this will seriously overload the page.

2) When user hold cursor for more than 0.5 sec in one area, I get pointer coordinates, calcuate what word is shown (I do not know if is possible) and do AJAX call.

What do you think is better, more easier to code?

Do you know the most efficient way to highlight word and add onmouseover event?

I have text and I want to make somekind of word explanation field, so when user put his cursor on the word, I call AJAX to dictionary and show him meaning.

I have two ideas: 1) Before showing text, put each word to <span onmouseon="my_foo("word");"> wrapper. For example:

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

But I think this will seriously overload the page.

2) When user hold cursor for more than 0.5 sec in one area, I get pointer coordinates, calcuate what word is shown (I do not know if is possible) and do AJAX call.

What do you think is better, more easier to code?

• javascript
• jquery
• html

Share Improve this question Follow edited Dec 13, 2013 at 12:41 Sergio 28.8k1111 gold badges8989 silver badges132132 bronze badges asked Dec 13, 2013 at 12:40 TigranTigran 1,05733 gold badges1515 silver badges3131 bronze badges 3

• I don't think 2 is possible because of differences between font rendering in different browsers. you would never know exactly which word it was. I would wrap everything either server side. or onLoad wrap everything in spans. On hover of any span with that class would ajax call – Adam Merrifield Commented Dec 13, 2013 at 12:43
• 1 2 is possible. But you will face issues for different browsers. I did implemented an annotation functionality same way. It was tough. for 1, there is a better way inside the event function definition you can get the inner text of the span so you do not need to put the string inside each call. – A Paul Commented Dec 13, 2013 at 12:45
• What about performance in case 1? Was it fine? I mean text of 5000 words, for example. – Tigran Commented Dec 13, 2013 at 12:49

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

First highlight the word under the cursor then show the meaning of it, check my fiddle: http://jsfiddle/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';
}

Something like this should do something close to what you're looking for.

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

But, as you said it may be client intensive especially if there is a lot of text.

You can use Lettering.js to solve this

http://letteringjs./

Simplified example:

http://jsfiddle/Zzxpx/

HTML:

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

JS:

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

I think 1 is simple and can be done this way:

Fiddle: http://jsfiddle/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;
       }
    }
)

This way, you only need to put your text in the yourDiv. The javascript code will handle the rest for you.
Hope this helps you.

The ConcurrenyFlag will help in reducing the load on client as only one code part will run at a time.

I've made this stuff : http://jsfiddle/wared/eAq9k/. Requires a textarea and works by clicking instead of hovering. More details about getCaret() here : https://stackoverflow./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./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);
}

本文标签： javascriptWords highlight on mouse overStack Overflow