简单的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>

关于$&的更多信息