All the posts on this blog contain code which has been reformatted as HTML. This would be incredibly tedious to do by hand so I put together this little web application to do the job for me.

The Problem

Copying and pasting JavaScript into an HTML document just isn't going to work. We need to, at the very least, carry out the following substitutions to produce something a browser will render as we want it:

• Replace tabs with     . If we don't do this the browser will just show one space. (Of course, you might have different ideas about the size of a tab!)


• Replace linefeeds with </br>\n. The \n isn't necessary for the browser, but does format the raw HTML better.


• Code written on a Windows system will have a carriage return as well as a linefeed - these need to be deleted, or specifically replaced with an empty string.


• Spaces need to be replaced with &nbsp;. Single spaces are shown correctly by browsers, but multiple spaces are shown as only one space. If we have code using four spaces instead of tabs for example, these will not render correctly unless we replace each space with &nbsp;.


• The < and > symbols need to be replaced with &lt; and &gt; respectively, or the browser will try to interpret them as HTML tags.

The Solution

The screenshot below shows a (somewhat shrunken!) version of the application. The two large areas at the top are just textareas, and the underlying JavaScript just handles the button click events.

The project consists of a set of files including the HTML file shown above, a CSS file, a graphic and the central JavaScript file. You can download them as a zip, or clone/download from Github if you prefer.

Source Code Links

ZIP File
GitHub

This is the listing for the js2html.js file.

js2html.js

window.onload = function()
{
    document.getElementById('inputtext').value = "Type or paste JavaScript here and click Go...";
    document.getElementById('outputtext').value = "JavaScript formatted as HTML appears here";

    document.getElementById('gobutton').onclick = function(){go();};
    document.getElementById('copybutton').onclick = function(){copy();};
    document.getElementById('clearinputbutton').onclick = function(){clearInput();};
    document.getElementById('clearoutputbutton').onclick = function(){clearOutput();};
}


function go()
{
    let mappings = getMappings();
    let inputtext = document.getElementById('inputtext').value;
    let outputtext = "";

    for(let c = 0, l = inputtext.length; c < l; c++)
    {
        outputtext += mappings[inputtext[c].charCodeAt(0)];
    }

    document.getElementById('outputtext').value = outputtext;
}


function copy()
{
    document.getElementById("outputtext").select();

    document.execCommand("Copy");
}


function clearInput()
{
    document.getElementById('inputtext').value = "";
}


function clearOutput()
{
    document.getElementById('outputtext').value = "";
}


function getMappings()
{
    mappings = [];

    // initialize to default values
    for(let i = 0; i <= 127; i++)
    {
        mappings[i] = String.fromCharCode(i);
    }

    // overwrite values we want to replace

    // tab
    mappings[9] = "    ";

    // linefeed
    mappings[10] = "</br>\n";

    // carriage return
    mappings[13] = "";

    // space
    mappings[32] = " ";

    // <
    mappings[60] = "<";

    // >
    mappings[62] = ">";

    return mappings;
}

In the onload function the text in the two textareas is set, and then click event handlers set for the four buttons.

The go function is central to the application, and firstly calls getMappings to create an array which maps input characters to output characters or strings. I will explain it fully in a moment. We then pick up the text in the input textarea (ie. raw source code) and also create an empty string for the output (ie source code formatted as HTML). We then iterate the input, adding the corresponding character or string from the mappings array to the output. Lastly the output textarea value is set to the output string.

Next comes the copy function which just copies the contents of the output textarea to the clipboard, ready for pasting into a web page.

We then have a couple of clear functions, one for each textarea.

Finally we have the getMappings function. This creates an array with 128 elements representing the characters of the ASCII set, the codes of which are the indexes of the array. The actual values of the array are the characters or strings which will replace the corresponding input characters.

Most characters will be passed to the output unchanged, for example 'A' maps to 'A'. However, '<' maps to '&lt;' and so on, as per the above list. We therefore initially set all values to the character equivalents of the indexes, eg. mappings[65] will be 'A' and so on. We then overwrite the few we need to change, so mappings[9] (tab) will become &nbsp;&nbsp;&nbsp;&nbsp; etc.

The mappings are restricted to ASCII, ie. 0 to 127. They do not include extended ASCII (128 to 255), which is non-standard and should be avoided at all cost, and Unicode also is not supported. The probability of me using anything other than standard ASCII in source code is close to 0 so this shouldn't be a problem.