JQuery search by ID if ID has a quotation mark

Question

I'm trying to look for a certain html element by its ID, which has a quotation mark in it. When the script looks for the element it throws this error:

Uncaught Error: Syntax error, unrecognized expression: #Bel'Veth

In advance, I can't use another variable name.

Here's my JavaScript code:

c = "Bel'Veth"
$("#"+c).addClass("selected");

My HTML:

<div id="Bel'Veth">Bel'veth</div>

I already tried using c = c.replace("'", "\'") and c = c.replace("'", "\\'"), it results in the following errors:

Uncaught Error: Syntax error, unrecognized expression: #Bel'Veth

Uncaught Error: Syntax error, unrecognized expression: #Bel\\'Veth

https://stackoverflow.com/questions/2786538/need-to-escape-a-special-character-in-a-jquery-selector-string — epascarello, Aug 15 '23 at 02:41

score 0 · Answer 1 · answered Aug 15 '23 at 02:16

The replacement certainly works (for example in jQuery 1.12.4):

c = "Bel'Veth"
c = c.replace("'", "\\'")
$("#"+c).addClass("selected");

.selected{
  font-weight: bold; 
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<span id="Bel'Veth">Your element</span>

The error message Syntax error, unrecognized expression: #Bel\\'Veth happens if you replace it twice:

try{
  c = "Bel'Veth"
  c = c.replace("'", "\\'")
  c = c.replace("'", "\\'")
  $("#"+c).addClass("selected");
}catch(e){
  console.log(e.message);
}

.selected{
  font-weight: bold; 
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<span id="Bel'Veth">Your element</span>

That said, it should be easier to just avoid using such values for ids.

God bless you, I one of my js functions was calling another one (where I also replaced the quotation) sending the fixed string as a parameter. — Flowey la flower, Aug 15 '23 at 11:36

score -1 · Answer 2 · answered Aug 14 '23 at 22:56

-1

ID's cannot contain a quote character. So you will have to find a way to remove it from the ID whereever that is coming from, and then your code will work.

Read up on what is allowed and why here: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

From that page it says:

Technically, the value for an id attribute may contain any character, except whitespace characters. However, to avoid inadvertent errors, only ASCII letters, digits, '_', and '-' should be used, and the value for an id attribute should start with a letter.

answered Aug 14 '23 at 22:56

Chris Barr

29,851
23
95
135

1

The quote you quote says quotes are valid. There are also plenty of duplicates here showing quotes can be escaped: https://stackoverflow.com/questions/1174636/can-i-put-a-single-quote-in-a-jquery-attribute-equals-selector-attribute-value, https://stackoverflow.com/questions/63149453/how-to-find-double-quote-option-in-html-select-using-jquery, https://stackoverflow.com/questions/9288985/jquery-attribute-selector-variable-that-contains-a-quote ... – Don't Panic Aug 15 '23 at 02:06
An [older spec, html4](https://www.w3.org/TR/html4/types.html) didn't allow quotes in an id. However, I don't see that in [a spec from July 2023](https://dom.spec.whatwg.org/#concept-id). – qrsngky Aug 15 '23 at 02:48
Well regardless it doesn't work in jQuery. So why not just keep it simple and use IDs that work across all versions of HTML and the tools you are using? I mean the quote is obviously messing you up, so just don't use it in an ID. Do you really want to be allowed to write code like this: `$("#-4-'my-id'")` – Chris Barr Aug 15 '23 at 11:34
1

Of course it works in jQuery, all the duplicates I linked are jQuery. [Here's OP's exact code, working](https://jsfiddle.net/dont_panic/6L3fer27/), if you need more. There's no question it would be simpler not to use special chars in selectors, and I'd also urge OP to not use them, but that's not the question. -1, factually incorrect answer. – Don't Panic Aug 15 '23 at 22:04

JQuery search by ID if ID has a quotation mark

2 Answers2