hacking and gonzo since 2000

Format syntax JS implementation

In both Skeletonz and Todoist a special format syntax is used to decorate text, an example is:

%(ui) Underlined and italic text%

The above syntax gets transformed into following HTML:

<u><i>Underlined and italic text</i></u>

Implementing this in JavaScript

Formatter = {
    tag: '<%(tag)>%(text)</%(tag)>',
    b_u_i_matcher: /[bui]{1,3}/gi,
    style_matcher: /%\((.+?)\)\s*(.+?)%/g,

    formatText: function(text) {
        var handler = function(g0, g1, g2) {
            var m = g1.match(Formatter.b_u_i_matcher);
            if(m) {
                var result = g2;
                AJS.map(m[0].split(''), function(deco) {
                    var d = {tag: deco, text: result};
                    result = AJS.RND(Formatter.tag, d);
                });
                return result;
            }
            return g0;
        }
        return text.replace(Formatter.style_matcher, handler);
    }
};

Notice the nice usage of map and RND from AJS. Example usage is:

alert(Formatter.formatText("%(ui) Underlined and italic text%"));
//Will yield <i><u>Underlined and italic text</u></i>

Code · JavaScript · Tips • 3. Mar 2007