Question

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

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

带有转义html的Jquery - tag属性会自动转义

3 个答案: