如何选择包含引号的元素？

Posted 2023-03-24

【中文标题】如何选择包含引号的元素？

【英文标题】：How to select an element that contains quote marks?

【发布时间】：2019-08-09 21:48:47

【问题描述】：

当元素的属性包含引号 " 时，我如何使用 querySelector 或任何其他 javascript 选择器？

例如，如果我搜索具有src 或http://www.example.com/abc"def 的img 元素（是的，包含引号的属性）：

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

它得到这个错误：

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

显然，我的问题适用于同时使用的单引号 ' 和双引号 "。

【问题讨论】：

转义它。但是请注意，它需要两个反斜杠。

所有的url链接都不能有标准的引号，这个字符必须是urlencoded，所以它实际上不是"而是%22

@Goran.it 所说的。 <img src="http://www.example.com/abc"def"> 被 Chrome 渲染为 <img src="http://www.example.com/abc" def"="">

@Goran.it 嗯，你说对了一部分。 querySelector 的属性等于选择器是基于属性，而不是属性。正如您所说，该属性实际上确实发生了变化，但是，如果它在属性中有一个实际的引号，那么您也需要属性中的引号等于选择器。

@Mohrn 我的意思是，没有提供 html，所以我们无法知道这一点。 It is possible 在 html 属性中使用引号，而不会像您描述的那样破坏属性。

【参考方案1】：

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

在我写这篇文章时，至少对我来说，在 chrome 上似乎可以工作。

【参考方案2】：

用 &x22; 替换你的引号

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

https://***.com/a/15135906/4263440

【参考方案3】：

你可以像这样使用\，JS应该识别它是字符串的一部分：

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

【讨论】：

每个引号需要 两个 反斜杠，因为如果你只有一个，它只会转义引号本身，从而产生一个没有反斜杠的字符串。