JQuery 1.7.1 seemingly can't handle HTML5 element IDs

Question

As you may be aware, HTML5 allows more characters to be used in ID names - see the HTML5 spec which now has space as the only invalid character. Attempting to use this with JQuery shows JQuery ignoring all characters in the ID after a particular valid character, '/'.

<section>
    <div id='foo/bar'>
        YAAY
    </div>
    <div id='foo'>
        BOO
    </div>
</section> ​

Logging the 'foo/bar' element

console.log(​$(document).find('div#foo/bar')​​​​)​

Shows the incorrect element being returned:

[
<div id=​"foo">​
    BOO
​</div>​
]

This is using both the current stable JQuery (1.7.1) and the current JQuery edge.

Is this a JQuery bug, or am I doing something wrong?

Answer 1

Escape the slash (demo: http://jsfiddle.net/m9NT8/):

console.log(​$(document).find('div#foo\\/bar')​​​​)​

PS. $(document).find('selector') is equivalent to $(selector).

This behaviour is defined in a RegEx at Sizzle's source code, line 374:

ID: /#((?:[\w\u00c0-\uFFFF\-]|\\.)+)/,