Выделите отдельное слово в текстовом блоке при наведении

В javascript/jQuery есть ли способ идентифицировать слово в текстовом блоке/параграфе? Например, скажем, у меня есть следующий абзац:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Маурис сузипит интердум фермент. Aenean fermentum imperdiet augue, et venenatis lectus semper vel. Phasellus faucibus nulla в quam egestas eleifend. Cras tristique augue eget libero tristique condimentum. Mauris eget diam eget risus feugiat rutrum. Duis placerat lorem quis augue semper porttitor. Nullam iaculis dui feugiat erat condimentum rutrum. Сед в капсан-диам. Maecenas ut urna id velit posuere auctor in vel dui. Aenean consectetur dui in leo faucibus sed feugiat dui blandit. В паксованском диам. Вите элет volutpat volutpat aliquam nunc euismod. Vivamus viverra lorem nulla. Quisque justo quam, adipiscing sit amet auctor non, laoreet sit amet nisl. Donec euismod lorem ac mi dictum volutpat. Donec ligula mi, varius ac auctor at, sollicitudin id elit. В auctor sodales ipsum nec consectetur. Sed lacinia varius nibh vitae вульгатная.

Если я наведите указатель мыши на первое слово "Lorem", я бы хотел, чтобы он стал полужирным (например). В принципе, мне нужен только текст, над которым курсор имеет свойство CSS, добавленное к нему при наведении курсора мыши, после чего его свойство CSS удаляется, когда курсор больше не находится над этим словом.

Единственный способ, которым я могу это сделать, - добавить тег <span> между каждым словом. Это единственный способ? Возможно ли более эффективный способ, или событие jQuery mouseover работает только в тегах? Может ли он работать с идентификационными текстовыми блоками?

Ответ 1

Это кажется хорошей задачей для http://letteringjs.com/

Вы можете настроить его для создания интервалов для вас при барьерах слова.

JSFiddle с вашим примером: http://jsfiddle.net/3HdKH/

Из их учебника: https://github.com/davatron5000/Lettering.js/wiki/Wrapping-words-with-lettering%28%27words%27%29

Использование:

$(document).ready(function() {
  $(".word_split").lettering('words');
});

Это

<p class="word_split">Don't break my heart.</p>

становится:

<p class="word_split">
  <span class="word1">Don't</span>
  <span class="word2">break</span>
  <span class="word3">my</span>
  <span class="word4">heart.</span>
</p>

Затем вы можете использовать следующий CSS:

.word_split span:hover {
    font-weight:bold;
}

Ответ 2

$("p:contains(Lorem)").each(function(){
  $(this).html($(this).text().replace(/(Lorem)/, '<span class="highlightWord">$1</span> '));
});

Это взято из здесь

Ответ 3

$('span').each(function(){
    $(this).html(
            $(this)
                .text()
                .split(' ')
                .map(function(x){return "<word>"+x+"</word>";})
                .join(' ')
       )
});
$('word').hover(function(){
        $(this).css(/*highlight*/);            
},function(){
        $(this).css(/*de-highlight*/);   
});

Ответ 4

Единственный способ, которым вы можете это сделать, - это пробелы (как вы описали). Javascript видит блок текста как один элемент, если его не сломал. Вы можете делать вещи только на элементах. Поскольку все текстовые потоки и дозаторы имеют позицию, вы не можете определить позицию отдельного слова, чтобы увидеть, когда она зависает. Если ваш текст не огромен, некоторые дополнительные промежуточные разрывы не должны быть большой проблемой для производительности.

Ответ 5

Это единственный способ, о котором я могу думать. Возможно, вы сможете что-то сделать, используя события мыши и местоположение мыши (попытайтесь выяснить, какое слово находится в этом месте), но это не было бы смешной задачей. Вероятно, вам нужно добавить несколько тегов вокруг слов для контрольных точек.

Если вы собираетесь разбить его на элементы, я бы предложил использовать тег с одним символом, например <p>.

Другим вариантом между соседями будет просто переполнение события в контейнере и только разбиение текста на подэлементы, если пользователь будет парировать. Что-то вроде:

$('#container').live('mouseenter',function(){
var jThis = $(this);
var text = jThis.text();
jThis.attr('original',text);
text = text.split(' ');
var out_text = '';
for(var nI = 0; nI < text.length; nI++){
out_text += "<p>"+text[nI]+"</p>";
}
jThis.html(out_text);
});
$('#container p').live('mouseenter',function(){
$(this).addClass('highlight');
});

Вам также нужно добавить события out.

Ответ 6

Здесь используется метод, который обменивает теги span вокруг всех слов в родительском элементе, чтобы они могли быть выделены при наведении:

const parentElement = document.getElementById('parent');

parentElement.onmouseover = e => {
  e.target.innerHTML = e.target.innerText.replace(/([\w]+)/g, '<span>$1</span>');
};

p#parent span:hover {
  background: yellow;
  cursor: pointer;
}

<p id="parent">One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What happened to me?" he thought. It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather. </p>