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

Question

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

<a href="http://www.test.com" class="abcd">ABCD</a>
var className = 'abcd';
var x = document.querySelector('.'+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.

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

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

Answer 1

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

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

<a href="http://www.test.com" class="abcd/efgh">ABCD</a>

Source