3

Gostaria de saber como faço para substituir os símbolos < /> com Javascript. Estou usando a tag <code></code> para exibir um código, porém não quero que ele seja renderizado no navegador. Sei que posso usar &#60; e &#62; para exibir uma <tag/> assim, mas gostaria de saber se existe uma maneira de fazer o Javascript fazer isso por mim, procurar os símbolos e substituir automaticamente para que o código não seja renderizado.

Sei da existência de utilitários como o Syntax Highlighter, mas para esse caso só preciso exibir o código numa única página e não acho que seria interessante adicionar ele a página.

3
  • Já experimentou usar o DOM e os TextNode diretamente?
    – luiscubal
    30/03/2014 às 23:11
  • @luiscubal, desculpe não ter respondido antes, nem havia reparado seu comentário... Como eu faria isso que você disse?
    – Wagner'
    12/04/2014 às 15:21
  • 1
    var textNode = document.createTextNode("Meu código"); codeNode.appendChild(textNode);
    – luiscubal
    12/04/2014 às 19:27

2 Respostas 2

4

Mexer no HTML dessa maneira é desaconselhado. Mas fôr de maneira controlada teste assim:

var conteudo= $('body').html(); // body ou o elemento que preferir
// apanhar comentários
conteudo = (conteudo.replace(/<!--/g, '&#60;&#33;&#45;&#45;')).replace(/-->/g, '&#45;&#45;&#62;');
// apanhar elementos
conteudo = (conteudo.replace(/</g, '&#60;')).replace(/>/g, '&#62;');
$('body').html('<pre>' + conteudo + '</pre>'); // juntei as tags <pre> para manter a formatação do código

Usei o replace() com uma expressão regular que apanha o que está dentro das barras />/g, e substitui pelo outro parâmetro. O g quer dizer multiplas vezes. Se não seria só a primeira ocorrência.

Este método é destrutivo se aplicado de novo à pagina uma vez que todas as tags, inclusve <script>, <style> são sobrepostas.

Exemplo

Estive a brincar mais um pouco com esta ideia, deixo aqui o exemplo.

2

Dependendo dos seus requisitos, uma opção pode ser usar o tag xmp em vez de um Javascript. Ele está "deprecated", mas funciona na maioria dos browsers.

<xmp>
   <a href="blabla">bleble</a>
   <h1>Teste 123</h1>
</xmp>

Uma opção mais criativa é usar um textarea desativado e sem bordas:

<textarea disabled="true" style="border: none;background-color:white; width:500px; height: 300px;">
  <a href="blabla">bleble</a>
  <h1>Teste 123</h1>
</textarea>

Uma terceira opção (meio esquisita, hehe), seria usar um <iframe> referenciando um arquivo de texto com código.

Entretanto, recomendo que você tente mesmo trocar os caracteres (manualmente ou com a ajuda de alguma ferramenta), assim como você já indicou. Se for um código dinâmico, dá para fazer isso usando a linguagem da sua aplicação no servidor, e trazer o código já formatado para o browser. Por exemplo, em PHP (cuidado apenas com possíveis problemas de segurança, de preferência ignorar tags <script>):

htmlspecialchars('<h1>Teste 123</h1>')

E se for um código estático, é só usar o find/replace do seu editor. =D

4
  • A abordagem do xmp/textarea não funciona se o texto contiver </xmp></textarea><script>alert('boom!');</script>.
    – luiscubal
    30/03/2014 às 19:39
  • <xmp><script>alert('boom!');</script></xmp> funciona normalmente para mim (chrome).
    – Michael
    30/03/2014 às 20:10
  • Mas se tiver <xmp>$texto</xmp> e $texto for </xmp><script>alert('boom');</script>, então fica <xmp></xmp><script>alert('boom');</script>, que executa o script.
    – luiscubal
    30/03/2014 às 22:21
  • Ah sim, é verdade, vou adicionar um comentário.
    – Michael
    30/03/2014 às 22:22

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 .