Test If Links Are External With Jquery Javascript

Do you ever find yourself wondering whether a link on your website is directing users to an external site? If so, fret not! In this article, we'll dive into how you can test if links are external using jQuery JavaScript.

External links can be a point of concern for website owners as they can lead users away from their site. Fortunately, with a simple jQuery script, you can easily identify and handle these external links.

Let's start by understanding the basic structure of a link in HTML. A typical anchor tag for a link looks something like this:

<a href="https://example.com">External Link</a>

To check if a link is external, we need to look at its `href` attribute. If the `href` starts with "http://" or "https://", it is considered an external link.

Now, let's move on to the jQuery implementation. First, make sure you have jQuery included in your project. You can do this by adding the following script tag in your HTML file:

Next, create a script tag where you'll write the jQuery code to test if links are external. Here's a simple jQuery script to achieve this:

$(document).ready(function() {
  $('a').each(function() {
    if (this.hostname && this.hostname !== window.location.hostname) {
      $(this).addClass('external-link');
    }
  });
});

In this script, we are selecting all anchor (``) elements on the page and iterating over each of them. We then check if the `hostname` of the link is not equal to the `hostname` of the current window. If they are different, we add a class `external-link` to the link.