Recognize links in text content with jQuery

Find and replace URLs with anchor tags inside the text

Very often when you are dealing with content from 3rd party like tweets from Twitter of Facebook posts and comments you might end up with some URL inside the content.

On both Twitter or Facebook or any other social network, links inside text comments are replaces with anchor tags to those URLs. In order to keep the same user experience and make it more useful o your side where you are serving the content from the other party it is recommended that you do the same.

Of course, this is a lot easier in the back-end (at least for me) but doing it on client side has its advantages. Most of the leading platforms and APIs allow fetching content directly from the front end and this is great because you can do the content pulling after your page is loaded. If you are doing this on the back-end, you are delaying page load.

The easiest way to manipulate with the text in pretty much any programming language is with regular expressions, so for this case I used them as well.

Note

You do not have to be master of Regular Expressions to do some basic text manipulation. You can find most of the regular expressions at http://regexlib.net/

Of course this is something you most likely are not going to use only once, so it makes sense to make it somehow reusable for all the projects you might need it for.

I could not think of the better way to make it reusable than to create a jQuery plugin for wrapping this.

(function ($) {
    $.fn.LinkRecognition = function (options) {
        var defaults = {
            cssClass: '',
            target: '_blank'
        }
        var settings = $.extend({}, defaults, options);
        var selector = $(this);
        var regex = /(https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w\/_\.]*(\?\S+)?)?)?)/ig
        $(selector).html($(selector).html().replace(regex, "<a href='$1' target='" + settings.target + "' class='" + settings.cssClass + "'>$1</a>"));
    }
})(jQuery);
    

This way it is pretty easy to use it anywhere in any web project you might have. Just apply the plugin to elements from jQuery selector:

$(document).ready(function () {
            $(".content").LinkRecognition(
                {
                    target: "_blank",
                    cssClass: "external-link"
                }
            );
        });
    

You can see that I added some options which you might need when applying the plugin:

  • target - Target property of the anchor tag that will be created for URL text.
  • cssClass - Css class to be applied to newly added anchor tags.

You ca easily extend it with some new options if you might need them. This micro project is hosted on GitHub at https://github.com/dejanstojanovic/Link-Recognition so you can contribute to it and add some useful options.

References

Disclaimer

Purpose of the code contained in snippets or available for download in this article is solely for learning and demo purposes. Author will not be held responsible for any failure or damages caused due to any other usage.


About the author

DEJAN STOJANOVIC

Dejan is a passionate Software Architect/Developer. He is highly experienced in .NET programming platform including ASP.NET MVC and WebApi. He likes working on new technologies and exciting challenging projects

CONNECT WITH DEJAN  Loginlinkedin Logintwitter Logingoogleplus Logingoogleplus

.NET

read more

SQL/T-SQL

read more

Umbraco CMS

read more

PowerShell

read more

Comments for this article