本文介绍一种轻量、可靠的方法，使用 JavaScript 正则表达式批量清理 HTML 字符串中的 标签，自动移除 title、class、height、width 等冗余属性，只保留必需的 src（及可选的 alt）属性。
本文介绍一种轻量、可靠的方法，使用 javascript 正则表达式批量清理 html 字符串中的 `` 标签，自动移除 `title`、`class`、`height`、`width` 等冗余属性，只保留必需的 `src`（及可选的 `alt`）属性。
在前端开发或内容处理场景中，我们常需从富文本、CMS 输出或用户输入中提取纯净的图片资源路径。原始 HTML 图片标签往往携带大量非必要属性（如 class="lazy"、title="示意图"、height="120"），不仅增加体积，还可能干扰后续解析或 SSR 渲染。手动字符串截取易出错，而完整 DOM 解析（如 DOMParser）在无浏览器环境（如 Node.js 服务端）中不可用或开销过大。
此时，精准的正则替换是兼顾简洁性与兼容性的优选方案。以下为推荐实现：
function cleanImgSrc(htmlString) {
// 匹配所有 img 标签，并移除除 src 和 alt 外的任意属性（支持单/双引号、无引号值）
return htmlString.replace(
/@@##@@]*?)>/gi,
(match, attrs) => {
// 提取 src（必须存在）和可选的 alt
const srcMatch = attrs.match(/\bsrc\s*=\s*(['"])(.*?)\1/i);
const altMatch = attrs.match(/\balt\s*=\s*(['"])(.*?)\1/i);
const src = srcMatch ? `src="${srcMatch[2]}"` : '';
const alt = altMatch ? `alt="${altMatch[2]}"` : '';
return `@@##@@`;
}
);
}
// 示例使用
const input = '@@##@@';
console.log(cleanImgSrc(input));
// 输出：@@##@@
✅ 优势说明：
- ✅ 支持任意属性顺序与引号类型（
",'，甚至无引号值，可通过扩展正则增强）； - ✅ 严格保留
src（强制）、alt（语义友好，建议保留），其余一律剔除； - ✅ 不依赖 DOM API，可在浏览器或 Node.js 中直接运行；
- ✅ 单次正则遍历，性能高效，适合批量处理。
⚠️ 注意事项：
- 此方法适用于结构良好的 HTML 字符串；若输入含严重嵌套、未闭合标签或 JS 注入（如
<img>），应先做安全净化（如使用DOMPurify）； - 如需保留其他属性（如
loading="lazy"），只需在提取逻辑中增加对应匹配分支； - 避免在复杂 HTML 文档中全局应用——建议先用
/<img alt>]*?>/gi提取所有<img class="img-fruit" src="apple.png" title="apple" style="max-width:90%" style="max-width:90%" alt="红苹果">片段，再逐个清洗，防止误匹配。
总结：正则清洗是轻量级 HTML 属性裁剪的实用范式。掌握其核心逻辑（捕获标签 → 解析关键属性 → 重建最小化标签），即可灵活适配各类精简需求，兼顾效率与可控性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
