jQuery属性选择器匹配JSON属性值时报unrecognized expression错误解决方法

两个错误直接导致选择器失效、抛出语法报错：

• HTML属性写法不合法：用双引号包裹属性值时，值内部的双引号未做实体转义，浏览器解析到exp_attribute="{"就判定属性结束，后续内容不会被算入属性值，DOM中实际拿到的属性值根本不是预期的JSON字符串。
• jQuery选择器语法不符合规范：jQuery底层用Sizzle引擎解析选择器，匹配含特殊字符（{}、"、:等）的属性值时，既没有给属性值加引号边界，转义逻辑也不符合引擎解析规则，多重反斜杠转义属于过度操作，反而会触发解析异常。

1. 先修正HTML结构 #

必须先保证DOM能读取到完整的属性值，静态写HTML时要把属性值内部的双引号转义为"实体：

<div exp_attribute="{&quot;prop_val_name&quot;:1}">mydiv</div>

如果是通过JS动态给元素设置属性，直接传字符串即可，不需要手动转义实体，DOM接口会自动处理编码：

// 动态设置属性的正确写法
$('div').attr('exp_attribute', JSON.stringify({prop_val_name:1}))

2. 选择元素触发事件，两种可用写法 #

写法1：合规的属性选择器 #

Sizzle引擎要求：含特殊字符的属性值必须用引号包裹，特殊字符需要双反斜杠转义（第一层转义JS字符串，第二层给选择器引擎识别）。最简洁的写法是用单引号包裹选择器字符串，避免和属性值里的双引号冲突，大括号、冒号在带引号的属性值边界内不需要额外转义：

$('div[exp_attribute=\'{"prop_val_name":1}\']').click();

不要尝试给大括号、冒号加反斜杠转义，这类字符在带引号的属性值选择器中属于合法内容，额外转义反而会报语法错误。

写法2：filter匹配（推荐，零转义成本） #

属性值格式复杂时不需要死磕转义规则，用filter方法自定义匹配逻辑，容错率最高，还支持灵活的条件判断：

// 精确匹配完整属性值
$('div').filter(function() {
  return $(this).attr('exp_attribute') === '{"prop_val_name":1}';
}).click();

// 如果属性是JSON格式，还可以解析后按字段匹配，不用写死完整字符串
$('div').filter(function() {
  try {
    const attrVal = JSON.parse($(this).attr('exp_attribute'));
    return attrVal.prop_val_name === 1;
  } catch (e) {
    return false;
  }
}).click();

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