需要转义jQuery选择器字符串中的特殊字符

Question

根据选择器文档,您必须[以双反斜杠等进行转义\\[.

我有一个像这样创建的选择器(假设val属性something[4][2]在这个例子中).

var val = $(this).attr('val');           

$select.find('option[value=' +  val + ']').show();

我可以写一个正则表达式来逃避括号吗？

Answer 1

如果你想要一些适用于任何价值的东西,试试这个:

var val = $(this).attr('val').replace(/[!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~]/g, "\\\\$&")

这是通过使用两个反斜杠转义jQuery文档的Selectors页面上列出的所有CSS元字符来实现的.

请记住,在您的情况下,没有必要像这样做一些棘手的事情.您可以使用过滤器函数选择具有给定值的所有选项元素,而不必转义该值,如Mathias Bynens的答案中所述.

Answer 2

CSS字符转义序列(在选择器中使用)很棘手.他们是如此棘手我甚至做了一个网络应用程序,可以告诉你如何逃避CSS中的任何角色.

简单地选择所有元素然后根据它们的属性值更简单,更有效:optionfiltervalue

var value = this.value;
$select.find('option').filter(function() {
  return this.value == value;
}).show();

这样,根本不需要特殊的转义.

Answer 3

迟到了，但是，

jQuery 3

添加缺失""的'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 和 jQuery.escapeSelector()

没有包装引号 - 所以使用你的原始选择器 '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>