2

Boa noite. Estou desenvolvendo um chat e estou quebrando a cabeça aqui em uma parte. Eu capturo o texto, trato ele, verifico o que é img ou link e apenas coloco dentro das tags <img> e <a>, respectivamente. Caso não seja um link, uma imagem ou texto, eu encapsulo com <code>. Então o resultado acaba ficando assim, por exemplo:

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

E minha dúvida é: Como eu pego tudo que está ai dentro da tag CODE dando o famoso escape no html? O resultado final deveria ficar assim, creio eu:

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

Obrigado

3

2 Respostas 2

2

Pode fazer desta forma usando alguns métodos para encontrar os trechos dentro de <code></code> e fazer as substituições (explicações no código):

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;

3
  • 1
    Exatamente isso. Obrigado, DVD! Commented 1/07/2018 às 3:18
  • Obg! Refiz o código, ficou bem mais simples agora. Atualiza aí. Abs!
    – Sam
    Commented 1/07/2018 às 4:20
  • Obrigado mais uma vez, DVD! Commented 1/07/2018 às 4:33
0

Use isto:

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

Fonte: aqui

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .