JavaScript Anchor addClass condition

[Iva]

Hello,
I can add a class when the link goes to my own website. This works fine:

$("a[href^='https://mywebsite.com']").addClass("link-is-internal");

Does anyone here know how to create a condition to add the link-is-external class when the link points outside of my website?

Thank you very match!
Iva

 

[Johna]

I would use an if else condition to check if the link's href attribute is https://mywebsite.com. If it is, then add the link-is-internal class name, otherwise add the link-is-external class name.

var links = $("a").toArray();

for (link of links) {
  if ($(link).attr("href") == "https://mywebsite.com") {
    $(link).addClass("link-is-internal");
  } else {
    $(link).addClass("link-is-external");
  }
}

 

[Iva]

Thank you, but that won't work well unfortunately 😢. I am looking for a solution for any address that starts with https://mywebsite.com. For example

https://mywebsite.com/news.php

etc.

 

[Johna]

I am looking for a solution for any address that starts with https://mywebsite.com.

You can use the startsWith() method.

var links = $("a").toArray();

for (link of links) {
  if ($(link).attr("href").startsWith("https://mywebsite.com")) {
    $(link).addClass("link-is-internal");
  } else {
    $(link).addClass("link-is-external");
  }
}

 

[Iva]

This solution returns:
Uncaught TypeError: Cannot read properties of undefined (reading 'startsWith') at news.php:1051:27.

My code is:

var links = $("a").toArray();
for (link of links) {
  if ($(link).attr("href").startsWith("http://d17.luskdesign.cz/")) {
    $(link).addClass("link-is-internal");
  } else {
    $(link).addClass("link-is-external");
  }
}

The actual address of my website is here http://d17.luskdesign.cz/news.php .

 

[Johna]

Add $(link).attr("href") != undefined to the condition to make sure the value of the href attribute is defined.

var links = $("a").toArray();

for (link of links) {
  if ($(link).attr("href") != undefined && $(link).attr("href").startsWith("https://mywebsite.com")) {
    $(link).addClass("link-is-internal");
  } else {
    $(link).addClass("link-is-external");
  }
}

 

[Iva]

Great! Now it no longer returns an error. Tank you very much!!!

I also have links on the web page without the href attribute, for example in dropdown menu items. This solution adds the link-is-external class to them. How can I skip these links without href attribute in this script please?

 

[Iva]

... i tried this solution but it didn't help.

const attr = $('a').attr('href');
if ( typeof attr !== 'undefined' && attr !== false ) {
    var links = $("a").toArray();
    for (link of links) {
        if ($(link).attr("href") != undefined && $(link).attr("href").startsWith("https://mywebsite.com")) {
            $(link).addClass("link-is-internal");
        } else {
            $(link).addClass("link-is-external");
        }
    }
}

 

[Johna]

You could use an else if statement instead of else:

var links = $("a").toArray();

for (link of links) {
  if ($(link).attr("href") != undefined && $(link).attr("href").startsWith("https://mywebsite.com")) {
    $(link).addClass("link-is-internal");
  } else if ($(link).attr("href") != undefined) {
    $(link).addClass("link-is-external");
  }
}

 

[Iva]

You are a genius! Thank you very much. You helped me a lot.