title: How to display encoded HTML in browser
body: <p>I am using <a href="https://quilljs.com/" rel="nofollow noreferrer">Quill</a> Rich Text Editor.</p>
  
  <p><a href="https://i.stack.imgur.com/TJA7j.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TJA7j.jpg" alt="enter image description here"></a></p>
  
  <p>This is what I get from the rich text box:</p>
  
  <pre><code>&lt;p&gt;This is my rich HTML Text&lt;/p&gt;
  </code></pre>
  
  <p>I understand, it is not safe to display user input directly in the browser, so I HTML encode this string and get this:</p>
  
  <pre><code>&amp;lt;p&amp;gt;This is my rich HTML Text&amp;lt;&amp;#x2F;p&amp;gt; 
  </code></pre>
  
  <p>Now I copy this encoded string inside an HTML template:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt; 
      &lt;h4&gt;This is my Template&lt;/h4&gt;
      &lt;div class='message'&gt; &amp;lt;p&amp;gt;This is my rich HTML Text&amp;lt;&amp;#x2F;p&amp;gt; &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>But now, when I open the template in the browser, I see the encoded HTML as string:</p>
  
  <p>
  
  
   
      This is my Template
       &lt;p&gt;This is my rich HTML Text&lt;&#x2F;p&gt; 
  </p>
  
  <p>How can I both ensure user input is encoded and display the output HTML correctly?</p>
  
  <hr>
  
  <h2>Update</h2>
  
  <p>Looks like Quill is already encoding the HTML, if I type the following:
  <a href="https://i.stack.imgur.com/uExAd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uExAd.png" alt="enter image description here"></a></p>
  
  <p>In my JavaScript function, I noticed that HTML is already encoded:
  <a href="https://i.stack.imgur.com/wPt21.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wPt21.png" alt="enter image description here"></a></p>
  
  <p>Am I safe to use this user input?</p>