在Sizzle / jQuery中选择ID为冒号的元素

时间:2014-08-25 11:09:54

标签: jquery escaping colon sizzle

我有一个HTML,其中包含一些带有冒号的id的元素。例如,

<div id="i:have:colons">Get my selector!!</div>
<my:another:test> This time with tag names </my:another:test>

我想使用jQuery选择这些元素。以下是我的几次尝试和Jsbin Demo

function escape(id) {
  return id.replace( /(:|\.|\[|\])/g, '\\$1');
}

var id = "i:have:colons";

// Does not work
console.log($('#' + id).length);

// Works
console.log($("#i\\:have\\:colons").length);

var escapedId = escape(id);

// Q1. Why answer shows only 1 backslash while I used 2 in regex
console.log(escapedId); //'i\:have\:colons'

// Works
console.log($('#' + escapedId).length);

// Q2. Does not work while escapedId === 'i\:have\:colons'. How and why ?
console.log($('#' + 'i\:have\:colons').length);

编辑T.J答案后

var tag = 'my:another:test';

console.log('Testing tag name now----');

console.log($(tag).length);

var tag2 = tag.replace(/[:]/g, '\\\\:');

// Does not work with tagnames but this works with Id
console.log($(tag2).length);

var tag3 = tag.replace(/[:]/g, '\\:');

// Q3. Why does this work with tagnames but not with ids ?
console.log($(tag3).length);

我的问题在JS代码的注释中。

1 个答案:

答案 0 :(得分:4)

  

// Q1。当我在正则表达式中使用2时,为什么答案只显示1个反斜杠

因为您用作替代品的字符串中只有一个反斜杠,因为反斜杠在字符串文字中是特殊的。要在选择器中获得实际的反斜杠,您需要在字符串文字中使用\\。但是您的escape函数是正确的,因为您只需想要实际正则表达式中的一个。

  

// Q2。在escapedId === 'i\:have\:colons'期间不起作用。怎么样和为什么?

     

console.log($('#' + 'i\:have\:colons').length);

很多相同的原因,选择器中没有反斜杠。字符串文字中的\:只是:。你需要逃避反斜杠:

console.log($('#' + 'i\\:have\\:colons').length);

选择这些元素的选项:

  1. 使用id功能正确逃离escape值。

  2. 使用getElementById

    $(document.getElementById("i:have:colons"))
    
  3. 使用属性选择器:

    $('[id="i:have:colons"]')
    

    但这会慢一些(尽管其重要性很低),因为jQuery不会将其优化为getElementById调用。