本文介绍一种简洁可靠的 JavaScript 方法，利用正则表达式批量清理 HTML 字符串中的 标签，自动移除 title、class、height、width 等冗余属性，只保留必需的 src（及可选的 alt）属性，适用于服务端预处理或前端动态内容净化场景。
本文介绍一种简洁可靠的 javascript 方法，利用正则表达式批量清理 html 字符串中的 `` 标签，自动移除 `title`、`class`、`height`、`width` 等冗余属性，只保留必需的 `src`（及可选的 `alt`）属性，适用于服务端预处理或前端动态内容净化场景。
在实际开发中，我们常需处理用户输入或 CMS 导出的 HTML 片段，其中 <img alt="如何使用正则表达式精简 HTML 图片标签，仅保留 src 属性" > 标签往往携带大量非必要属性（如 class="img-fruit"、title="apple"、 style="max-width:90%"），既增加体积，又可能引发样式冲突或无障碍访问问题。手动字符串截取易出错且难以维护；而完整 DOM 解析（如 DOMParser）虽健壮，但在无 DOM 环境（如 Node.js 后端）或轻量脚本中显得过重。
推荐使用精准正则匹配 + 全局替换策略，高效剥离指定属性：
function stripImgAttributes(htmlString, keepAttrs = ['src', 'alt']) {
// 构建要移除的属性列表（排除 keepAttrs 中的属性）
const removableAttrs = [
'title', 'class', 'id', 'style', 'height', 'width',
'loading', 'decoding', 'srcset', 'sizes', 'data-*'
].filter(attr => !keepAttrs.includes(attr.replace(/*$/, '')));
// 转义属性名并构建正则：匹配空格 + 属性名 + = + 单/双引号包裹的值
const attrPattern = removableAttrs
.map(attr =>
attr === 'data-*'
? `data-[^\s=]+`
: attr.replace(/[-[]{}()*+?.,^$|#s]/g, '\$&')
)
.join('|');
const regex = new RegExp(`\s+(?:${attrPattern})\s*=[\'"][^\'"]*[\'"]`, 'gi');
return htmlString.replace(regex, '');
}
// 示例用法
const input = '<img class="img-fruit" src="apple.png" title="apple" style="max-width:90%" style="max-width:90%" data-id="123" alt="如何使用正则表达式精简 HTML 图片标签，仅保留 src 属性" >';
console.log(stripImgAttributes(input));
// 输出：<img src="apple.png" alt="如何使用正则表达式精简 HTML 图片标签，仅保留 src 属性" >✅ 关键优势：
- 支持任意属性顺序与引号类型（单/双引号）；
- 可灵活配置保留字段（默认仅留
src，添加'alt'可保留替代文本）； -
data-*通配支持，避免逐个列举自定义属性； - 无依赖、零 DOM，兼容浏览器与 Node.js。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 正则不处理嵌套引号或未闭合标签等极端 HTML 错误（若源数据不可信，建议先用
DOMParser校验）； - 不修改
src值本身（如相对路径转绝对路径需额外逻辑）； - 若需保留
alt属性，请显式传入keepAttrs: ['src', 'alt']。
总结：对结构相对规范的 <img alt="如何使用正则表达式精简 HTML 图片标签，仅保留 src 属性" > 字符串，正则清洗是轻量、高效、可移植的最佳实践；当 HTML 复杂度升高（如含 SVG 内联、注释、CDATA 等），再升级至解析器方案。
