Parsing Strings With jQuery

Regular Expressions is a powerful tool when parsing and validating strings. And combining regular expressions with the simplicity of jQuery selectors can create some fast and useful string parsers. This post will show you a couple of really useful parsers that you can use in various environments, or as a base to create your own.

Regular expressions introduction

Virtually any modern programming language supports regular expressions. Regular expressions are used to parse or match strings with patterns using a certian language that the program intercepts and parses to generate a result. From wikipedia:

In computing, regular expressions provide a concise and flexible means for identifying strings of text of interest, such as particular characters, words, or patterns of characters. Regular expressions (abbreviated as regex or regexp, with plural forms regexes, regexps, or regexen) are written in a formal language that can be interpreted by a regular expression processor, a program that either serves as a parser generator or examines text and identifies parts that match the provided specification.

This article is not meant to be used as a learning tool for how to use regular expressions, instead I will show you how to integrate regular expressions with jQuery to create powerful string parsers.

If you’d like to view the examples right away, here is a HTML sample file.

Extending jQuery with chainable plugins

By offering a simple mechanisms for creating plugins, jQuery can easily be extended with custom methods. We are going to take advantage of that in this article by creating chainable jQuery methods that parses the selector’s html content. Let’s start with A bullet-proof frame for chainable jQuery plugins:

There. The first <script> line simply adds the jQuery core. The second script contains the plugin frame we are going to use. I always wrap jQuery methods and plugins in a private function that uses the $ to reference jQuery to avoid conflicts with other frameworks using the $ sign. Now, let’s add some regular expressions.

First example: strip HTML tags

As a simple first example, let’s create a simple method for stripping out HTML tags from the selector’s content. This is how I would like to use it later on:

$('p').stripHtml();

Ok, so let’s create the core functionality inside the plugin. First we assign a regex to a variable. This regular expression will match all HTML tags, including the tricky <span class=">">:

var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;

Note the gi after the ending slash - they stand for global and case insensitive, meaning that it will match every instance and ignore cases. Continuing with the parser, let’s apply this regex to the selector’s content:

$(this).html(
    $(this).html().replace(regexp,"")
);

Using our expression and the javascript replace method, we now replace the matching HTML tags with nothing (”"). Using the jQuery html() method, we also replace the old html content of the selector with the parsed string. All we have to do now is to wrap it up and add our code into the plugin frame:

(function($) {
    $.fn.stripHtml = function() {
        var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
        this.each(function() {
            $(this).html(
                $(this).html().replace(regexp,”")
            );
        });
        return $(this);
    }
})(jQuery);

Second example: clickable URLs

Using the same principle, let’s create another plugin that matches all URL’s and replaces them with a wrapping anchor link:

$.fn.clickUrl = function() {
        var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
        this.each(function() {
            $(this).html(
                $(this).html().replace(regexp,'$1‘)
            );
        });
        return $(this);
    }

Note the new regex that matches all URL’s inside the string and the $1 reference in the replace method that brings the first matching paranthese into the replaced string. In this example, we simply bring the matching url and wrap it inside an anchor tag. You might have to escape the quotes with backslashes.

Third example: escape HTML

Escaping HTML can be useful in some situations. As an example, I can definetely see the benefit of doing something like $('pre').escapeHtml() to render HTML tags correctly inside each preformated element. Doing so, there is no need to use a complicated regexp string, instead we can chain several replace methods to match and replace each instance of HTML 2 entities (a normal pre tag is used here to preserve character rendering):

$.fn.escapeHtml = function() {
        this.each(function() {
            $(this).html(
                $(this).html()
                    .replace(/"/g,""")
                    .replace(/</g,"&lt;")
                    .replace(/>/g,"&gt;")
                    .replace(/&/g,"&amp;")
            );
        });
        return $(this);
    }

Source

I have included all three examples with some simple test strings in a HTML sample file. Just view the HTML source to see how they are implemented and used.