Поместите изображение поверх ключевых слов

Question

Допустим, у меня есть div:

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

допустим, что в этом примере слово keword является словом random как я могу поместить изображение поверх этого слова?

Другими словами, мне нужно будет найти этот div с JavaScript, затем использовать регулярное выражение для поиска ключевого слова, а затем, возможно, обернуть это ключевое слово внутри диапазона, поместив тег img внутрь с его позицией, установленной на абсолютное значение.

Полагаю, самое сложное в этом - деформация ключевого слова с пролетом?

редактировать

Более того, как я могу поместить изображение в центр слова? я должен вместо этого обернуть это на столе?

Answer 1

Во-первых, сохраните содержимое div с помощью:

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

Затем используйте регулярное выражение для замены ключевого слова на версию с переносом.

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

Затем поменяйте его обратно;

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

Я думаю, лучше использовать это:

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

\ b соответствует границе слова.

Answer 2

Для ответа, который вы приняли, вы должны знать идентификатор div, в котором есть ключевое слово. Это решение немного более динамично и использует jquery, чтобы найти все div с вашим ключевым словом, чтобы вы могли разместить изображения на всех них.

JSFIDDLE

var keyword = "random";
var found = $('div:contains("' + keyword +'")');

$.each(found, function(){
    var wrapper = '<span class="whatever">' + keyword + '</span>';
    var oldHtml = $(this).html();

    $(this).html(oldHtml.replace(keyword, wrapper));

});