javascript - 像.hasAttrAndValue()这样的方法用于属性选择器

给定情况：

$('#dbBoxNames > .names').each(function () {
    var boxName = $(this).attr('data-name');
    $('#boxList > .box[data-name="' + boxName + '"]').show();
});

我想更新具有data-name属性等于boxName变量的多个框。

如果boxName在值中带有双引号，例如。 box1"，jQuery（2.4）抛出Uncaught Error: Syntax error, unrecognized expression: .box[data-name="box1""]。

使用属性数据选择器的重要性在于使用简单的代码和更快的应用程序。
关于如何解决这个问题的任何想法？ （必须使用属性数据选择器）

我正在寻找类似的东西：

$('.box').hasAttrAndVal('data-name', boxName);
我想它不会再抛出相同的错误了。

以下内容不起作用：


用'替换"，反之亦然（boxName可以包含单引号）。
在属性值周围不使用任何引号（boxName可以包含空格）。
boxObj[0].hasAttribute("' + boxName + '");（有多个.box对象）


更新1

如果boxName仅包含单引号或双引号，则似乎可以解决以下问题：

$('#dbBoxNames > .names').each(function () {
    var boxName = $(this).attr('data-name');
    if (boxName.includes("'") && !boxName.includes('"'))
        $('#boxList > .box[data-name="' + boxName + '"]').show();
    if (!boxName.includes("'") && boxName.includes('"'))
        $("#boxList > .box[data-name='" + boxName + "']").show();
});

现在的问题是当boxName包含单引号和双引号时该如何处理...

解

显然，我将通过将DB中的所有特殊字符转换为html代码来解决此错误。 （后端不是我提供的，所以这个主意一开始并没有引起我的注意）。

干杯

最佳答案

您可以使用JSON.stringify()转义双引号：

var boxName = 'box1"';
boxName = JSON.stringify(boxName);
$('#boxList > .box[data-name=' + boxName + ']').show();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="boxList">
  <div style="display:none;" class="box" data-name='box1"'>Here I am!</div>
</div>

请注意，JSON.stringify()还将返回的字符串包装在双引号中。