如何用正则表达式匹配含特殊字符的HTML img标签？

问题分析 #

你原先使用的正则/<\s*(img)[^>]+(&gt;[\r|\n|\s]*&lt;\/\1&gt;|\/?&gt;)/失效的核心原因是：[^>]+会在遇到属性值里的第一个>就停止匹配，导致无法完整捕获整个img标签。比如在src="test>test"中，正则会在test>处截断，无法包含后续的test"及其他属性内容。

解决方案 #

使用能区分引号内/外内容的正则表达式，忽略引号内部的>，只匹配不在引号中的标签闭合>：

var str = '<img src="test>test" alt="test > test test" > "some text';
var reg = /<\s*img\s+(?:[^>"']|"[^"]*"|'[^']*')*\/?>/gi;

// 验证匹配结果
const match = str.match(reg);
console.log(match[0] === '<img src="test>test" alt="test > test test" >'); // 返回true

正则规则说明 #

• <\s*img\s+：匹配<img开头，允许标签名前后存在任意空白字符
• (?:[^>"']|"[^"]*"|'[^']*')*：非捕获分组，循环匹配三类内容：
  • [^>"']：匹配既不是引号也不是>的普通字符
  • "[^"]*"：匹配双引号包裹的完整内容（内部可包含任意字符，包括>），直到遇到闭合双引号
  • '[^']*'：匹配单引号包裹的完整内容，逻辑与双引号一致
• \/?>：匹配标签的闭合符号，同时支持自闭合的/>和普通闭合的>

额外提示 #

这个正则能覆盖绝大多数常见的img标签场景，但HTML语法存在诸多复杂情况（比如无引号属性、嵌套注释等极端案例），如果是处理生产环境的复杂HTML，更推荐使用DOM API（例如创建临时div元素插入HTML后删除img标签），避免正则的局限性。

内容的提问来源于stack exchange，提问作者Liang