How to select html nodes by ID with jquery when the id contains a dot?

Question

If my html looked like this:

<td class="controlCell">
    <input class="inputText" id="SearchBag.CompanyName" name="SearchBag.CompanyName" type="text" value="" />
</td>

How could I select #SearchBag.CompanyName with JQuery? I can't get it to work and I fear it's the dot that's breaking it all. The annoying thing is that renaming all my id's would be a lot of work, not to mention the loss in readability.

Note:
Please let's not start talking about how tables are not made for lay-outing. I'm very aware of the value and shortcomings of CSS and try hard to use it as much as possible.

Answer 1

@Tomalak in comments:

since ID selectors must be preceded by a hash #, there should be no ambiguity here

“#id.class” is a valid selector that requires both an id and a separate class to match; it's valid and not always totally redundant.

The correct way to select a literal ‘.’ in CSS is to escape it: “#id\.moreid”. This used to cause trouble in some older browsers (in particular IE5.x), but all modern desktop browsers support it.

The same method does seem to work in jQuery 1.3.2, though I haven't tested it thoroughly; quickExpr doesn't pick it up, but the more involved selector parser seems to get it right:

$('#SearchBag\\.CompanyName');

Answer 2

One variant would be this:

$("input[id='SearchBag.CompanyName']")

Answer 3

You don't need to escape anything if you use document.getElementById:

$(document.getElementById('strange.id[]'))

getElementById assumes the input is just an id attribute, so the dot won't be interpreted as a class selector.

Answer 4

Short Answer: If you have an element with id="foo.bar", you can use the selector $("#foo\\.bar")

Longer Answer: This is part of the jquery documentation - section selectors which you can find here: http://api.jquery.com/category/selectors/

Your question is answered right at the beginning of the documentation:

If you wish to use any of the meta-characters ( such as 
!"#$%&'()*+,./:;?@[\]^`{|}~ ) 
as a literal part of a name, you must escape the character with 
two backslashes: \\. For example, if you have an element with id="foo.bar", 
you can use the selector $("#foo\\.bar"). The W3C CSS specification contains 
the complete set of rules regarding valid CSS selectors. Also useful is the 
blog entry by Mathias Bynens on CSS character escape sequences for identifiers.

Answer 5

attr selection seems to be appropriate when your ID is in a variable:

var id_you_want='foo.bar';
$('[id="' + id_you_want + '"]');

Answer 6

This is documented in the jQuery selectors API:

To use any of the meta-characters (such as !"#$%&'()*+,./:;<=>?@[\]^`{|}~) as a literal part of a name, it must be escaped with with two backslashes: \\. For example, an element with id="foo.bar", can use the selector $("#foo\\.bar").

In short, prefix the . with \\.

$('#SearchBag\\.CompanyName')

The problem is that . will match a class, so $('#SearchBag.CompanyName') would match <div id="SearchBag" class="CompanyName">. The escaped with \\. will be treated as a normal . with no special significance, matching the ID you desire.

This applies to all the characters !"#$%&'()*+,./:;<=>?@[\]^`{|}~ which would otherwise have special significance as a selector in jQuery.

Answer 7

Guys who's looking for more generic solution, I found one solution which inserts one backward slashes before any special characters, this resolves issues related to retrieving name & ID from a div which contains special characters.

"Str1.str2%str3".replace(/[^\w\s]/gi, '\\$&')

returns "Str1\\.str2\\%str3"

Hope this is useful !

Answer 8

You can use an attribute selector:

$("[id='SearchBag.CompanyName']");

Or you can specify element type:

$("input[id='SearchBag.CompanyName']");