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: 97777
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 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.

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

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 Follow her on twitter @ saffronstroke

Page copy protected against web site content infringement 	by Copyscape

Feedback - Leave us some adulation, criticism and everything in between!