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.
- 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 . 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 .
- The < and > symbols need to be replaced with < and > respectively, or the browser will try to interpret them as HTML tags.
Source Code Links
This is the listing for the js2html.js file.
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 '<' and so on, as per the above list. We therefore initially set all values to the character equivalents of the indexes, eg. mappings will be 'A' and so on. We then overwrite the few we need to change, so mappings (tab) will become 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.