将图片放在关键字上方

Question

假设我有一个div：

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

假设本例中的词是random 。 我如何在该单词的顶部放置图片？

换句话说，我将不得不使用JavaScript查找div，然后使用正则表达式来找到关键字，然后将其包装在将img标记设置为绝对值的范围内。

我猜最难的部分是使关键字具有跨度吗？

编辑

此外，我如何将图像放在单词的中心？ 我必须将其包装在桌子上吗？

Answer 1

首先，使用以下命令存储div的内容：

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

然后，使用regex将关键字替换为span wrapd version。

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的ID。 该解决方案更具动态性，并使用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));

});