Javascript 需要转义 jQuery 选择器字符串中的特殊字符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2786538/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Need to escape a special character in a jQuery selector string
提问by alex
According to the selectors docs, you must escape [with double backslash, etc \\[.
根据选择器文档，您必须[使用双反斜杠等进行转义\\[。
I have a selector that is created like so (assume valattribute is something[4][2]in this example).
我有一个像这样创建的选择器（假设val属性something[4][2]在这个例子中）。
var val = $(this).attr('val');
$select.find('option[value=' + val + ']').show();
Can I write a regex to escape the brackets for me?
我可以写一个正则表达式来为我转义括号吗？
回答by Elias Zamaria
If you want something that works with any sort of value, try this:
如果你想要一些具有任何价值的东西，试试这个：
var val = $(this).attr('val').replace(/[!"#$%&'()*+,.\/:;<=>?@[\\]^`{|}~]/g, "\\$&")
This works by escaping all CSS meta-characters listed on the Selectors page of the jQuery documentationwith two backslashes.
这是通过使用两个反斜杠转义jQuery 文档的Selectors 页面上列出的所有 CSS 元字符来实现的。
Keep in mind that in your situation, there is no need to do something tricky like this. You can use the filterfunction to select all option elements with a given value without having to escape the value, as described in Mathias Bynens's answer.
请记住，在您的情况下，没有必要做这样棘手的事情。您可以使用filter函数选择具有给定值的所有选项元素，而不必转义该值，如 Mathias Bynens 的回答中所述。
回答by Mathias Bynens
CSS character escape sequences (as used in selectors) are tricky. They're so tricky I even made a web app that can tell you how to escape any character in CSS.
CSS 字符转义序列（在选择器中使用）很棘手。它们非常棘手，我什至制作了一个网络应用程序，可以告诉您如何转义 CSS 中的任何字符。
It's much simpler andmore efficient to simply select all optionelements and then filterthem based on their valueattribute value:
简单地选择所有元素，然后根据它们的属性值选择它们要简单得多，效率也更高：optionfiltervalue
var value = this.value;
$select.find('option').filter(function() {
return this.value == value;
}).show();
That way, no special escaping is needed at all.
这样，根本不需要特殊的转义。
回答by alex
Check this out...
看一下这个...
var val = $(this).attr('val').replace(/(\[|\])/g, '\\'); // something\[4\]\[2\]
of course, this only handles the brackets, not any other of the special characters. However, in my experience, the brackets are the only ones I use (because of PHP's handy way of handling input name attributes like these: something[])
当然，这只处理括号，而不处理任何其他特殊字符。然而，在我的经验中，括号中是唯一我使用（因为PHP的处理输入名称的属性这样的简便方法：something[]）
回答by Roko C. Buljan
Late to answer but,
迟到了，但是，
jQuery 3
jQuery 3
and adding missing ""in 'option[value="'+ val +'"]'
并添加缺少""的'option[value="'+ val +'"]'
var val = "something[4][2]";
$("select").find('option[value="' + val + '"]').show();option{
display: none;
}<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<select>
<option value="something[4][2]">4,2</option>
<option value="something[1][1]">1,1</option>
</select>jQuery 3 and jQuery.escapeSelector()
jQuery 3 和 jQuery.escapeSelector()
without wrapping quotes - so using your original selector 'option[value='+ val +']'
没有包装引号 - 所以使用你的原始选择器 'option[value='+ val +']'
var val = "something[4][2]";
var eSel = $.escapeSelector( val ); // something\[4\]\[2\]
$("select").find('option[value='+ eSel +']').show();option{
display: none;
}<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<select>
<option value="something[4][2]">4,2</option>
<option value="something[1][1]">1,1</option>
</select>回答by theUtherSide
jQuery's FAQhas a nice solution for this that escapes all character that jQuery requires.
jQuery 的 FAQ有一个很好的解决方案，可以转义 jQuery 需要的所有字符。
I like this nullsafe version of what they suggest:
我喜欢他们建议的这个 nullsafe 版本：
function jqid (id) {
return (!id) ? null : '#' + id.replace(/(:|\.|\[|\]|,|=|@)/g, '\');
}
回答by Guffa
Put quotes around the attribute value in the selector, then you only have to escape backslashes and quotes in the value:
在选择器中的属性值周围加上引号，然后您只需转义值中的反斜杠和引号：
var val = $(this).attr('val');
val = val.replace(/\/g, "\\").replace(/"/g, '\"');
$select.find('option[value="' + val + '"]').show();
If you know that the value doesn't have any backslashes or quotes (like in your example), then you don't need to escape anything in the value, you only need the quotes in the selector.
如果您知道该值没有任何反斜杠或引号（如您的示例中所示），那么您不需要对值中的任何内容进行转义，您只需要选择器中的引号。
回答by Mehdi Benmoha
If the selector ends with the special char, you can't escape it using double backslashes. The work arround is to use regex : For example, if the selector id is "bonus+" then you can use:
如果选择器以特殊字符结尾，则不能使用双反斜杠对其进行转义。工作是使用正则表达式：例如，如果选择器 ID 是“bonus+”，那么您可以使用：
$("div[id$='bonus+']")
It makes more sense when you have dynamic selectors.
当您有动态选择器时，这更有意义。
