Getting HTML to look like HTML on a web page

Question

On Stack overflow you can use ctrl k to make HTML look like HTML and not the output of it.

So something like

<div>
    <p>Hello world</p>
</div>

Instead of Hello World

I inspected the web page and it comes out like this

<pre>
  <code>
    &lt;div&gt;
    &lt;p&gt;Hello world&lt;/p&gt;
    &lt;/div&gt;
  </code>
</pre>

I am working on a project where I want to do something similar. I'm assuming it uses some some javascript function to perform this but I'm not really sure, anyone know how this works?

Answer 1

If you have support for PHP you could use the function htmlentities().

Answer 2

In JavaScript, you can use string.replace() to achieve the same.

For example:

var string = '<h1> Hello </h1>'
console.log(string.replace(/</g, '&lt;').replace(/>/g, '&gt;'));
// "&lt;h1&gt; Hello &lt;/h1&gt;"

Answer 3

You are correct that HTML has to be Html-encoded in order to see the brackets. The < symbol is encoded as &lt; (less than), while the > symbol is encoded as &gt; (greater than).

So the question is how do you do that automatically without having to remember to do it.

You may want to check out syntax highlighter:

Syntax Highlighter: http://alexgorbatchev.com/SyntaxHighlighter/

You can also use the string replace and write your own function as sarbbottam suggests.

Answer 4

You could try this:

function preIt(code){
    code = code.replace(/[&<>]/g, function(tag){
        return {'<' : '&lt;', '>' : '&gt;', '&' : '&amp;'}[tag];
    });
    return "<pre>"+code+"</pre>";
}

Usage:

document.write(preIt("<div><p>Hello world!</p></div>"));

The function takes HTML code as its input and then performs a RegEx replace on the code. It uses a callback function to replace the matched characters with the appropriate HTML entity code.

Alternatively, you could implement the code in this answer.

Answer 5

StackOverflow is merely moving the selected lines over using 4 spaces when you select lines within the <textarea> element, which then is used as markup that can be detected via JavaScript. It would look something like the following:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<textarea id="myTextarea" style="width:500px;height:400px;"></textarea>
<button id="clickme">Click me!</button>

<script>
    $('#clickme').on('click', function() {
        var value = document.getElementById("myTextarea").value.replace(/(\n|^)[ ]{4}([^\n]*)/g, function(c) {
            // console.log('found! c ==', c, '; arguments ==', arguments);

            var lineData = arguments[2];

            return "<pre><code>" + lineData.replace(/</g, '&lt;').replace(/>/g, '&gt;') + "</code></pre>";
        });

        // console.log('value ==', value);

        $('body').append(value);
    });
</script>

In the <textarea> place text such as the following, making sure that 4 spaces lead before each line that needs to be formatted as displayable HTML:

<div>
    Hello world!<br />
</div>

Then finally click the "Click me!" button. jQuery was used in this code example for brevity.

Answer 6

So I ended up using the .html() method of jquery to format the html

$( "p" ).click(function() {
  var htmlString = $( this ).html();
  $( this ).text( htmlString );
});

here's the documentation http://api.jquery.com/html/

and a fiddle http://jsfiddle.net/arh6E/