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

Question

根据the selectors docs，您必须使用双反斜杠等[转义\\[。

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

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

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

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

Answer 1

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

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

这是通过使用两个反斜杠转义Selectors page of the jQuery documentation上列出的所有CSS元字符来实现的。

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

Answer 2

CSS字符转义序列（在选择器中使用）是tricky。它们非常棘手我甚至做了a web app that can tell you how to escape any character in CSS。

只需选择所有option元素，然后根据filter属性值选择value元素，和就更简单了：

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

这样，根本不需要特殊的逃避。

Answer 3

检查出来......

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

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

Answer 4

迟到回答，但是，

jQuery 3

并在'option[value="'+ val +'"]'

中添加了遗失的var val = "something[4][2]"; $("select").find('option[value="' + val + '"]').show();

＆＃13;

＆＃13;

option{
  display: none;
}

＆＃13;

<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>

＆＃13;

'option[value='+ val +']'

＆＃13;

＆＃13;

＆＃13;

jQuery 3和jQuery.escapeSelector()

没有包装引号 - 所以使用原始选择器var val = "something[4][2]"; var eSel = $.escapeSelector( val ); // something\[4\]\[2\] $("select").find('option[value='+ eSel +']').show();

＆＃13;

＆＃13;

option{
  display: none;
}

＆＃13;

<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>

＆＃13;

class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: '',
      text: '',
      submitted: false,
      count: 1,
      arr: [
        {
          key: 1,
          text: "text1"
       },
     ],
   }

buttonsListArr = this.state.arr.map(info => {
  return (
  <View style={styles.container}>
    <Text key={info.key}>{info.text}</Text>
    <Button title='Touch' onPress={() => {
        this.setState({count: this.state.count + 1})
     }}/>
 </View> )
})

}

shouldComponentUpdate = () => {
    return true;
}

componentWillUpdate = () => {
    this.state.arr.push({key: this.state.count, text: 'text2'})
}

render() {

  return (
  <View style={styles.container}>
    {buttonsListArr}

  </View>

  )
 }
}

＆＃13;

＆＃13;

＆＃13;

Answer 5

jQuery's FAQ有一个很好的解决方案，它可以逃避jQuery所需的所有字符。

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

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

Answer 6

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

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

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

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

如果您知道该值没有任何反斜杠或引号（如您的示例中所示），那么您不需要转义值中的任何内容，您只需要选择器中的引号。

Answer 7

如果选择器以特殊字符结尾，则无法使用双反斜杠转义它。工作周围是使用正则表达式：例如，如果选择器ID为“bonus +”，那么您可以使用：

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

当你拥有动态选择器时更有意义。