搜索正文和regexp匹配的字符串并替换

Question

我想在div中搜索“12345”之类的字符串，然后将每个匹配的字符串放入一个范围内。 但是当找到重复的字符串时，只需先进行几次匹配即可。

这是jsfiddle：

function find(){
    var regex = new RegExp(/12345/g),
    list = $(".test").html().match(regex);
    console.log(list)
    for(each in list){
        replacement = $(".test").html().replace(list[each], "<span class='box'>"+list[each]+"</span>");
        $(".test").html(replacement);
    }
}

find();

.box{
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <p>
    12345 12345
  </p>
</div>

Answer 1

您的方法有问题：您可以在String#replace方法中使用自己的正则字符来修改子串“inline”，“on-the-match”，而不是提取所有匹配的子字符串，然后迭代它们执行单个替换。 “方式：

function find(){
	var regex = /12345/g;
	var replacement = $(".test").html().replace(regex, "<span class='box'>$&</span>");
	$(".test").html(replacement);
}
find();

.box{
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <p>
    12345 12345
  </p>
</div>

Answer 2

我的解决方案（fiddle here），纯JavaScript：

function find(){
    var motif = "12345"
    var regex = new RegExp(motif, "g")
    document.querySelector("div.test").innerHTML = document.querySelector("div.test").innerHTML.replace(regex, "<span class='box'>" + motif + "</span>") 
}

find()