如何取出大字符串中指定的小字符串?

Question

举个简单例子,代码如下:

<div>
    12345654321
</div>

我要实现一个查询功能, 比方说我要查询4, 就要给div中字符串中的每一个4加上span标签, 结果如下:

<div>
    123<span>4</span>565<span>4</span>321
</div>

我目前的思路如下:
我先获取div中的字符串 var str = document.getElementsByTagName("div")[0].innerHTML;
我试过str.indexOf("4")方法,结果只会返回第一个4的索引, 也就是5;
之后又试了str = str.replace(4,"<span>" + 4 + "</span>")
输出str的结果是123<span>4</span>5654321
也就是span只包裹了第一次出现的4,而后面的4没有包裹.请问怎么解决?

Answer 1

方法一

/**
 * @param target    123453423423
 * @param token     4
 */
function transform (target, token){
    return (target + '').split(token).map(item => `</span>${item}<span>`).join(token).slice("</span>".length, -"<span>".length);
}

方法二

function transform (target, token) {
    return (target + '').replace(new RegExp(token, 'g'), `<span>${token}</span>`);
}

Answer 2

var str = '12345654321';str = str.replace(/4/gi,"<span>" + 4 + "</span>")

用正则。