Showing actual HTML content in jQuery

Question

I have an element with encoded html content as shown below.

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

When I click this element, I want the content to be shown in a new window and it works fine.

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

But the problem is that the window shows the html text with decoded values but not the actual html content with all styles.

I tried the below code but no luck as it shows no content. Any tips?

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

Check out http://stackoverflow.com/questions/1147359/how-to-decode-html-entities-using-jquery How to decode HTML entities using jQuery? — GavinBrelstaff, Mar 06 '17 at 16:56
@GavinBrelstaff I have seen the link. The accepted answer is not good in terms of security as commented in the answer. — Purus, Mar 06 '17 at 16:58

score 2 · Accepted Answer · answered Mar 06 '17 at 17:00

Following code should work.

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>

score 0 · Answer 2 · answered Mar 06 '17 at 17:00

Here is your solution

if you you are unable to run your code over here please check 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>

Showing actual HTML content in jQuery

2 Answers2