Find External Links Using jQuery

  • Avinash
  • 4
  • Feb 29, 2012
  • Tips & Tricks

What if you want to stylize all your external link with some different style. There are two options.

  1. Seach for each link and give different class to it
  2. Follow this article

Yes, This article is about to explain about searching for all external links and add one more class to it.

Here we will use jQuery to search all the external links. Here I will show different technique to search for all external links. We will search for all external links and add one more class “external_link” to those links.

Technique 1

$('a').filter(function() { return this.hostname && this.hostname !== location.hostname; }).addClass("external_link");
  $('a').filter(function()
  {
     return this.hostname && this.hostname !== location.hostname;
  }).addClass("external_link");

Technique 2

$('a').each(function() { var reg_exp = new RegExp('/' + window.location.host + '/'); if (!reg_exp.test(this.href)) { // External Link Found this.addClass("external_link") } });
$('a').each(function()
{
   var reg_exp = new RegExp('/' + window.location.host + '/');
   if (!reg_exp.test(this.href))
   {
     // External Link Found  
     this.addClass("external_link")
   }
});

So this is what we can do to find all external links and stylize them bit differently. Hope this will be useful for you when you really this. If you have more techniques to achieve this then its great to share over here.

Related Posts

Written by Avinash

Avinash Zala is leading various projects which deals with the various technology involved with the web. A combination of perfect technical and management skills. Avinash would like to chat with you and convert your imagination into the working system. You can get in touch with him on Facebook and Twitter.

View all posts by: