本文介绍一种轻量、高效的方法，利用正则表达式精准移除 标签中除 src 外的所有属性（如 class、title、height、width 等），适用于批量处理 HTML 字符串场景。
本文介绍一种轻量、高效的方法，利用正则表达式精准移除 `` 标签中除 `src` 外的所有属性（如 `class`、`title`、`height`、`width` 等），适用于批量处理 html 字符串场景。
在前端开发或服务端内容清洗中，我们常需从富文本或 CMS 输出的 HTML 片段中提取纯净的图片资源路径。例如原始字符串：
<img class="img-fruit" src="apple.png" title="apple" style="max-width:90%" style="max-width:90%" alt="A red apple">
目标是仅保留必需的 src 属性，输出标准化的精简标签：
<img src="apple.png" alt="如何使用正则表达式安全剥离 HTML 图片标签中的冗余属性，仅保留 src" >
虽然可借助 DOM 解析器（如 DOMParser）实现更稳健的处理，但在纯字符串场景（如 Node.js 环境无 DOM、模板预处理、日志清洗等）下，正则方案简洁可控。推荐使用以下 JavaScript 正则表达式：
function stripImgAttrs(htmlString) {
// 匹配所有非 src 的常见冗余属性（支持单/双引号，忽略大小写）
return htmlString.replace(
/(\s+(?:title|alt|class|id|style|height|width|loading|decoding|data-[^=]+|[^=\s]+="[^"]*")(?=[\s>]))/gi,
''
).replace(/\s+/g, ' ').trim(); // 清理多余空格
}
// 示例使用
const input = '<img class="img-fruit" src="apple.png" title="apple" style="max-width:90%" style="max-width:90%" alt="如何使用正则表达式安全剥离 HTML 图片标签中的冗余属性，仅保留 src" >';
console.log(stripImgAttrs(input)); // <img src="apple.png" alt="如何使用正则表达式安全剥离 HTML 图片标签中的冗余属性，仅保留 src" >✅ 关键设计说明：
立即学习“前端免费学习笔记（深入）”；
- 使用
\s+匹配前置空白，确保属性被完整移除； -
(?:...)非捕获组列举常见需剔除的属性名（可按需扩展，如添加loading或自定义data-*）； -
(?=[\s>])正向先行断言，确保匹配的是独立属性而非子字符串（避免误删src中的cr）； -
i标志支持属性名大小写混用（如CLASS或Src）； - 最后统一压缩空白字符，保证输出格式整洁。
⚠️ 注意事项：
- 此方案适用于结构良好、无嵌套引号或非法 HTML 的字符串；若输入含复杂转义（如
title="He said "Hi""）或未闭合标签，建议改用DOMParser进行解析清洗； - 不处理
<img src="..." alt="如何使用正则表达式安全剥离 HTML 图片标签中的冗余属性，仅保留 src" >后续可能存在的换行或注释；如需极致鲁棒性，可结合cheerio（Node.js）或DOMParser（浏览器）进行解析后再序列化； - 若需保留部分非
src属性（如alt），只需将其从正则中移除即可。
总之，正则方案在可控环境下快速有效；而对可靠性要求极高的生产系统，推荐优先采用基于真实 HTML 解析的方案——二者应根据实际约束权衡选用。
