Detect External and Internal Links in a Web Page using jQuery – Expression Web

Posted by: Minal Agarwal , on 1/8/2011, in Category Expression Web
Views: 76977
Abstract: In this article, I will show you how to use jQuery to detect External and Internal Links in a HTML Web Page created using Expression Web.

In this article, I will show you how to use jQuery to detect External and Internal Links in a HTML Web Page created using Expression Web. Once again, I would like to mention Suprotim's eBook ’51 Recipes using jQuery and ASP.NET Controls’ which has been very helpful and helped me learn how to use jQuery in my ASP.NET web pages.

Sometime back, I had written on Using jQuery to Open External Links in a New Window - Expression Web and Using jQuery UI Datepicker in a Web Page - Expression Web. In this article, we will adopt a different approach of identifying external links by using the jQuery filter function

Launch Expression Web and create a new HTML Page (File > New or click on the New Document icon on Standard toolbar and choose HTML). Add the jQuery library CDN link in the <head> element of the page.

jQuery CDN link

Now a link has various states (visited, hover, active etc). We can define CSS pseudo class selectors based on the state of the link. However for simplicity sake, let's just define one common css, as shown below:

external link css

Now add a couple of external as well as internal hyperlinks to the page. For this example, all the url’s beginning with http://www.dotnetcurry.com will be internal hyperlinks

external internal links

It’s now time to add some jQuery code to detect external and internal links on the page. Add the following jQuery code in the <head> tag

jquery external links

In the code show above, we are using this.href.match(/^mailto\:/) so that we do not select any mailto: links. We are also comparing the location.hostname (in our case dotnetcurry) against the link's hostname using this.hostname != location.hostname. This code is wrapped inside the jQuery filter function which returns only those elements which pass the code inside the function, in our case, all links that did not match the hostname property of the site. We finally take this group of matched elements and apply the CSS class (.external) we created above, using the jQuery addClass()

The output is as shown below:

external link demo

As you can observe, all external links are red in color with a dotted border. You can see a Live Demo over here

You can also download the entire source code over here.

Give me a +1 if you think it was a good article. Thanks!
Recommended Articles
Minal Agarwal, Expression Web MVP, MCDST, works as a freelance web designer (SaffronStroke) working on Expression Web, Photoshop and other Graphical tools. As a hobby, she also runs a famous Food site called Foodatarian.com. Follow her on twitter @ saffronstroke


Page copy protected against web site content infringement by Copyscape


User Feedback

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel