I have an element with encoded html content as shown below.
<div class="hasTooltip">
<html>........... //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();
Following code should work.
function unEscape( str ){
str = str.replace(/"/g,'"').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>')
return str;
}
var h = document.getElementById("hasTooltip").innerHTML;
console.log( unEscape(h) )<div id="hasTooltip">
<html></html>
</div>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>