jQuery plug-in – highlight external links

I’m pretty new to the whole jQuery game, having really only started to look at in a number of weeks ago. Until then I have been happily using Prototype and Scriptaculous, and as I knew them I didn’t see a point to move to another library. However, the more examples I saw of jQuery the more elegant I thought it was, and so now am in the process of learning it more, converting some code over and trying my hand at plug-ins. So here’s introducing my first jQuery plug-in!

This plug-in allows you to automatically append a class and title to any external resources. You can pass in multiple domains that are thought of as ‘local’, and anything else with a protocol that doesn’t belong on the passed local domains will be flagged as external. If no domains are passed then the current domain in the url will be used as-is (with the www., etc., if present).

That probably doesn’t make much sense, but I’m sure it will when using it…

So here’s the code:

/**
 * External Links, jQuery plug-in.
 *
 * This plug-in allows you to automatically append a class and title to
 * any external resources.  You can pass in multiple domains that are
 * thought of as 'local', and anything else with a protocol that doesn't
 * belong on the passed local domains will be flagged as external.
 * If no domains are passed then the current domain in the url will be
 * used as-is (with the www., etc., is present).
 *
 * Examples of use:
 *
 *     $(document).ready(function() {
 *         $('body').externallink();
 *     });
 *
 *     $(document).ready(function() {
 *         $('#mainContent').externallink({
 *             localhosts: ['example.com', 'example.org', 'ex.com'],
 *             classname: 'externalResource',
 *             title_add: 'none'
 *         });
 *     });
 *
 * @copyright Copyright (c) 2008 Andrew Collington
 * @version $Id$
 */

(function($) {
    $.fn.externallink = function(options) {
    	var defaults = {
    		localhosts: [],
    		classname: 'external',
    		title_add: 'append', // none, append, overwrite
    		title_say: 'external resource'
    	};
    	var options = $.extend(defaults, options);
    	if ($.inArray(document.domain, options.localhosts) == -1) {
    	    options.localhosts.push(document.domain);
    	}

        $($($('a', this).get()).filter(function(){
            return this.firstChild.nodeType == 3 || this.firstChild.nodeName != 'IMG'
        }).filter(function() {
            var href = $(this).attr('href');
            if (/^(w+)://(.*)/.test(href) == false) return false;
            for (var h = 0; h < options.localhosts.length; h++) {
                if (href.indexOf(options.localhosts[h]) != -1) return false;
            }
            return true;
        }).get()).each(function(i, el){
            $(this).addClass(options.classname);
            if (options.title_add != 'none' && options.title_say.length) {
                if ('overwrite' == options.title_add) {
                    el.title = options.title_say;
                } else if ('append' == options.title_add) {
                    if (el.title) el.title += ' [' + options.title_say + ']';
                    else el.title = options.title_say;
                }
            }
        });
    };
})(jQuery);

A couple examples of using the plug-in:

$(document).ready(function() {
    $('body').externallink();
});
$(document).ready(function() {
    $('#mainContent').externallink({
        localhosts: ['example.com', 'example.org', 'ex.com'],
        classname: 'externalResource',
        title_add: 'none'
    });
});
Did you like this? Share it:

1 thought on “jQuery plug-in – highlight external links

Leave a Reply