Question

I have a problem with some experimental idea. Probably only the jQuery Gurus can help me here 🙂

I have a paragraph:

<p>Lorem Ipsum is simply dummy text of the printing 
and typesetting industry. Lorem Ipsum has been the 
industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and
scrambled it to make a type specimen book.</p>

And i need to convert all the words with at least 4 characters “on-the-fly” onMouseOver with the help of jQuery to links created from each word.

I don’t want to generate it in HTML (because of bandwidth, it will grow to megs), that code will look like:

<p>
<a href="/search?q=Lorem">Lorem</a> 
<a href="/search?q=Ipsum">Ipsum</a> 
is 
<a href="/search?q=simply">simply</a>
.........
</p>

I will appreciate also any text-decoration onMouseOver.

Answer 1

Try something like this:

$("p").on("hover", function(){
    var content = ​$("p").text();​​​​​
    var words = content.split(" ");
    var length = words.length;
    var newContent = [];

    for(var i = 0; i < length; i++){
        if(words[i].length >= 4){
          newContent.push("<a href='/search?q=simply'>" + words[i] +"</a>")
         }else{
           newContent.push(words[i])
         }
    }     
    $(this).text("");
    $(this).html(newContent.join(" "));              
});  

This will not, however, remove the a tags after you hover out and will run for every hover event. There are may fixes for both issues, but I will leave those to you to figure out.

EXAMPLE