当前位置：文江博客话题详情

JavaScript jQuery 正则表达式前端

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

发布于 2022-09-13 00:51:00 字数 722 浏览 19 评论 0

要求：

使用jQuery和正则将HTML中（含不同程度嵌套标签）的文本内含有的数字批量替换为其他字符，如*号
不能替换标签中的数字
不能替换内联样式里的数字
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>

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（3）

一身仙ぐ女味 2022-09-20 00:51:00

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

高跟鞋的旋律 2022-09-20 00:51:00

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>

蓦然回首 2022-09-20 00:51:00

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

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

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

$('.num2asterisk').forEach(()=>{...})

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

23 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

lorenzathorton8

文章 0 评论 0

Zero

文章 0 评论 0

萧瑟寒风

文章 0 评论 0

mylayout

文章 0 评论 0

tkewei

文章 0 评论 0

17818769742

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文