Replace symbols < /> with Javascript

Question

I’d like to know how to replace the symbols < /> with Javascript. I’m using the tag <code></code> to display a code, but I don’t want it to be rendered in the browser. I know I can use < and > to display a <tag/> like this, but would like to know if there is a way to make Javascript do it for me, search for the symbols and automatically replace so that the code is not rendered.

I know there are utilities like Syntax Highlighter, but for this case I only need to display the code on a single page and I don’t think it would be interesting to add it to the page.

Answer 1

Tampering with HTML in this way is not recommended. But be a controlled test so:

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

I used the replace() with a regular expression that catches what’s inside the bars />/g, and replaced by the other parameter. The g means multiple times. If it would not be only the first occurrence.

This method is destructive if applied again to the page since all tags, inclusve <script>, <style> are superimposed.

Example

I’ve been playing with this idea a little longer, I leave here the example.

Answer 2

Depending on your requirements, one option may be to use the tag xmp instead of a Javascript. It is "deprecated", but works on most browsers.

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

A more creative option is to use a textarea disabled and no edges:

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

A third option (kind of weird, hehe), would be to use a <iframe> referencing a text file with code.

However, I recommend that you even try changing the characters (manually or with the help of some tool), just as you indicated. If it is a dynamic code, you can do this using the language of your application on the server, and bring the code already formatted to the browser. For example, in PHP (beware only of possible security problems, preferably ignore tags <script>):

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

And if it’s static code, just use find/replace from your editor. = D