Implementing AutoCorrect in JavaScript

Although I like PmWiki and BlogIt for their simplicity, I sometimes miss a feature or two from the content-management software I developed. I prefer using Markdown to Wiki syntax when writing posts, and fortunately there's a recipe for that. There is no recipe (as of this writing) for the second feature I miss: auto-correct. The software I wrote would replace various combinations of characters with nicer-looking replacements -- such as (R) with ®, (C) with ©, straight quotes with curly quotes, etc. Maybe I've just been spoiled by the implementation of the feature in LibreOffice, but having to look at straight quotes and uncorrected copyright symbols seems a little jarring. I mean, if the technology exists to make your text beautiful, why not use it wherever it can be used?

It has occurred to me that I could simply rewrite my original software to be more like PmWiki: to use the file system instead of a database while retaining the features that I want. But, since my free time is limited, my primary focus remains on writing a computer language and then a game engine. It was quicker to write a post-processing script that would run after each page on the site loads, subtly tweaking the items that needed to be adjusted until the page looked the way I wanted it to look.

Why a Script?

There were a couple of considerations that pointed toward a client-side solution rather than a server-side solution. The first consideration was that, in order to implement auto-correct, I would need access to the text of each page as it was rendered. PmWiki has a function that can be used to insert a routine that will process code contained in custom wiki markup, and you can specify when that routine is executed in the rendering pipeline. The trouble is that, after trying it, I discovered at no point does your custom routine seem to have access to just the rendered text of the page -- not even with the _end option. My routine ended up correcting the URLs inside of generated links, resulting in invalid links. I could have specified a number of regular expressions to filter out <a> tags, as well as other tags that I wanted to avoid, but that would have needlessly complicated the code.

I next attempted to alter the Markdown recipe so that the text contained within Markdown-formatted posts would have the desired corrections applied to it. This ran into similar problems: the addresses of some links were being reformatted, resulting in invalid links. Furthermore, only the text of the posts was affected; the titles and links on the sidebar were exempt from this processing. I needed a way to single out just the text of the rendered page -- all of the text.

The DOM provides just such a way. The text associated with each HTML element is contained within a Text node, which is a child of the node that represents the HTML element. Thus, the text of a link such as:

is represented (in a somewhat simplified form) as:

• Element { tagName: "A"; href: "http://www.circusmachina.com"; ... };
  • Text { nodeValue: "Behold -- my glorious home page!"; ... };

Note how only the text between the <a> and </a> elements is included in the text node; the text of the link itself is contained within an attribute of the anchor node. Changes to the contents of the text node will not invalidate the link itself; text nodes are self-contained. If it could get access to just the text nodes in the document, then an autocorrect routine could run without fear of altering something crucial.

The DOM provides a way to do that, too: a method called createTreeWalker(), which returns an iterator (a TreeWalker) that allows you to iterate through a list of nodes that is filtered based on specific criteria. One of the criteria that can be specified is NodeFilter.SHOW_TEXT which, when specified by itself, ensures the list contains only Text nodes. Since the DOM provided what I sought, JavaScript became the natural choice for implementing the autocorrect feature; and by tying the autocorrect routine to the onLoad event of the document body, I could ensure that the routine ran after the page had been rendered (and thus, after the DOM had been fully-constructed).

Using the Code

To use the code, simply include it in your header, either directly or by reference, and then call DocumentText.autoCorrect() at some point. I call the routine in response to the body.onLoad event, but you may wish to call it at a different point in time.

DocumentText.autoCorrect() accepts a couple of parameters that are designed to make the code more flexible:

Specifying Languages

One thing that occurred to me is that the corrections I want, which make sense in the English language (the U.S. flavor, anyway), may not be grammatically correct or even desired in other languages. Thus, it is possible to specify a language code as part of the Corrections namespace; the same code can be used when calling DocumentText.autoCorrect() to ensure that only the corrections for that language are applied. I fill this parameter with the value of navigator.language, but you can also hard-code a value if desired. If the language specified is not found in the Corrections namespace, then the routine will fall back on the one defined by Corrections.defaultLanguage.

Specifying Items to Ignore

Further testing on my own page showed that there are times when you don't want corrections to be applied: such as in the middle of a piece of code. If your user wants to cut and paste the code directly into her IDE of choice, then the code may not run properly if the straight quotes have been replaced with curly quotes. Therefore it is also possible to specify an array of strings that names elements which should be ignored when calling DocumentText.autoCorrect(). I use this functionality to prevent corrections from occurring inside of <code> elements, as well as to elements to which certain CSS classes have been applied. The strings passed as part of this array can be formatted as follows:

• class: name of CSS class - Use this to specify the name of a class that, if applied to an element, should cause the text of the element to be ignored. The routine checks to see whether the parent of the text node has the named class in its classList property and, if so, the text is ignored.
• nodeName: name of an HTML node - Use this to specify an element, such as CODE that should be ignored when it is encountered. The routine checks to see whether the text node is a child of an element whose tagName property matches the one specified, and ignores the text if it is.
• You can also specify a name without a prefix, in which case it is taken to represent the id of an element whose text should be ignored.

The Code

You can download the code here, and it is listed below, although the version of GeSHi used by the the source block recipe for PmWiki seems to have difficulty with the JavaScript regular expressions in the source.