HTML escape inside <code> element - No jQuery

Question

Good evening. I’m developing a chat and I’m racking my brain here. I capture the text, treat it, check what is img or link and just put inside the tags <img> and <a>, respectively. If it is not a link, image or text, I encapsulate with <code>. So the result ends up being like this, for example:

let msg = "Olá, meu nome é josé. Você já viu esse site <a href="www.g1.com">g1</a>? Lá tem a imagem <img src="teste.jpg">. Podemos usa-lá dentro da <pre><code><div><p>teste</p></div></code></pre>. O que acha?;

And my question is: How do I get everything inside the tag CODE giving the famous escape in html? The final result should look like this, I believe:

let msg = "Olá, meu nome é josé. Você já viu esse site <a href="www.g1.com">g1</a>? Lá tem a imagem <img src="teste.jpg">. Podemos usa-lá dentro da <pre><code> &lt;div&gt; &lt;p&gt; teste &lt;/p&gt; &lt;/div&gt; </code></pre>. O que acha?;

Thank you

Answer 1

You can do this by using some methods to find the snippets inside <code></code> and make the replacements (explanations in the code):

let msg = 'Olá, meu nome é josé. Você já viu esse site <a href="www.g1.com">g1</a>? Lá tem a imagem <img src="teste.jpg">. Podemos usa-lá dentro da <pre><code><div><p>teste</p></div></code></pre> <pre><code><div><p>teste2</p></div></code></pre>. O que acha?';
msg.match(/<code>(.*?)<\/code>/g) // pego onde tem <code></code> criando uma array
.map(a =>{
   a = a.replace(/<code>|<\/code>/gi, ''); // elimino <code> e </code>
   let re = new RegExp(a, 'g'); // regex para capturar os valores de cada índice da array
   let rep = a.replace(/</g, '&lt;').replace(/>/g, '&gt;'); // substituir as ocorrências
   msg = msg.replace(re, rep); // atualiza a string msg
});

console.log(msg);
document.querySelector("body").innerHTML = msg;

Answer 2

Use this:

function escapeHTML(str)
{
   var div = document.createElement('div');
   var text = document.createTextNode(str);
   div.appendChild(text);
   return div.innerHTML;
}

Source: here