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

How to find all numbers in document and style them?

本文关键字：数字 设置 样式 查找 文档 何查找      更新时间：2023-09-26

我目前正在一个网站（个人）上工作，在那里我使用JavaScript来查找.html文件中的所有数字（实际上只是在#wrapperdiv中）。我想把它们都染上颜色。

我的代码如下：

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循环，但也没用。

替换这些行：

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来删除（因为旧元素会被销毁并用新元素替换）。

我建议修改您的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()
相关文章：