查找文档中的所有数字并设置样式

Question

我正在使用一个网站(个人),我正在使用JavaScript查找我的.html文件中的所有数字(实际上只是在#wrapper div中).我希望他们所有人都被涂上颜色.我的代码如下:

window.onload=function(){
    var str = document.getElementById("wrapper").innerHTML;

    var patt =/\d+/g;

    var res = str.match(patt);
    res = str.replace(patt, "<span class='em'>" + res + "</span>");

    document.getElementById("wrapper").innerHTML = res;

    window.alert(res)
};

这段代码的结果是每个数字都被一个字符串替换,该字符串包含一行中标记区域中的每一个数字,这显然不是我想要的.我甚至尝试使用for循环,但这也不起作用.

我感谢每一个帮助!

Answer 1

替换这些行:

var res = str.match(patt);
res = str.replace(patt, "<span class='em'>" + res + "</span>");

同

var res = str.replace(patt, "<span class='em'>$&</span>");

特殊令牌$&告诉replace在替换字符串中包含在该位置匹配的文本.(如果在某些时候你在你的正则表达式中使用捕获组,你也可以用$1[对于第一个],$2[对于第二个]等引用那些,等等.)

例:

var wrapper = document.getElementById("wrapper");
wrapper.innerHTML = wrapper.innerHTML.replace(/\d+/g, '<span class="em">$&</span>');

.em {
  color: red;
}

<div id="wrapper">This is the wrapper with numbers in it. Like 123. And 456.</div>

注意:如果在包装元素中的元素上有任何事件处理程序,则它们将通过替换innerHTML而被删除(因为旧元素被销毁并被替换为新元素).