使用JavaScript在跨多个div标签的网页中搜索文本

Question

我正在构建一个扩展程序，该扩展程序将在网页中搜索特定文本并在文本后插入一张小照片。 如果文本包含在div标签中，则这些操作似乎很简单。 只需使用以下内容：

:contains(text)

但是，如果文本跨越多个div标签，那么我对如何进行操作感到有些困惑……也许我可以迭代搜索？

Answer 1

尝试

var text = "def"
, img = "<img src=imageurl />";
$("div:contains("+ text +")")
.html(function(_, o) {
    return o.replace(new RegExp(text, "i"), text + img)
})

 var text = "def" , img = "<img src=http://lorempixel.com/20/20/>"; $("div:contains("+ text +")") .html(function(i, o) { return o.replace(new RegExp(text, "i"), text + img) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div>abc</div> <div>abc</div> <div>def</div> <div>abc</div> <div>def</div> 

Answer 2

如果您使用的是jQuery，则可以检查found元素的子元素，例如：

var $div = $("div:contains(text)");
while (true) {
  var $children = $div.children("div:contains(text)");
  if ($children != []) {
    $div = $children;
  } else {
    break;
  }
}
$div.append( // insert your image here

---

更新：您也可以用<span>My text</span>替换My text （即使用正则表达式或whatsover）

接着

<style>
    span::after {
        display: inline;
        content: '';
        width: 32px;
        height: 32px;
        background: url("myimage.png");
    }
</span>