Jquery - 带有转义html的标签属性自动转义答案

【问题标题】：Jquery - tag attribute with escaped html gets unescaped automaticallyJquery - 带有转义html的标签属性自动转义
【发布时间】：2013-04-20 11:05:51
【问题描述】：

我有一个带有可能包含转义 html 值的数据属性的 div

<div id="test" data-title="&lt;script&gt;alert(&quot;Hello&quot;);&lt;/script&gt;"></div>

现在，当我读取 data 属性的值时，它会自动被转义。例如，以下代码将导致警报显示。

$(document).ready(function(){
    $("#test").append($("#test").data("title"));
  });

见 jsfiddle http://jsfiddle.net/FJTW8/3/

为什么没有转义，解决方案是什么。

【问题讨论】：

标签： javascript jquery escaping

【解决方案1】：

试试这个

$(document).ready(function(){
  //alert($("#test").data("title"));                
    $("#test").append(escape($("#test").data("title") ) );
  });

【讨论】：

它没有转义，因为您将它附加到 html 元素而没有再次转义，也更新了小提琴，jsfiddle.net/FJTW8/4

【解决方案2】：

此代码将起作用：

$(document).ready(function(){
   $("#test").text($("#test").data("title"));
});

因为 .append() 和 .html() 是一样的；

【讨论】：

【解决方案3】：

答案不太对你应该这样做：

$(document).ready(function(){              
    $("#test").append(htmlEntities($("#test").data("title") ) );
  });
function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

见 jsfiddle http://jsfiddle.net/FJTW8/16/

【讨论】：