问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
WXL570CN
    281424

    要求：

    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>
    前端javascriptjquery正则表达式
    阅读 4k
    3 个回答
    得票最新
    头像
    华猾稽
      1.1k1924
      ✓ 已被采纳

      替换基本只有那一种方式，获取节点文本，用字符串方法处理，重设回原节点。假设通过 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);
};

      二如用 NodeIterator 或 TreeWalker 直接遍历范围内的文本节点（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;
};
      头像
      扬帆启航
        4.3k2721

        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>
        头像
        exponent
          77613

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

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

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

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