正则表达式捕获类HTML属性：含转义引号值的匹配问题

这确实是个容易踩坑的场景——HTML属性值里的转义引号总是会给正则匹配添乱，我来帮你调整正则，完美解决这个问题！

核心思路 #

要正确提取带转义引号的属性值，关键是区分转义的引号和闭合属性的引号：我们需要忽略被反斜杠\转义的引号，只把未转义的引号当作属性值的结束标记。

调整后的正则表达式 #

这里给出能处理转义引号的正则：

/(\w+)\s*=\s*(["'])(?:\\.|[^\\])*?\2/g

正则各部分解析：

• (\w+)：捕获属性名（匹配字母、数字、下划线，如果需要支持data-*这类带特殊字符的属性名，可以改成([^\s=]+)）
• \s*=\s*：匹配属性名和值之间的等号，允许前后有任意空格
• (["'])：捕获包裹属性值的引号（单引号或双引号），用分组\2后续引用，确保引号成对
• (?:\\.|[^\\])*?：非捕获组，匹配属性值内容：
  • \\.：匹配任意转义字符（比如\"、\'）
  • [^\\]：匹配非反斜杠的任意字符
  • *?：非贪婪匹配，确保遇到第一个未转义的引号就停止，避免把多个属性当成一个
• \2：匹配和开头相同的闭合引号，保证属性值的引号正确闭合

代码实现（JavaScript） #

下面是完整的提取逻辑，包含转义引号的还原：

// 示例输入字符串（注意JS里的转义，实际原始字符串是attr="val" attr2="val\"2a\" val2b"）
const attrString = 'attr="val" attr2="val\\"2a\\" val2b"';
const attrRegex = /(\w+)\s*=\s*(["'])(?:\\.|[^\\])*?\2/g;
const resultObj = {};

let match;
// 循环匹配所有属性
while ((match = attrRegex.exec(attrString)) !== null) {
  const [_, attrName, quoteType, attrValueRaw] = match;
  // 还原转义的引号：把\"或\'替换成"或'
  const decodedValue = attrValueRaw.replace(/\\(["'])/g, '$1');
  resultObj[attrName] = decodedValue;
}

console.log(resultObj);
// 输出：{ attr: 'val', attr2: 'val"2a" val2b' }

额外说明 #

• 这个正则同样支持单引号包裹的属性值，比如attr='val\'s example'会被正确提取为attr: "val's example"
• 如果需要处理其他转义字符（比如\n、\t），可以扩展replace的逻辑，比如：

const decodedValue = attrValueRaw.replace(/\\(["'nrt])/g, (_, char) => {
    switch(char) {
      case 'n': return '\n';
      case 'r': return '\r';
      case 't': return '\t';
      default: return char;
    }
});

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