Выделите слова мышью над

Question

Знаете ли вы самый эффективный способ выделить слово и добавить событие onmouseover?

У меня есть текст, и я хочу сделать somekind из поля объяснения слов, поэтому, когда пользователь наводил курсор на слово, я вызываю AJAX в словарь и показываю ему смысл.

У меня есть две идеи: 1) Прежде чем показывать текст, поместите каждое слово в <span onmouseon="my_foo("word");"> обертку. Например:

<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 является простым и может быть сделано таким образом:

Fiddle: 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

Вы можете использовать Надпись.JS решить эту

http://letteringjs.com/

упрощенный пример:

http://jsfiddle.net/Zzxpx/

HTML:

JS:

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

Answer 5

Я сделал этот материал : http://jsfiddle.net/wared/eAq9k/. Требуется текстовое поле и работает, кликнув вместо зависания. Более подробная информация о 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); 
}