如何为 Bootstrap 弹出框和工具提示内容编码 html

Question

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

当 data-html=true 时，引导工具提示和弹出框支持 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 一起使用，但我真的不想用 50 种不同的浏览器和版本进行测试。它确实确实混淆了 Visual Studio 2013 HTML 编辑器中的解析器。那位编辑认为没有结束引号。

我可以通过在一个单独的文件中分配来自 JavaScript 的属性来避开这一点，但这很笨拙并且破坏了关注点的分离。

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

Answer 1

正如公认的答案所指出的，您不能在用" 引用的字符串中引用"。这个问题经常发生。如果你想显示看起来像 HTML 的文本，那么浏览器应该如何知道它应该将什么解析为 HTML 以及它应该简单地显示什么。

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

答案是逃避。不要使用" 和< 等字符，而是使用" 和< 等占位符

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

但是有一个不同的解决方案：用" 引用的字符串可以包含' 而不会出现问题。以下是有效的：

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

这可以应用于您的引导弹出窗口，我已经设置了一个小提琴，它显示了如何正确解析单引号字符串，而转义字符串会混淆浏览器：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()
})

Answer 2

只要是有效的 html 属性值，您就可以向 HTML 属性添加任何您想要的内容。什么是有效的属性值？不包含标签、引号等的内容。所以....什么？解决方案是：在将字符串附加到 html 属性之前先对字符串进行修饰。

如果您使用的是 PHP：http://fi2.php.net/htmlspecialchars 或树枝：http://twig.sensiolabs.org/doc/filters/escape.html

如果你使用jquery，当你这样做时，$el.data('my_scaped_json) 将被转换成它原来的样子，比如一个json对象或html-string： $( $el.data('my_scaped_html) );