Javascript + queryselector 支持所有带有类名的特殊字符答案

【问题标题】：Javascript + queryselector support with all special characters with classnameJavascript + queryselector 支持所有带有类名的特殊字符
【发布时间】：2017-09-20 21:05:36
【问题描述】：

通常在 javascript 中使用查询选择器时，我们会这样做，

<a href="http://www.test.com" class="abcd">ABCD</a>
var className = 'abcd';
var x = document.querySelector('.'+className);

一切正常。在这里， className 将一般更改。示例当我的类名带有“/”时，该查询选择器有问题

<a href="http://www.test.com" class="abcd/efgh">ABCD</a>
var className = 'abcd/efgh';
var x = document.querySelector('.'+className);

我们得到这样的错误

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '.abcd/efgh' is not a valid selector.

我了解由于类名有 '/' 导致的错误，我们可以使用正则表达式修复它。但是可以使用正则表达式或其他方式添加所有特殊字符支持的代码吗？

类名是动态变化的，所以它带有斜杠或任何其他特殊字符。可以添加所有可能的特殊字符。

【问题讨论】：

您如何解决/ 的错误以及为什么？
类名是动态变化的，所以它带有斜杠或任何其他特殊字符。可以添加所有可能的特殊字符。

标签： javascript

【解决方案1】：

您可以在 js 字符串中使用两个反斜杠 (\\) 对其进行转义（它将被评估为 \，最后被 CSS 解析器解释为转义字符）。

var className = 'abcd\\/efgh';
var x = document.querySelector('.' + className);
console.log(x);

&lt;a href="http://www.test.com" class="abcd/efgh"&gt;ABCD&lt;/a&gt;

Source

【讨论】：

类名会自动改变，

【解决方案2】：

看看这个答案。 Which characters are valid in CSS class names/selectors? css 类中不允许使用字符 /。

【讨论】：

当规范发生变化时，您不应该引用这些旧帖子。 current HTML specification 说：“在 HTML 元素上指定时，class 属性的值必须是一组以空格分隔的标记，表示元素所属的各种类。......没有额外的限制关于作者可以在类属性中使用的标记..."。换句话说，你可以使用任何你喜欢的字符，但空格将被视为分隔符。