blocks|key|1890208|text|只要是有效的HTML属性值，您就可以向html属性添加任何您想要的东西。什么是有效属性值？不包含标签、引号等的内容。所以..。然后呢？解决方案是:在将字符串附加到html属性中之前对其进行处理。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1890209|如果您正在使用PHP：http://fi2.php.net/htmlspecialchars或Twig：http://twig.sensiolabs.org/doc/filters/escape.html|offset|length|1890210|如果你使用jquery，当你使用jquery时，$el.data('my_scaped_json)会被转换成原来的样子，比如json对象或html-string：$(+$el.data('my_scaped_html)+)；|1890211|entityMap|0|LINK|mutability|MUTABLE|url|http://fi2.php.net/htmlspecialchars|1|http://twig.sensiolabs.org/doc/filters/escape.html^0|0|B|Z|0|1G|1E|1|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]|$D|W|E|X|1|Y]]|A|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]|P|$5|K|L|M|A|$N|Q]]]]

You can add whatever you want to an HTML attribute as long as it is a valid html attribute value. What is a valid attribute value? What does not contains tags, quotes and so on. So.... and what? The solution is: Scape the string before append it inside the html attribute.

If you are using PHP: <a href="http://fi2.php.net/htmlspecialchars" rel="nofollow">http://fi2.php.net/htmlspecialchars</a>
Or Twig: <a href="http://twig.sensiolabs.org/doc/filters/escape.html" rel="nofollow">http://twig.sensiolabs.org/doc/filters/escape.html</a>

If you are using jquery, when you do $el.data('my_scaped_json) will be converted to whatever it was originally, such a json object or html-string: $( $el.data('my_scaped_html) );

blocks|key|1676499|text|正如公认的答案所指出的，在用"引用的字符串中不能有引用"。这个问题经常发生。如果您想要显示类似于HTML的文本，那么浏览器应该如何知道它应该解析为HTML的内容以及应该简单地显示的内容。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1676500|例如，如何让浏览器显示文本|1676501|答案是逃避。您可以使用&quot;和&lt;等占位符，而不是"和<等字符|1676502|然而，转义引号的解决方案在这里不起作用。这正是因为浏览器不会将其解析为HTML。如果你在html中添加转义引号，它们在浏览器中看起来不像引号，它们看起来像文本。|1676503|然而，还有一种不同的解决方案:用"引用的字符串可以包含'，而不会出现问题。以下内容是有效的：|1676504|data-content="<div+id='string_in_string'+></div>"|code-block|syntax|javascript|1676505|这可以应用于您的引导弹出程序，我已经设置了一个小提琴，它显示了如何正确解析单引号字符串，而转义的字符串会使浏览器感到困惑：https://jsfiddle.net/z4t2sud3/3/|1676506|这是小提琴内部的代码(小提琴环境自动导入bootstrap、jquery等)|1676507|<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
|1676508|并确保通过Javascript激活弹出窗口：|1676509|$(function+()+{
++$('[data-toggle="popover"]').popover()
})|1676510|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/z4t2sud3/3/^0|E|1|R|1|0|D|7|0|B|6|I|4|U|1|W|1|0|0|G|1|R|1|0|0|1P|W|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1F|8|@$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1I|8|@$9|1J|A|1K|B|C]|$9|1L|A|1M|B|C]|$9|1N|A|1O|B|C]|$9|1P|A|1Q|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1R|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|1S|8|@$9|1T|A|1U|B|C]|$9|1V|A|1W|B|C]]|D|@]|E|$]]|$1|N|3|O|5|P|7|1X|8|@]|D|@]|E|$Q|R]]|$1|S|3|T|5|6|7|1Y|8|@]|D|@$9|1Z|A|20|1|21]]|E|$]]|$1|U|3|V|5|6|7|22|8|@]|D|@]|E|$]]|$1|W|3|X|5|P|7|23|8|@]|D|@]|E|$Q|R]]|$1|Y|3|Z|5|6|7|24|8|@]|D|@]|E|$]]|$1|10|3|11|5|P|7|25|8|@]|D|@]|E|$Q|R]]|$1|12|3|-4|5|6|7|26|8|@]|D|@]|E|$]]]|13|$14|$5|15|16|17|E|$18|19]]]]

As the accepted answer points out, you can't have a quote <code>"</code> inside a string quoted with <code>"</code>. This problem occurs often. If you want to display text that looks like HTML, then how is the browser supposed to know what it should parse as HTML and what it should simply display.

For example, how do you get a browser to display the text <code>&lt;p&gt;&lt;/p&gt;</code>

The answer is escaping. Instead of characters like <code>"</code> and <code>&lt;</code>, you use placeholders like <code>&amp;quot;</code> and <code>&amp;lt;</code>

However, the solution of escaping the quotes doesn't work here. Precisely because the browser will not parse it as HTML. If you put escaped quotes in your html, they don't look like quotes to the browser, they look like text.

There is a different solution however: A string that is quoted with <code>"</code> can contain <code>'</code> without problems. The following is valid: 

<pre><code>data-content="&lt;div id='string_in_string' &gt;&lt;/div&gt;"
</code></pre>

This can be applied to your bootstrap popovers, I've set up a fiddle, it shows how the single quote strings are correctly parsed, while the escaped strings confuse the browser: <a href="https://jsfiddle.net/z4t2sud3/3/" rel="nofollow noreferrer">https://jsfiddle.net/z4t2sud3/3/</a>

This is the code inside the fiddle (the fiddle environment automatically imports bootstrap, jquery, etc)

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

 &lt;button class='btn btn-info' type='button'&gt;
 Works
 &lt;/button&gt;
 " data-html="true" data-toggle="popover"&gt;
 Popovered
&lt;/mark&gt;
</code></pre>

And be sure to activate the popover via Javascript:

<pre><code>$(function () {
 $('[data-toggle="popover"]').popover()
})
</code></pre>

This may be a duplicate; it's hard to tell because the key words contain "html" and "content" and even Bing and Google were returning a lot of false positives.

Bootstrap tooltips and popovers support html values for the data-content attribute when data-html=true. However, this isn't valid

<pre><code>&lt;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="&lt;p&gt;This is &lt;i&gt;your&lt;/i&gt; email address.&lt;/p&gt;" /&gt;
</code></pre>

because you can't just put html in the value of an attribute that is itself HTML. It may confuse the parser and is not permitted by the HTML specification. 

While it seems to work with Internet Explorer, I really don't feel like testing with fifty different browsers and versions. It certainly does confuse the parser in the Visual Studio 2013 HTML editor. That editor thinks there's no closing quote.

I could dodge this by assigning the attribute from JavaScript in a separate file, but that's clumsy and defeats the separation of concerns.

So, what's the right way to mark this up?

How do I encode html for Bootstrap popover and tooltip content

Visual Studio

这可能是重复的；很难区分，因为关键字包含"html“和"content”，甚至Bing和Google都返回了许多误报。当data- html =true时，引导工具提示和弹出窗口支持data-content属性的html值。但是，这是无效的<input id="email" class="form-control" t...

问如何对引导弹出窗口和工具提示内容的html进行编码
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何对引导弹出窗口和工具提示内容的html进行编码EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何对引导弹出窗口和工具提示内容的html进行编码
EN