Question

Let’s say I have a div:

<div id="mainContent">some random text. bla bla bla.</div>

let’s say that the keword in this example is the word random. how could I place an image on top of that word?

In other words I will have to find that div with JavaScript then use a regular expression to find the keyword and then maybe wrap that keyword inside a span placing an img tag inside with it’s position set to absolute.

I guess the hardest part in this is warping the keyword with a span?

edit

moreover how could I place the image on the center of the word? do I have to wrap it on a table instead?

Answer 1

First, store the contents of the div with:

var x = document.getElementById('abc').innerHTML;

Then, use regex to replace the keyword with span wrapped version.

var keyword = "test";
x.replace(keyword, "<span>"+keyword+"</span>");

Then swap it back in;

document.getElementById('abc').innerHTML = x; 

I think using this would be better:

x.replace('\b'+ keyword +'\b', "<span>"+keyword+"</span>");

\b match a word boundary.