转义 HTML 属性答案

【问题标题】：Escaping HTML attributes转义 HTML 属性
【发布时间】：2012-04-15 15:00:53
【问题描述】：

我正在尝试将转义字符串呈现为 html 属性（使用 Twitter Bootstrap 呈现用于生成用户正在查看的内容的转义代码的弹出框）：

类似：

<a class="btn" href="#" data-content='<pre>$escaped_code</pre>' rel="popover" data-orginal-title="$title">some cool looking thing</a>

问题在于浏览器会解析和取消转义转义码，这可能会导致不愉快。

【问题讨论】：

【解决方案1】：

不要在 HTML 属性中使用 < 或 >，例如：

<a class="btn" href="#" data-content='&lt;pre&gt;$escaped_code&lt;/pre&gt;' rel="popover" data-orginal-title="$title">some cool looking thing</a>

【讨论】：

【解决方案2】：

我不确定你有什么样的转义字符串。我假设PHP。但是，HTML 的转义字符是不同的：

您尝试将 HTML 标记放入 HTML 属性的事实表明您没有使用正确的 HTML 转义字符。确保 HTML 标记中的所有内容都为 HTML 转义。

【讨论】：

【解决方案3】：

答案当然是手动转义两次。

【讨论】：