本文介绍一种简洁可靠的 JavaScript 方法，利用正则表达式从 HTML 图片字符串中精准移除 title、class、height、width 等非必要属性，仅保留 src（及可选的 alt）等关键属性，适用于批量处理动态生成的 HTML 片段。
本文介绍一种简洁可靠的 javascript 方法，利用正则表达式从 html 图片字符串中精准移除 `title`、`class`、`height`、`width` 等非必要属性，仅保留 `src`（及可选的 `alt`）等关键属性，适用于批量处理动态生成的 html 片段。
在前端开发或内容清洗场景中，我们常遇到类似 <img class="img-fruit" src="apple.png" title="apple" style="max-width:90%" style="max-width:90%"> 这类含大量冗余属性的图片标签字符串。目标是保留语义必需属性（如 src 和推荐的 alt），剔除装饰性或布局性属性（如 class、title、height、width、style 等），最终得到精简、语义清晰且符合无障碍规范的 <img src="apple.png" alt="Apple">。
推荐使用正则表达式进行轻量级清洗（注意：不适用于完整 HTML 解析场景，但对单个 <img> 字符串高效可靠）：
function stripImageAttrs(htmlStr) {
// 匹配所有非 src/alt 的属性（支持单引号、双引号、无引号值，忽略大小写）
return htmlStr.replace(
/(\s+(?!src\b|alt\b)[\w-]+=\s*(?:"[^"]*"|'[^']*'|[^\s>]+))/gi,
''
).replace(/\s+/g, ' ').trim(); // 清理多余空格
}
// 示例使用
const input = '@@##@@';
console.log(stripImageAttrs(input));
// 输出：@@##@@
✅ 关键说明：
- 正则
/(?!src\b|alt\b)使用负向先行断言，确保src和alt属性不被误删； - 支持 HTML 属性值的三种常见格式：
attr="val"、attr='val'、attr=val； -
gi标志保证全局、不区分大小写的匹配； - 后续
.replace(/\s+/g, ' ')防止因删除中间属性导致多个连续空格。
⚠️ 注意事项：
- 此方法适用于已知为单个
<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">标签的字符串，不建议用于解析整页 HTML（应使用 DOMParser 或专用库如cheerio）； - 若需保留
alt（强烈推荐以满足可访问性），请确保其未被正则误排除；如需强制保留其他属性（如loading="lazy"），可扩展负向断言为(?!src\b|alt\b|loading\b)； - 避免在不可信的用户输入上直接执行，若涉及服务端处理，请结合 HTML 转义或沙箱环境。
总结：对于结构明确、目标单一的 HTML 片段清洗任务，正则表达式是简洁高效的首选方案——只需一行核心逻辑，即可实现属性精准“瘦身”，兼顾性能与可维护性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
