javascript - 类似 .hasAttrAndValue() 的方法用于属性选择器

Question

给定情况:

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

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

当 boxName 值中包含双引号时，例如。 box1"，jQuery (2.4) 抛出未捕获错误:语法错误，无法识别的表达式:.box[data-name="box1""]。

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

我正在寻找类似的东西:

$('.box').hasAttrAndVal('数据名称', 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同时包含单引号和双引号时如何处理...

解决方案

显然我将通过将所有特殊字符从数据库转换为 html 代码来解决这个错误。 (后端不是我提供的，所以我一开始并没有想到这个想法)。

干杯

Answer 1

您可以使用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() 还将返回的字符串括在双引号中。