javascript - 如何为 Bootstrap 弹出窗口和工具提示内容编码 html

Question

这可能是重复的；很难说，因为关键字包含“html”和“内容”，甚至 Bing 和 Google 也返回了很多误报。

当 data-html=true 时，Bootstrap 工具提示和弹出框支持 data-content 属性的 html 值。但是，这是无效的

<input id="email" class="form-control" type="email" 
  data-bind="value: Email, valueUpdate: 'afterkeydown'" 
  data-container="body" data-toggle="popover" data-placement="bottom"
  data-title="Email" data-html="true"
  data-content="<p>This is <i>your</i> email address.</p>" />

因为您不能只将 html 放在本身就是 HTML 的属性的值中。它可能会混淆解析器并且是 HTML 规范不允许的。

虽然它似乎适用于 Internet Explorer，但我真的不想用五十种不同的浏览器和版本进行测试。它肯定确实混淆了 Visual Studio 2013 HTML 编辑器中的解析器。那个编辑认为没有结束语。

我可以通过在单独的文件中从 JavaScript 分配属性来避免这种情况，但这很笨拙并且破坏了关注点的分离。

那么，标记它的正确方法是什么？

Answer 1

正如已接受的答案所指出的，您无法获得报价 "在用 " 引用的字符串中.这个问题经常发生。如果您想显示看起来像 HTML 的文本，那么浏览器应该如何知道它应该将什么解析为 HTML 以及它应该只显示什么。

例如，如何让浏览器显示文本<p></p>

答案是转义。而不是像 " 这样的字符和 < ，您使用像 " 这样的占位符和 <

但是，转义引号的解决方案在这里不起作用。正是因为浏览器不会将其解析为 HTML。如果您在 html 中放置转义引号，它们在浏览器中看起来不像引号，它们看起来像文本。

但是有一个不同的解决方案:用 " 引用的字符串可以包含 '没有什么问题。以下是有效的:

data-content="<div id='string_in_string' ></div>"

这可以应用于您的 Bootstrap 弹出窗口，我设置了一个 fiddle ，它显示了如何正确解析单引号字符串，而转义字符串会混淆浏览器:https://jsfiddle.net/z4t2sud3/3/

这是fiddle里面的代码(fiddle环境自动导入bootstrap，jquery等)

<mark data-content="
    <button class=&quot;btnr&quot; type=&quot;button&quot;>
        Doesn't work
    </button>

    <button class='btn btn-info' type='button'>
        Works
    </button>
    " data-html="true" data-toggle="popover">
    Popovered
</mark>

并确保通过 Javascript 激活弹出窗口:

$(function () {
  $('[data-toggle="popover"]').popover()
})