Search body for a string matched by regexp and replace - regex

Question

I want search a div for a string like "12345" and then put every matched string into a span.
But when find repetitive string, just do it for first matched several time.
Here is a 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

Your approach is faulty: rather than extracting all matching substrings and later iterate them performing single replacements, you may use your own regex inside a String#replace method to modify the substrings "inline", "on-the-match" way:
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

My solution (fiddle here), with pure 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()