Question

假设我有一个div：

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

我们假设此示例中的关键字是单词random。我怎么能把图像放在那个词的顶部？

换句话说，我必须找到带有JavaScript的div，然后使用正则表达式来查找关键字，然后将该关键字包装在一个span中，将img标记置于其中，并将其位置设置为absolute。

我想这里最困难的部分是使用span来扭曲关键字？

修改

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

Answer 1

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

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

然后，使用正则表达式将关键字替换为span wrapped 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，以便您可以将图像放在所有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));

});

将图片放在关键字的顶部

修改

2 个答案: