When do I need to escape metacharectars? (jQuery Selectors)

Question

According to the jQuery docs, I need to escape metacharacters that occur in my selector strings, when they occur as a literal. However, I couldn't find very many specific examples of when and when not to escape selectors. So when and when don't I need to escape metacharacters, when they are to be interpreted as a literal, in:

Attribute selectors? ie

$("[attr=value]")

Id selectors? ie

$("#id")

Class selectors? ie

$(".class");

And, is there a way to write a function that replaces metachars in selector strings, while still preserving the beginning character? ie:

// replace all meta chars, preserving the id selection?
$("#id.rest$of*string")

// replace all meta chars, preserving the attribute selection?
// going back to my previous question, do I even need to escape the metachars in this situation?
$("[attr=blah.dee#foo*yay]")

The reason I ask this question, is because I'm working with a website that happens to have some really nasty selectors. And I don't have control over the website, so I can't go change the selectors to be nicer to work with.

THANKS!!

Answer 1

From the jQuery docs:

If you wish to use any of the meta-characters (#;&,.+*~':"!^$=>|/ ) as a literal part of a name, you must escape the character with two backslashes ...

All of these must be escaped:

1. id
2. class name
3. attribute name
4. attribute value
5. element name

The first four are obvious, and here's an example for the fifth. Element names in XML can contain a "." character for instance and still be valid.

<user.name>John Doe</user.name>

If you had to select all elements of user.name, then that . must be escaped

$(xml).find("user\\.name");

Answer 2

Rather than blatantly stealing someone else's answer, I'll point you to it: jQuery selector value escaping, where jQuery's selector parsing method is described in detail.

The short answer: you may be in trouble since jQuery's selector parser is not 100% standards-complaint. Per the suggestion in the linked answer, you may be able to workaround by calling the regular DOM methods (document.getElementById()), which will work with funny selectors, and then pass the raw DOM element to the jQuery selector.

$(document.getElementById("id.rest$of*string"));