如何防止 jQuery .html() 自动转义 href 属性？答案

【问题标题】：How to prevent jQuery .html() from escaping the href attribute automatically?如何防止 jQuery .html() 自动转义 href 属性？
【发布时间】：2012-02-04 18:35:48
【问题描述】：

更新：似乎是 TimWolla 评论的特定于浏览器的行为 - 我应该如何以跨浏览器的方式可靠地标准化为未转义的版本？

HTML：

<div id="test"><a href="#{one}">#{two}</a></div>

JS：

$('#test').html()
=> <a href="#%7Bone%7D">#{two}</a>

请注意，href 中的 #{one} 已转义，而 #{two} 未转义。

有没有比unescape整个字符串更好的方法？

unescape($('#test').html())
=> <a href="#{one}">#{two}</a>

示例如下：http://jsfiddle.net/kenn/n8veL/

【问题讨论】：

似乎这是一个特定于浏览器的问题。在 Googles v8 Engine 中它工作得很好。
该锚点似乎是一个模板。为什么要将模板解析为 DOM？模板应保存在源代码中（例如，在 SCRIPT 元素中）并使用 JavaScript 处理（并且只有 then 由浏览器解析）。
蒂姆沃拉：该死！更新了问题...
Šime Vidas：因为模板本身是动态的。相同的部分用于在服务器端呈现一些静态页面，以及由 js 模板化。我正在使用 Rails 3.2 并且“.js.coffee.erb”并不能解决这个问题，因为无法从 js 文件访问 render。
我已经updated your jsfiddle 来证明我的答案。 Firefox 不会混淆其他属性的值，只是“href”（可能还有“src”和其他类似 URL 的东西）。

标签： jquery templates

【解决方案1】：

首先，我怀疑您的问题是否有可靠的解决方案。根本原因很简单：因为在下面工作的Element.innerHTML 是非标准的，它完全取决于浏览器的实现。

如果你想要一个可靠的解决方案，我建议你使用 DOM 操作而不是模板。

【讨论】：

但是转义只在“href”属性上完成。其他属性不会受到同样的影响。
@Pointy 我敢打赌某些浏览器（例如 Firefox）会避开它，因为 href 应该包含一个 URL。因此，不允许出现在其中的字符会被转义。但是，正如我所说，它是特定于浏览器的，我们没有任何标准来保证它的行为。
对，但我试过的浏览器都没有转义“data-href”属性。毕竟，模板在元素上的位置并不重要。当然，属性值中的 HTML 元字符总会有问题，但对于简单的模板，它应该可以工作。

【解决方案2】：

如果您要通过 JavaScript 对元素执行扩展，您可以将“href”模板放在单独的属性中。

<a href='#dummy' data-href='#{template}'>Hi</a>

然后只需从 data 属性扩展并将结果放入真正的“href”中。

【讨论】：

听起来不错，但不幸的是，在我的情况下，它并没有那么好，因为在服务器端为一些静态页面共享相同的模板，并且在服务器逻辑中复制 js 行为似乎很尴尬.
嗯，我明白了。那么，除了unescape() 之外，可能没有其他好的解决方法。