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}} [对于第一个]，$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>来删除它们（因为旧元素已被销毁并被替换为新元素）

Answer 2

我建议您修改replace()：

window.onload = function() {
  var str = document.getElementById("wrapper").innerHTML;

  var patt = /(\d+)/g;

  var res = str.replace(patt, "<span class='em'>$1</span>");

  document.getElementById("wrapper").innerHTML = res;
};

span.em {
  color: #f90;
}

<div id="wrapper"><p>12345</p><p>12345</p></div>

"<span class='em'>$1</span>"将正则表达式的（第一个）匹配部分插入到替换字符串中。

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

参考文献：

String.prototype.replace()。

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

2 个答案: