How to select an element that contains quote marks?

Question

How can I use querySelector or any other Javascript selector when the element's attribute contains quote marks " ?

For example, if I search for an img element that has a src of http://www.example.com/abc"def (yes, an attribute that contains quotes):

document.querySelector('img[src="http://www.example.com/abc"def"]');

It gets this error:

Uncaught DOMException: Failed to execute 'querySelector' on 'Document':'img[src="http://www.example.com/abc"def"]' is not a valid selector.

Obviously, my question applies to both single ' and double " quote marks used simultaneously.

escape it. do note however that it will require two backslashes. — Kevin B, Aug 09 '19 at 21:52
All the url links can not have quotes by the standard, this characters MUST be urlencoded, so it's not actually `"` but `%22` — Goran.it, Aug 09 '19 at 21:52
@Goran.it eh, you're partly correct. querySelector's attribute equals selector is based on the attribute, not the property. the property does in fact get changed as you've stated, however, if it has an actual quote in the attribute, you'll need the quote in the attribute equals selector as well. — Kevin B, Aug 09 '19 at 22:00
@KevinB Well what OP is asking about is when the quote ain't properly escaped in the html — Mohrn, Aug 09 '19 at 22:14
@Mohrn i mean, no html was provided, so we have no way of knowing that. [It is possible](https://jsfiddle.net/zfL8v6r0/) to have quotes in an html attribute without it breaking the attribute the way you've described. — Kevin B, Aug 09 '19 at 22:14
@KevinB _that has a src of http://www.example.com/abc"def (yes, an attribute that contains quotes)_ sounds to me like there's an actual quote in there — Mohrn, Aug 09 '19 at 22:20
@Mohrn And as my example shows, you can have an actual quote in there and have it still not break the html. — Kevin B, Aug 09 '19 at 22:21
My question is about any element/attribute, not just `src` of `img`. My oversight that quotes cannot be used in URLs, so the example became confusing. Thank you for your answers. — max, Aug 09 '19 at 22:25

score 5 · Accepted Answer · answered Aug 09 '19 at 22:10

5

var test = document.querySelector('img[src="http://www.example.com/abc\\"def"]');`

Appears to work, at least for me, on chrome, when I wrote this.

answered Aug 09 '19 at 22:10

Felix Cavendish

score 0 · Answer 2 · answered Aug 09 '19 at 22:07

0

replace your quotes with &x22;

document.querySelector('img[src="http://www.example.com/abc&x22;def&x22;]');

answered Aug 09 '19 at 22:07

Jason Ashley

score 0 · Answer 3 · answered Aug 09 '19 at 22:20

0

You can use \ like this, JS should recognice that it's part of the string:

document.querySelector('img[src=\"http://www.example.com/abc\"def\"]');

answered Aug 09 '19 at 22:20

It would require **two** backslashes per quote because if you only have one, it's just going to escape the quote itself, resulting in a string without backslashes. – Kevin B Aug 09 '19 at 22:23

3 Answers3