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

Question

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

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

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

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

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

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

Answer 1

试试这个

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

Answer 2

此代码将起作用：

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

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

Answer 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/