输入值含双引号导致页面崩溃，如何保留双引号规避jQuery选择器错误

• 动态拼接的jQuery选择器依赖原生CSS选择器语法，当传入的选项值带双引号时，会提前闭合value="的语法边界，最终拼出的选择器存在语法错误，直接导致jQuery匹配逻辑抛错、页面崩溃。
• 用replace移除双引号的方案虽然能消掉报错，但会丢失原本的选项内容，不符合展示要求。

方案1：使用jQuery内置的选择器转义方法 #

jQuery从1.12、3.0版本开始提供了专门的jQuery.escapeSelector()方法，用来处理选择器字符串中自带特殊字符的场景，转义过程不会修改原始值，完全不会影响页面的双引号展示。
直接在拼选择器前对选项值做转义即可，修改后代码：

if (variant) {
  var form = jQuery('#' + selector.domIdPrefix).closest('form');
  for (var i = 0, length = variant.options.length; i < length; i++) {
    // 仅对拼入选择器的内容做转义，保留原始值
    var escapedValue = jQuery.escapeSelector(variant.options[i]);
    var radioButton = form.find('.swatch[data-option-index="' + i + '"] :radio[value="' + escapedValue + '"]');
    if (radioButton.length) {
      radioButton.get(0).checked = true;
    }
  }
}

如果使用的是更老的jQuery版本，没有内置转义方法，可以手动替换内容里的特殊字符实现同样效果：

// 手动转义逻辑，匹配反斜杠、双引号两类会破坏选择器的字符
var escapedValue = variant.options[i].replace(/(["\\])/g, '\\$1');

方案2：完全规避选择器拼接（稳定性最高） #

不用硬把值拼进CSS选择器里，先拿到对应选项组的所有单选框元素，再在JS层面做值比对匹配，从根本上避开选择器语法的限制，不管选项值带什么特殊字符都不会出错：

if (variant) {
  var form = jQuery('#' + selector.domIdPrefix).closest('form');
  for (var i = 0, length = variant.options.length; i < length; i++) {
    var targetValue = variant.options[i];
    // 先定位到对应索引的所有单选框，再过滤出值完全匹配的元素
    var radioButton = form.find('.swatch[data-option-index="' + i + '"] :radio')
      .filter(function() {
        return this.value === targetValue;
      });
    if (radioButton.length) {
      radioButton.get(0).checked = true;
    }
  }
}

• 以上所有处理都仅在匹配元素的环节做语法适配，不会修改variant.options[i]的原始值，页面正常展示带双引号的“10" x 15”类选项完全不受影响。
• 不推荐仅通过删除双引号的方式消错，后续如果选项值带方括号、井号、点号这类CSS选择器特殊字符，还是会复现页面崩溃的问题。

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