How to render encoded HTML in browser

Question

so my task is to encode all html before inserting into webpage.

<!doctype html>
<?xml version="1.0" encoding="ISO-8859-1"?>
<html lang="en">
<head>
  <meta charset="utf-8">
<?xml version="1.0" encoding="ISO-8859-1"?>
  <title>The HTML5 Herald</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">

  <link rel="stylesheet" href="css/styles.css?v=1.0">

  <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
  <![endif]-->
</head>

<body>
 <h1>wdw</h1>
</body>
</html>

i encoded it to below

&lt;!doctype html&gt;
&lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="utf-8"&gt;
&lt;?xml version="1.0" encoding="ISO-8859-1"?&gt;
  &lt;title&gt;The HTML5 Herald&lt;/title&gt;
  &lt;meta name="description" content="The HTML5 Herald"&gt;
  &lt;meta name="author" content="SitePoint"&gt;

  &lt;link rel="stylesheet" href="css/styles.css?v=1.0"&gt;

  &lt;!--[if lt IE 9]&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
&lt;/head&gt;

&lt;body&gt;
 &lt;h1&gt;wdw&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;

now the problem is browser is just displaying html as text and not rendering the tag. how i make it possible for browser to render it instead of just displaying the text

If the browser writes the code and not renders it is because it's being told to do so by your code, check: 1. any `
` or `` tag, 2. Check your http/httpd server version. — aswzen, Mar 26 '18 at 18:06
With php you can use `html_entity_decode()` https://stackoverflow.com/questions/6465263/how-to-reverse-htmlentities or with javascript you can checkout this thread https://stackoverflow.com/questions/5796718/html-entity-decode — pokeybit, Mar 26 '18 at 18:09

Alvis Vadaliya · Answer 1 · 2018-03-26T19:57:14.010

First Approach :

i tried to solve your problem by jquery but you have to add one unused <pre> tag to your code and two lines of jquery code

if you ignore pre and jquery script on output then everything is as you wan't but it will display only <head> and <body> tag's and if your work is not done by displaying head and body then you have to go for second approach to displaying whole html code

<!doctype html>
<?xml version="1.0" encoding="ISO-8859-1"?>
<html lang="en">
<head>
    <meta charset="utf-8">
    <?xml version="1.0" encoding="ISO-8859-1"?>
    <title>The HTML5 Herald</title>
    <meta name="description" content="The HTML5 Herald">
    <meta name="author" content="SitePoint">

    <link rel="stylesheet" href="css/styles.css?v=1.0">

    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            var data = $('html').html();
            var data = $('pre#display-code').text(data);
        });
    </script>
</head>

<body>
<h1>wdw</h1>
</body>
</html>
<pre id="display-code"></pre>

Second Approach :

this approach is addition and Modification of first approach and it take some rigid code,but it can able to complete your task at maximum level

<!doctype html>
<?xml version="1.0" encoding="ISO-8859-1"?>
<html lang="en">
<head>
    <meta charset="utf-8">
    <?xml version="1.0" encoding="ISO-8859-1"?>
    <title>The HTML5 Herald</title>
    <meta name="description" content="The HTML5 Herald">
    <meta name="author" content="SitePoint">

    <link rel="stylesheet" href="css/styles.css?v=1.0">

    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            var data = $('html').html();
            data = "<!doctype html>\n"+"<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>\n"+"<html lang=\"en\">"+data+"\n</html>";
            var data = $('pre#display-code').text(data);
        });
    </script>
</head>

<body>
<h1>wdw</h1>

<pre id="display-code"></pre>
</body>
</html>

i hope it will help you and others

score 0 · Answer 2 · answered Mar 26 '18 at 18:22

Your file is a text file and not more a html file, so the entities (e.g. <) are taken literally.

So you should tell the browser that you have an HTML page, so you should add usual html boilerplate:

<!doctype html>
<html>
<body>
 ... your encoded file
</body>
</html>

How to render encoded HTML in browser

2 Answers2