Question

这可能是重复的;很难分辨，因为关键词含有＆＃34; html＆＃34;和＆＃34;内容＆＃34;甚至Bing和谷歌都回归了很多误报。

当data-html = true时，引导工具提示和弹出窗口支持数据内容属性的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>"

这可以应用于您的自举弹出窗口，我设置了一个小提琴，它显示了如何正确解析单引号字符串，而转义的字符串使浏览器感到困惑：https://jsfiddle.net/z4t2sud3/3/

这是小提琴内部的代码（小提琴环境会自动导入引导程序，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属性中之前对字符串进行Scape。

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

如果你正在使用jquery，当你执行$ el.data（'my_scaped_json）将转换为它原来的任何东西，例如json对象或html-string：$（$ el.data（'my_scaped_html））;

如何编写用于Bootstrap popover和工具提示内容的html

2 个答案: