javascript - HTML:在属性中的字符串中嵌套字符串

Question

我的网站包含带有 HTML 代码的 Bootstrap 弹出窗口。这样的弹出窗口看起来像这样(而不是弹出 HTML，为了便于阅读，我放入了一个占位符):

<mark data-content="Fancy HTML here" data-html="true" data-toggle="popover">
    This mark has a popover
</mark>

在 data-content 中插入真正的 HTML 会带来正确转义引号的问题。我发现了这个问题，它看起来像一个完全相同的副本: How do I encode html for Bootstrap popover and tooltip content

接受的答案建议将引号转义为 "这不起作用，转义引号未正确解析。我在这个 fiddle 中设置了一个例子:https://jsfiddle.net/z4t2sud3/3/

另一种选择是对弹出窗口中的字符串使用单引号'。这个选项也在 fiddle 中，它工作正常。

但是如果我想嵌套得更深怎么办？例如，我插入到 data-content 中的 HTML 也可能包含弹出窗口。虽然这似乎是一个非常糟糕的设计理念，但让它发挥作用会很好。

这是双嵌套弹出窗口的 fiddle :https://jsfiddle.net/cwz3sayj/3/

Answer 1

希望下面的代码片段看起来像您想要的那样，您可以在创建弹出窗口实例时传递一个选项，您可以在其中设置单击该实例时将显示的内容。由于第一次运行脚本时 DOM 中不存在第一级，因此必须在单击第一个弹出窗口后激活第二个弹出窗口。使用模板文字，您可以在编写的 html 代码中使用撇号或引号。

$('#firstPopover')
    .popover({
        html: true,
        content: `<button id="secondPopover" class="btn">
                      Goto second level
                  </button>`
    })
    .on('shown.bs.popover', function() {
        $('#secondPopover').popover({
            html: true,
            content: `This is the last level`
        });
    });

<br />
<button id="firstPopover" data-html="true" class="btn">
  Goto first level
</button>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

现在唯一的问题是第一层在第二层之前关闭。