如何替换一段HTML中文本的数字

WXL570CN
  • 13

要求:

  1. 使用jQuery和正则HTML中(含不同程度嵌套标签)的文本内含有的数字批量替换为其他字符,如*号
  2. 不能替换标签中的数字
  3. 不能替换内联样式里的数字
  4. HTML代码为接口获取,所以不存在给含数字的标签添加相同类进行替换的可能

实现效果示例:

<div>
  ...
  <div>
    ...
    <span style="font-size=20px;">文本文本文本:1232</span>
    ...
  </div>
  <h1 style="font-size=18px;">文本文本文本:1232</h1>
  ...
</div>

替换为

<div>
  ...
  <div>
    ...
    <span style="font-size=18px;">文本文本文本:****</span>
    ...
  </div>
  <h1 style="font-size=18px;">文本文本文本:****</h1>
  ...
</div>
回复
阅读 653
3 个回答

替换基本只有那一种方式,获取节点文本,用字符串方法处理,重设回原节点。假设通过 getTextNodesIn 方法得到要替换的文本节点数组,则类似:

getTextNodesIn(document.body).forEach((textNode) => {
  textNode.textContent = textNode.textContent.replace(/\d/g, '*');
});

查找上述文本节点则至少有两种方式,一如自己写个递归,筛选出文本节点:

const getTextNodesIn = (ele) => {
  if (ele.nodeType === Node.TEXT_NODE) {
    return [ele];
  }
  return [...ele.childNodes].flatMap(getTextNodesIn);
};

二如用 NodeIteratorTreeWalker 直接遍历范围内的文本节点(NodeFilter.SHOW_TEXT):

const getTextNodesIn = (ele) => {
  const textNodes = [];
  const nodeIterator = document.createNodeIterator(ele, NodeFilter.SHOW_TEXT);
  let textNode;

  while (textNode = nodeIterator.nextNode()) {
    textNodes.push(textNode);
  }
  return textNodes;
};

image.png
https://developer.mozilla.org...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  
    $("*").contents().each(function (index, content) {
       if(content.nodeType === Node.TEXT_NODE){//TEXT_NODE=3
            content.nodeValue = content.nodeValue.replace(/\d/g,'*')
       }
    });
});
</script>
</head>
<body>
<div>
  ...
  <div>
    ...
    <span style="font-size=20px;">文本文本文本:1232</span>
    ...
  </div>
  <h1 style="font-size=18px;">文本文本文本:1232</h1>
  ...
</div>
</body>
</html>

给所有需要将字符串替换成数字的标签加一个class,比如

<div>
  ...
  <div>
    ...
    <span class="num2asterisk" style="font-size=18px;">文本文本文本:****</span>
    ...
  </div>
  <h1 class="num2asterisk" style="font-size=18px;">文本文本文本:****</h1>
  ...
</div>

然后用jquery获取到这些节点,循环处理就完了

$('.num2asterisk').forEach(()=>{...})
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏