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

Question

根据选择器文档，您必须使用双斜杠转义[，例如\\[。

我有一个像这样创建的选择器（在此示例中假设val属性为something [4] [2]）。

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

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

我能否编写一个正则表达式来转义括号？

- alex

---

为什么不使用jQuery的escapeSelector()方法？https://api.jquery.com/jQuery.escapeSelector/ - JoeChris

Answer 1

如果你想要适用于任何类型的值，请尝试这样做：

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

通过在所有列出在jQuery文档的选择器页面上的CSS元字符前加上两个反斜杠来实现此操作。

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

- Elias Zamaria

---

FYI，你的表达式缺少 @。 - Remi Despres-Smyth

我肯定当我写那个的时候，在选择器页面上没有看到 @，但是我在他们的文档存储库中找不到确切的添加时间。无论如何，我马上就要修复它。 - Elias Zamaria

如果我尝试启动$(myString)，它在我的情况下不起作用（返回“未捕获的错误：语法错误，无法识别的表达式：Test \#”） - Kirk Hammett

我有一个奇怪的行为：`> cs
< "#XMTM2NDQwNTI5Mg\=\=" = $7

$(cs)
< Error: Syntax error, unrecognized expression: #XMTM2NDQwNTI5Mg\=\=
$("#XMTM2NDQwNTI5Mg\=\=")
< m [<div id="XMTM2NDQwNTI5Mg==">] (1) = $10，然后我将变量更改为使用replace(/[!"#$%&'()*+,./:;<=>?@[\]^{|}~]/g, "\\$&")进行转义，使用变量作为选择器可以正常工作。

- danny

替换字符串“\\$&”在jQuery 1.10中无法正常工作。在这种情况下，应该使用“\$&”。 - Vincent Ripoll

Answer 2

CSS字符转义序列（在选择器中使用）很棘手，可以看这里。它们如此棘手，甚至我自己制作了一个Web应用程序，可以告诉您如何在CSS中转义任何字符。

更简单且更有效的方法是先选择所有option元素，然后根据它们的value属性值filter它们：

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

那样做，根本不需要特殊的转义。

- Mathias Bynens

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>

- Roko C. Buljan

Answer 4

看看这个...

var val = $(this).attr('val').replace(/(\[|\])/g, '\\\\$1'); // something\\[4\\]\\[2\\]

当然，这只处理括号，而不处理任何其他特殊字符。但是根据我的经验，括号是我唯一使用的符号（因为PHP很方便地处理这些输入名称属性：something[]）。

- alex

Answer 5

jQuery的常见问题解答提供了一个很好的解决方案，可以转义所有jQuery要求的字符。

我喜欢他们建议的这个nullsafe版本：

function jqid (id) {
  return (!id) ? null : '#' + id.replace(/(:|\.|\[|\]|,|=|@)/g, '\\$1');
}

- theUtherSide

Answer 6

在选择器中给属性值加上引号，然后只需转义值中的反斜杠和引号：

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

val = val.replace(/\\/g, "\\\\").replace(/"/g, '\\"');

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

如果您知道值中没有任何反斜杠或引号（就像在您的示例中一样），那么您不需要在值中转义任何内容，只需要在选择器中使用引号即可。

- Guffa

Answer 7

如果选择器以特殊字符结尾，您不能使用双反斜杠进行转义。解决方法是使用正则表达式：例如，如果选择器id为"bonus+"，则可以使用以下代码：

$("div[id$='bonus+']")

当你拥有动态选择器时，这将更加有意义。

- Mehdi Benmoha