Question

我有一个带有编码html内容的元素，如下所示。

<div class="hasTooltip"> 
    &lt;html&gt;........... //more html encoded text
</div>

当我点击此元素时，我希望内容在新窗口中显示，并且工作正常。

$('.hasTooltip').click(function() {
    var win = window.open("", "Title", "toolbar=no");
    win.document.body.innerHTML = $(this).html();
});

但问题是该窗口显示带有解码值的html文本，但不显示所有样式的实际html内容。

我尝试了以下代码，但没有运气，因为它没有显示任何内容。有什么提示吗？

win.document.body.innerHTML = $(this).html().text();

Answer 1

以下代码应该可行。

function unEscape( str ){
  str = str.replace(/&quot;/g,'"').replace(/&amp;/g,'&').replace(/&lt;/g,'<').replace(/&gt;/g,'>')
 return str;
}
var h = document.getElementById("hasTooltip").innerHTML;

console.log( unEscape(h) )

<div id="hasTooltip"> 
    &lt;html&gt;&lt;/html&gt;
</div>

Answer 2

这是您的解决方案

如果您无法在此处运行代码，请检查jsfiddle

https://jsfiddle.net/sq3Ljwnt/

$('.hasTooltip').click(function() {
    var win = window.open("", "Title", "toolbar=no");
    win.document.body.innerHTML = $("textarea").val();
});

textarea{
  height:200px;
  width:100%;
  border:none !important;
  background:none;
  resize: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="hasTooltip"> 
<textarea>
<html>
  <h1>
  This is test
  </h1>
  <p>
  More HTML ...
  </p>
</html>
</textarea>
</div>

在jQuery中显示实际的HTML内容

2 个答案: