用 replace() 加 /g 才能批量替换,否则只改首个匹配项;处理 html 应优先用 domparser 解析为节点树再操作,避免正则因上下文敏感性导致误替换或崩溃。

直接用 String.prototype.replace() 配合正则全局标志 g 就能批量替换,但必须注意 HTML 字符串是纯文本,不是 DOM 节点——别在未解析的 HTML 字符串里瞎用 innerHTML 或 document 相关 API。
为什么 replace() 加 /g 才算“批量”
不加 g 标志时,replace() 只换第一个匹配项;加了才遍历全部。HTML 内容常含多个相同标签或属性,漏掉 g 会导致只改一半。
"<div>abc</div> <div>def</div>".replace(/<div>/g, "<section>") → 正确替换两个 <code><div> <li><code>"<div>abc</div> <div>def</div>".replace(/<div>/, "<section>") → 只换第一个,第二个原样保留 <li>若目标含换行或空白(如 <code><img src="...">),记得用s标志(/.../gs)让.匹配换行符- 更安全的做法:锚定在标签内,用
/(\sclass\s*=\s*["'])(old)(["'])/g,只捕获引号内的值部分 - 替换时用
$1new$3,保留原有引号类型(单/双)和空格格式 - 如果属性值含转义或动态字符(如
class="old test"),正则会失效——这时该用 DOM 解析,而非字符串替换 const doc = new DOMParser().parseFromString(htmlStr, "text/html")- 之后可用
doc.querySelectorAll("img")遍历,再逐个改node.src或node.className - 最后用
doc.documentElement.innerHTML提取结果(注意:body.innerHTML可能丢 head 内容) - 缺点:比正则慢,且不能处理非法 HTML(如未闭合标签),会自动修复,导致原始结构偏移
替换 HTML 属性值时,正则容易误伤内容文本
比如想把所有 class="old" 换成 class="new",但直接写 /class="old"/g 会错杀 <p>class="old"</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter"><img
src="https://img.php.cn/upload/skill/000/000/081/179232667384043.jpg" alt="html-to-pptx-converter" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="overflowclass">html-to-pptx-converter</a>
<p class="overflowclass">使用 PptxGenJS 和 Python 解析,将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint(.pptx)演示文稿。</p>
</div>
<a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div> 这种普通文本。
用 DOMParser 替代正则,适合结构化修改
当替换逻辑依赖标签嵌套、属性存在性或需要保留下标顺序时,正则很快失控。这时候 DOMParser 是更稳的选择,它把 HTML 字符串转成真实节点树。
真正难的不是写对正则,而是判断该不该用正则——HTML 是上下文敏感语法,而正则没有嵌套理解能力。哪怕只是替换所有 <a href="..."></a>,一旦 href 值里含 或引号嵌套,就很容易崩。这种时候宁可多走一步 DOM 解析,也别赌正则能兜住。










