JSFiddle - React, Tailwind, and code Playground

by ipeshev

HTML

<pre id="test">
    <html><meta name=\"Generator\" content=\"GoPro.net\"><style>p, li, div {margin:0cm; margin-bottom:.0001pt; font-size:12.0pt; font-family: Arial, Helvetica;} td {font-size:12.0pt; font-family: Arial, Helvetica;}  a:link {color:blue; text-decoration:underline;}  a:visited {color:purple; text-decoration:underline;}</style><body link=blue vlink=purple><p><font size=2 face=Arial><META name=Generator content=GoPro.net><STYLE>p, li, div {margin:0cm; margin-bottom:.0001pt; font-size:12.0pt; font-family: Arial, Helvetica;} td {font-size:12.0pt; font-family: Arial, Helvetica;}  a:link {color:blue; text-decoration:underline;}  a:visited {color:purple; text-decoration:underline;}</STYLE><P><FONT size=2 face=Arial><META name=Generator content=GoPro.net><STYLE>p, li, div {margin:0cm; margin-bottom:.0001pt; font-size:12.0pt; font-family: Arial, Helvetica;} td {font-size:12.0pt; font-family: Arial, Helvetica;}  a:link {color:blue; text-decoration:underline;}  a:visited {color:purple; text-decoration:underline;}</STYLE><P><FONT size=2 face=Arial>testgggggggggggggggggggggggggg</FONT></P></FONT><P></P></font></p></body></html>
      
</pre>
<pre id="result"></pre>

CSS

#test {
    border:1px solid red;
}
#result {
    border:1px solid black;
}

JavaScript

/**
     * Html encode
     */
    var htmlEncode = function(value){
        if (value) {
            return jQuery('<textarea />').text(value).html();
        } else {
            return '';
        }
    };
    /**
     * Html decode
     * @param value
     * @returns {*}
     * @private
     */
    var htmlDecode = function(value){
        if (value) {
            return jQuery('<textarea />').html(value).text();
        } else {
            return '';
        }
    };
var isEncoded = function(value){
    return htmlDecode(htmlEncode(value)) == htmlEncode(htmlDecode(value))
}
var html_string = '<html><meta name=\"Generator\" content=\"GoPro.net\"><style>p, li, div {margin:0cm; margin-bottom:.0001pt; font-size:12.0pt; font-family: Arial, Helvetica;} td {font-size:12.0pt; font-family: Arial, Helvetica;}  a:link {color:blue; text-decoration:underline;}  a:visited {color:purple; text-decoration:underline;}</style><body link=blue vlink=purple><p><font size=2 face=Arial></font></p></body></html>';

var endcoded_html = '&amp;lt;html&amp;gt;&amp;lt;meta name="Generator" content="GoPro.net"&amp;gt;&amp;lt;style&amp;gt;p, li, div {margin:0cm; margin-bottom:.0001pt; font-size:12.0pt; font-family: Arial, Helvetica;} td {font-size:12.0pt; font-family: Arial, Helvetica;}  a:link {color:blue; text-decoration:underline;}  a:visited {color:purple; text-decoration:underline;}&amp;lt;/style&amp;gt;&amp;lt;body link=blue vlink=purple&amp;gt;&amp;lt;p&amp;gt;&amp;lt;font size=2 face=Arial&amp;gt;&amp;lt;/font&amp;gt;&amp;lt;/p&amp;gt;&amp;lt;/body&amp;gt;&amp;lt;/html&amp;gt;';
console.log(htmlEncode(html_string));
console.log(htmlDecode(htmlEncode(endcoded_html)));
console.log(htmlEncode(htmlDecode(html_string)));
console.log(htmlEncode(htmlDecode(endcoded_html)));
console.log(isEncoded(html_string));
console.log(isEncoded(endcoded_html));