使用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>