Escape HTML inside element code - No jQuery

Question

Escape HTML inside element code - No jQuery

Navigation

#1 by (2 votes)
#2 by (0 votes)

2

Good evening. I'm developing a chat and I'm breaking my head here in one part. I get the text, I deal with it, I check what img or link is and I just put it inside the <img> and <a> tags, respectively. If it is not a link, an image or text, I encapsulate with <code> . So the result ends up like this:

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 that's inside the CODE tag giving the famous escape in html? The end result should look like this, I think:

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?;

Thank you

javascript html

asked by anonymous 01.07.2018 / 02:37

2 answers

0

Use this:

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

Source: here

01.07.2018 / 02:50

CSS gradient with image Using shapes with CSS

score 2 · Accepted Answer

You can do this by using some methods to find the snippets within <code></code> and make the substitutions (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;