用于突出显示段落中的搜索文本的简单 JS 代码

Question

我正在尝试重写这段代码以满足我的需求，但我迷失在小提琴的作者所做的所有替换魔法中。这是我修改的小提琴。

我的目标是找到段落中所有出现的"a"字母并突出显示它们。我只是想不通为什么我的信只是被1$取代而不是突出显示。谁能帮我解决这个问题？

.HTML

<div id="searchtext">
  <p>I want to highlight all "a" letters in this paragraph</p>
</div>

.JS

$(document).ready(function() {
      var text = 'a';
      var query = new RegExp(text, "gim");
      var e = document.getElementById("searchtext").innerHTML;
      var enew = e.replace(/(<span>|</span>)/igm, "");
      document.getElementById("searchtext").innerHTML = enew;
      var newe = enew.replace(query, "<span>1$</span>");
      document.getElementById("searchtext").innerHTML = newe;
    });

.CSS：

#searchtext span {
  background-color: #FF9;
  color: #555;
}

Answer 1

改用$&

$(document).ready(function() {
      var text = 'a';
      var query = new RegExp(text, "gim");
      var e = document.getElementById("searchtext").innerHTML;
      var enew = e.replace(/(<span>|</span>)/igm, "");
      document.getElementById("searchtext").innerHTML = enew;
      var newe = enew.replace(query, "<span>$&</span>");
      document.getElementById("searchtext").innerHTML = newe;
    });

#searchtext span {
  background-color: #FF9;
  color: #555;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="searchtext">
  <p>I want to highlight all "a" letters in this paragraph</p>
</div>

更多关于$&的信息