如何使用正则表达式安全剥离 HTML 图片标签中的冗余属性，仅保留 src-html教程-PHP中文网

本文介绍一种轻量、高效的方法，利用正则表达式精准移除标签中除 src 外的所有属性（如 class、title、height、width 等），适用于批量处理 HTML 字符串场景。

本文介绍一种轻量、高效的方法，利用正则表达式精准移除 `` 标签中除 `src` 外的所有属性（如 `class`、`title`、`height`、`width` 等），适用于批量处理 html 字符串场景。

在前端开发或服务端内容清洗中，我们常需从富文本或 CMS 输出的 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 = '@@##@@';
console.log(stripImgAttrs(input)); // @@##@@

✅ 关键设计说明：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

使用 \s+ 匹配前置空白，确保属性被完整移除；
(?:...) 非捕获组列举常见需剔除的属性名（可按需扩展，如添加 loading 或自定义 data-*）；
(?=[\s>]) 正向先行断言，确保匹配的是独立属性而非子字符串（避免误删 src 中的 cr）；
i 标志支持属性名大小写混用（如 CLASS 或 Src）；
最后统一压缩空白字符，保证输出格式整洁。

⚠️ 注意事项：

此方案适用于结构良好、无嵌套引号或非法 HTML 的字符串；若输入含复杂转义（如 title="He said "Hi""）或未闭合标签，建议改用 DOMParser 进行解析清洗；
不处理 <img class="img-fruit" src="apple.png" title="apple" style="max-width:90%" style="max-width:90%" alt="A red apple"> 后续可能存在的换行或注释；如需极致鲁棒性，可结合 cheerio（Node.js）或 DOMParser（浏览器）进行解析后再序列化；
若需保留部分非 src 属性（如 alt），只需将其从正则中移除即可。