javascript - jQuery 属性等于选择器 [name=”value”] 传递以反斜杠结尾的变量时出现问题

Question

在这件事上对我开玩笑。

在我的代码中，我试图查找与数据属性值匹配的所有 div。现在这个值是由用户创建的，因此字符串可以包含任何内容。

在测试过程中，当值包含引号并以反斜杠“\”(JavaScript 转义字符)结尾时，我遇到了错误。

Error: Syntax error, unrecognized expression: className[data-attributename="Mac"Mac\"]

这是一个示例(请注意，在此示例中，双反斜杠转义自身，第一个反斜杠转义引号):

var value= "Mac\"Mac\\";
$('.className[data-attributename="'+value+'"]');

仅当字符串包含引号 (") 且字符串末尾有反斜杠 (\) 时，才会发生此错误。如果反斜杠后面有空格或者反斜杠位于字符串的开头或中间没有问题。

是否可以将包含引号或撇号 ("') 并以反斜杠 (\) 结尾的变量传递到 jQuery Attribute Equals Selector 中？

一个明显的解决方案就是阻止我的用户使用反斜杠“\”字符。如果我这样做，是否有任何其他字符可能对使用此 jQuery 选择器有害？

另一个解决方案是:

var value= "Mac\"Mac\\";
$('.className').each(function(){
    if($(this).attr('data-attributename') === value){
      //perform action
    }
});

使用此解决方案会不会效率较低，因为它必须迭代每个元素，或者属性等于选择器本质上的工作方式相同吗？如果是这样，为了安全起见，我应该始终使用此解决方案而不是属性等于选择器吗？

这是我尝试选择的 div 示例:

$('body').append("<div class='className' data-attributename='Mac\"Mac\\' ></div>")

Answer 1

您必须使用第二种解决方案才能使 jQuery 正常工作。 类似的问题也被问过，这是其中一个的答案。 jQuery selector value escaping

$("#SomeDropdown >option[value='a\\'b]<p>']")

But this doesn't work in jQuery because its selector parser is not completely standards-compliant. It uses this regex to parse the value part of an [attr=value] condition:

(['"]*)(.*?)\3|)\s*\]

\3 being the group containing the opening quotes, which weirdly are allowed to be multiple opening quotes, or no opening quotes at all. The .*? then can parse any character, including quotes until it hits the first ‘]’ character, ending the match. There is no provision for backslash-escaping CSS special characters, so you can't match an arbitrary string value in jQuery.