Question

See line 8 in the code below, with the comment:

<script>
$(function(){
    $.getJSON('http://twitter.com/status/user_timeline/TWITTER.json?count=1&callback=?',twitterJSON);
    function twitterJSON(data){
        var twitterOut     = '<p>'+data[0].text+'</p><strong>- '+data[0].user.name+'</strong>';
        var twitterOutAt   = twitterOut.replace(/\B@([\w-]+)/gm,'<a href="http://twitter.com/$1">@$1</a>');
        var twitterOutHash = twitterOutAt.replace(/\B#([\w-]+)/gm,'<a href="http://search.twitter.com/search?q=$1">#$1</a>');
        var twitterOutDone = twitterOutHash.replace(/(href="|<a.*?>)?[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/g,'<a href="$1">$1</a>'); // not working :(
        $('.twitter').html(twitterOutDone);
    }
});
</script>

Any help refactoring the code would be very much appreciated!

For example: there must be a way to chain .replace so one doesn’t have to assign a new var again and again. I’ve tried var twitterOut.replace().replace()... but that doesn’t seem to work 🙁

Answer 1

Here is the working function I use:

jQuery.fn.urlize = function() {
    if (this.length > 0) {
        this.each(function(i, obj){
            // making links active
            var x = $(obj).html();
            var list = x.match( /\b(http:\/\/|www\.|http:\/\/www\.)[^ <]{2,200}\b/g );
            if (list) {
                for ( i = 0; i < list.length; i++ ) {
                    var prot = list[i].indexOf('http://') === 0 || list[i].indexOf('https://') === 0 ? '' : 'http://';
                    x = x.replace( list[i], "<a target='_blank' href='" + prot + list[i] + "'>"+ list[i] + "</a>" );
                }

            }
            $(obj).html(x);
        });
    }
};

In your case:

$('.twitter').urlize();