HTML Escaper

Yesterday I posted a tutorial, and the code I put up was displayed in images. I was not satisfied with that solution, because images are not searchable and also you won't be able to copy and paste the code. So I needed to find some way to display my code on this blog. It automatically parses HTML, so if I just put the code up, it would render instead of displaying the code. So I decided to write a small program to escape HTML so it can be displayed on this blog.

It's fairly simple, and probably not robust enough at this point for general use. Basically all it does is change < to &lt;, > to &gt;, tabs to four &nbsp;'s, spaces to &nbsp;, and newlines to <br />. This should be good enough for most code, but if you need it do more things, it's easy enough to update the function.

What I want to do is have a textarea on the page where you can put in your HTML code, and click a button which will escape it. Then it takes the escaped code and gives it to you in a couple of ways. First, obviously, you will need the code in a form that you can copy and paste it into an HTML form and it will display properly (after all, that's the point). To do this, I've made a second textarea that will hold the escaped text. But that escaped code looks like gibberish, really, and it's not easy to tell how it'll look. So this program also renders your text at the bottom of the page, so you can see what it will look like once it's been escaped.

Here's the HTML:

<textarea id='source' rows='20' cols='40'></textarea>
<input type='submit' value='Escape' onclick='do_escape();' />

<textarea id='resultcode' rows='20' cols='40'></textarea>
<div id='result'></div>

(I used the Escaper program to generate that, in case you were wondering if it works. It does not make the border or change the font, I had to do that manually.)

As you can see, the interface code for this program is quite simple, but it works very well. The Javascript is equally straightforward. The do_escape() function calls the html_escape() function once, and puts the same escaped text into both the "result" and "resultcode" fields.

    function do_escape() {
        var esc = html_escape(_$("source").value);
        _$("result").innerHTML = esc;
        _$("resultcode").value = esc;
    }

The html_escape() function does the meat of the work in this program, but is actually very easy to understand, and is even easier to implement. Basically, it takes a string and goes through it character by character. If the character being examined doesn't need to be escaped, it is just passed along. Otherwise, it is replaced by its escaped version. The fully escaped string is returned once it is ready.

    //need to convert the given string into html-escaped form
    function html_escape(string) {
        var rval = "";
        for (var i=0; i < string.length; i++) {
            switch (string[i]) {
                case "<":
                    rval += "&lt;";
                    break;
                case ">":
                    rval += "&gt;";
                    break;
                case "\t":
                    rval += "&nbsp;&nbsp;&nbsp;&nbsp;";
                    break;
                case " ":
                    rval += "&nbsp;";
                    break;
                case "\n":
                    rval += "<br />";
                    break;
                case "&":
                    rval += "&amp;";
                    break;
                default:
                    rval += string[i];
                    break;
            }
        }
        return rval;
    }

You can put this code onto your local server and leave it going in a tab in the background for every time you need it. Next time you want to post code in a forum, you don't have to wonder if the forum will render your code as text or as HTML. If you want it displayed as code, just escape it yourself!

I would have loved to be able to put a demo of it right onto the page, but it seems that that won't work. You'll just have to put it on your own machine and run it from there. Enjoy!