本文介绍一种轻量、高效的方法，使用 JavaScript 正则表达式从 HTML 图片字符串中精准移除 title、class、height、width 等非必需属性，只保留核心的 src（及可选的 alt）属性，适用于批量清洗内联 HTML 片段场景。
本文介绍一种轻量、高效的方法，使用 javascript 正则表达式从 html 图片字符串中精准移除 `title`、`class`、`height`、`width` 等非必需属性，只保留核心的 `src`（及可选的 `alt`）属性，适用于批量清洗内联 html 片段场景。
在前端数据处理或 CMS 内容清洗中，常会遇到类似 <img class="img-fruit" src="apple.png" title="apple" style="max-width:90%" style="max-width:90%" alt="如何用正则表达式安全剥离 HTML 图片标签中的冗余属性，仅保留 src" > 这类含大量冗余属性的图片标签字符串。目标是保留语义关键属性（如 src 和可选的 alt），剔除展示或脚本相关属性（如 class、title、height、width、style、id 等），最终得到精简、语义清晰且符合无障碍基础要求的 <img src="apple.png" alt="apple">。
推荐使用正则表达式进行属性级清洗——它无需引入 DOM 解析器，轻量、可控、适合纯字符串场景。以下为优化后的通用方案：
function stripImageAttrs(htmlStr, keepAttrs = ['src', 'alt']) {
// 构建要移除的属性列表：所有属性名减去需保留的
const allAttrs = ['src', 'alt', 'title', 'class', 'id', 'style', 'width', 'height', 'loading', 'decoding', 'srcset', 'sizes'];
const removeAttrs = allAttrs.filter(attr => !keepAttrs.includes(attr));
// 构建正则：匹配空格 + 属性名 + = + 单/双引号包裹的值（支持转义引号内的内容）
const attrPattern = `(\s+(?:${removeAttrs.map(escapeRegExp).join('|')})\s*=\s*(['"])(?:[^\\'"]|\\.)*?\2)`;
return htmlStr.replace(new RegExp(attrPattern, 'gi'), '');
}
// 辅助函数：安全转义正则特殊字符
function escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[]\]/g, '\$&');
}
// 使用示例
const input = '<img class="img-fruit" src="apple.png" title="apple" style="max-width:90%" style="max-width:90%" alt="Red apple" style="border:1px solid #ccc;">';
const output = stripImageAttrs(input, ['src', 'alt']);
console.log(output); // <img src="apple.png" alt="Red apple">✅ 优势说明：
- 支持单/双引号属性值，兼容常见 HTML 变体；
- 自动跳过已保留属性（如
src和alt），避免误删； - 使用
[^\'"]|\.模式安全匹配带反斜杠转义的引号内容（如title="He said "Hi""）； - 可灵活扩展
keepAttrs参数，例如保留loading="lazy"时只需加入'loading'。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 此方法适用于结构良好、无嵌套或非法闭合的简单 HTML 字符串；若输入含严重 malformed HTML（如未闭合标签、注释干扰、CDATA 块等），建议改用 DOMParser（见补充方案）；
- 不处理自闭合标签外的其他 HTML 结构（如
<picture></picture>或<source></source>），仅聚焦<img alt="如何用正则表达式安全剥离 HTML 图片标签中的冗余属性，仅保留 src" >标签； - 生产环境若需 100% 安全解析，可结合 DOMParser 验证后再序列化：
const parser = new DOMParser(); const doc = parser.parseFromString(`<div>${htmlStr}</div>`, 'text/html'); const img = doc.querySelector('img'); if (img) { const cleaned = `<img ${['src', 'alt'].map(attr => img.hasAttribute(attr) ? `${attr}="${img.getAttribute(attr)}"` : '').filter(Boolean).join(' ')}>`; }
总结：正则方案简洁高效，适合大多数内容清洗任务；关键在于明确保留清单、严谨匹配引号边界，并在复杂场景中预留 DOM 回退路径。
