jQuery Escaping Special Characters Fails

Question

I am trying to make a jQuery selector to select, by an arbitrary id, an html element. The ids may contains special characters that need to be escaped. An example is test_E///_AAAAA

I am basically doing exactly what is going on in this working fiddle (which uses v 1.11.0, where I am using v 1.11.3 and have also tested with 2.1.3)

However, in my scaled up environment, it doesn't work. I get Syntax error, unrecognized expression: #test_E\\/\\/\\/_AAAAA

There must be some obscure factoid about jQuery that is the difference between this working and not working. I, being a novice, have no hope of identifying it.

I notice that I am not alone though. A commentator on this thread had the same issue.

The code files are thousands of lines long, and I'm probably prohibited from posting more than a couple lines by my employer. I'm just looking for a hint, a clue, a shot in the dark about what would cause a perfectly reasonable selection string to be rejected.

"I'm just looking for a hint": don't use special characters in IDs... — freedomn-m, Aug 07 '15 at 23:14
the first clue would be that the element doesn't exist. but without any code, it will be tough to verify and answer. — WhiteHat, Aug 07 '15 at 23:16
freedomn-m. It is unavoidable. I need to have a unique and reference-able id for each DOM element, that is being populated dynamically from data. The only unique field in that data contains special characters (out of my control). WhiteHat, if a jQuery selector is not able to find a matching element, it doesn't give this error; it just has a selection size of 0. This error indicates that jQuery perceives a syntax error in the selector string. — ds390s, Aug 10 '15 at 14:29

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

1

The code in the fiddle doesn't work either. I have tried it in IE, Firefox and Chrome, and neither of them finds the element.

You need to escape a slash to use it in a # selector. If you use a backslash, you have to escape it twice, once to put it in a string, and once for the selector.

To match the id test\A you need the selector #test\\A which as a string is "#test\\\\A".

To match the id test/A you need the selector #test\/A which as a string is "#test\\/A".

To match the id test_E\\/\\/\\/_AAAAA you need the selector #test_E\\\\\/\\\\\/\\\\\/_AAAAA which as a string is "#test_E\\\\\\\\\\/\\\\\\\\\\/\\\\\\\\\\/_AAAAA".

Demo: https://jsfiddle.net/Guffa/463849xj/4/

Generally you should avoid unusual characters in an identity. Even if you can make it work, there is still a risk that some browser handles it differently.

Update:

The error message is shown with the selector unescaped, so as the error message shows the selector #test_E\\/\\/\\/_AAAAA it means that you actually use the string "#test_E\\\\/\\\\/\\\\/_AAAAA". That leaves the slashes unescaped, which causes the syntax error.

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 07 '15 at 23:29

Guffa

687,336
108
737
1,005

*"You can't use a slash in a # selector"*. Yes you can, you just need some more backslashes. – tom Aug 08 '15 at 00:00
@tom: Yes, you are right. Thanks. I corrected that. – Guffa Aug 08 '15 at 00:10
It looks like the fiddle was changed. I've forked it, fixed it, and updated the link. – ds390s Aug 10 '15 at 14:39
Apologies. Had a typo in the question. The id should have been `test_E\\\_AAAAA` – ds390s Aug 10 '15 at 14:42
@ds390s: Then you use the selector `"#test_E\\\\\\\\\\\\_AAAAA"`. – Guffa Aug 10 '15 at 15:20
ack. typo again `test_E///_AAAAA` which you would escape as `test_E\\/\\/\\/_AAA`, what I am currently using – ds390s Aug 12 '15 at 14:16
@ds390s: The error message tells us that you are not using the selector that you think. See my update above. – Guffa Aug 12 '15 at 15:54

tom · Accepted Answer · 2015-08-08T23:36:32.117

You just need enough backslashes :)

ID: The ID of the element is test_E\\/\\/\\/_AAAAA. Note that backslashes don't have any special meaning in HTML, so there really are six backslashes in the ID.

jQuery selector: Backslashes, forward slashes, and several other characters have special meaning in jQuery selectors, so we need to escape them with a backslash. The selector therefore needs to be #test_E\\\\\/\\\\\/\\\\\/_AAAAA. This tells jQuery to look for an element whose ID contains test_E, then two backslashes, then one forward slash, and so on.

JavaScript string literal: To represent that selector using a JavaScript string literal, each backslash needs to be escaped. So the string literal would be "#test_E\\\\\\\\\\/\\\\\\\\\\/\\\\\\\\\\/_AAAAA".

var selectionString = "#test_E\\\\\\\\\\/\\\\\\\\\\/\\\\\\\\\\/_AAAAA";
snippet.log("actual id: " + $("p")[0].id);
snippet.log("selection string given to jQuery: " + selectionString);
snippet.log("text: " + $(selectionString).text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<p id="test_E\\/\\/\\/_AAAAA">This is a test :)</p>

As you can see, this is extremely ugly, hard to understand, and hard to get right. I highly recommend avoiding such IDs. Another option is to use good old document.getElementById(), which only requires the string literal escapes:

$(document.getElementById('test_E\\\\/\\\\/\\\\/_AAAAA')).text()

jQuery Escaping Special Characters Fails

2 Answers2

Update: