Words highlight when mouse is over

Question

I need some kind of help. How is it possible to highlight one word in my own paste text.

Like I have <textarea></textarea> , where I can paste text or just one sentence and when mouse is over one word it is being highlighted like here by Damovisa: http://jsfiddle.net/5gyRx/

<p>Each word will be wrapped in a span.</p>
<p>A second paragraph here.</p>
Word: <span id="word"></span>


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

// bind to each span
$('p span').hover(
    function() { $('#word').text($(this).css('background-color','#ffff66').text()); },
    function() { $('#word').text(''); $(this).css('background-color',''); }
);

Regards

Answer 1

You can't if you look at what he does you will see that he wraps every word in a span tag. And then does what ever you need to.

The only way you could do this is if you took it out of the textarea, and wrapped it in a span tag. Similar to how things like tagit works.

Answer 2

You won't be able to do it with a textarea because of HTML tags.

However, you can use a <div contenteditable="true"> to "simulate" a textarea.

HTML

<div contenteditable="true">Each word will be wrapped in a span.</div>
<div contenteditable="true">A second paragraph here.</div>
Word: <span id="word"></span>

JS

// wrap words in spans
$('div[contenteditable=true]').each(function() {
    var $this = $(this);
    $this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
});

// bind to each span
$('div[contenteditable=true] span').hover(
    function() { $('#word').text($(this).css('background-color','#ffff66').text()); },
    function() { $('#word').text(''); $(this).css('background-color',''); }
);

DEMO: JSFiddle

Answer 3

Man, you guys are fast !! - anyhow, as I made it ( was fun ) might as well share it

• yes Like Jonsuh answers well - here using contenteditable

DEMO: http://jsfiddle.net/P7S3Q/1/

Perhaps an addition here is picking up on being able to paste/change text .

HTML:

<div class="wordscontainer" contenteditable="true">
    Paste words here ...
</div>

<div id="word"></div>

JS

function setHover() {
/* we could do to unbind here before re binding */
$('.wordscontainer span').hover(
    function() { 
        $('#word').text($(this).css('background-color','#ffff66').text()); },
    function() { 
         $('#word').text(''); $(this).css('background-color',''); }
);
}

$(".wordscontainer").keyup(function() {

    var $this = $(this);
    $this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
    setHover();

});

SOME CSS used for display/demo

.wordscontainer { 
     padding:10px; margin:10px; 
     border:2px solid #999; min-height:400px;
 }
#word { padding:10px margin:10px; font-size:20px; }