Javascript – Issue with Language-based Redirection on Homepage

I have a JavaScript code snippet that performs language-based redirection on my website. The code works fine on all pages except for the homepage. On the homepage, it adds "en/en" or "ar/ar" to the URL if the browser language is English or Arabic, respectively. I need assistance in resolving this issue.

Here’s the code I’m using:

window.addEventListener("DOMContentLoaded", function() {
  console.log("DOMContentLoaded event triggered");

  var excludedUrls = ["/customer-center", "/en/customer-center", "/ar/customer-center", "/make-payment", "/make-payment/1", "/make-payment/2", "/make-payment/3", "/make-payment/4", "/make-payment/5", "/make-payment/6", "/en/make-payment", "/en/make-payment/1", "/en/make-payment/2", "/en/make-payment/3", "/en/make-payment/4", "/en/make-payment/5", "/en/make-payment/6", "/ar/make-payment", "/ar/make-payment/1", "/ar/make-payment/2", "/ar/make-payment/3", "/ar/make-payment/4", "/ar/make-payment/5", "/ar/make-payment/6", "/cart", "/en/cart", "/ar/cart"]; // Exclude these URLs from redirection
  var storedLang = localStorage.getItem('lang');
  var userLang;
  
  if (storedLang) {
    userLang = storedLang;
  } else {
    userLang = navigator.language || navigator.userLanguage; 
    userLang = userLang.substr(0,2).toLowerCase();
    localStorage.setItem('lang', userLang);
  }
  
  console.log("Chosen language:", userLang);

  var currentUrl = window.location.href;
  var baseUrl = currentUrl.split("/")[0] + "//" + currentUrl.split("/")[2];
  var path = currentUrl.substring(baseUrl.length);

  // Check if the current path is in the list of excluded URLs
  if (!excludedUrls.includes(path)) {
    if (userLang === "tr") {
      if (path.includes("/en/") || path === "/en") {
        window.location.href = baseUrl + path.replace("/en", "/");
      } else if (path.includes("/ar/") || path === "/ar") {
        window.location.href = baseUrl + path.replace("/ar", "/");
      } 
    } else if (userLang === "en") {
      if (path.includes("/ar/")) {
        window.location.href = baseUrl + path.replace("/ar/", "/en/");
      } else if (!path.includes("/en/")) {
        if (path === "/ar" || path === "/") {
          window.location.href = baseUrl + "/en/";
        } else {
          window.location.href = baseUrl + "/en" + path;
        }
      }
    } else if (userLang === "ar") {
      if (path.includes("/en/")) {
        window.location.href = baseUrl + path.replace("/en/", "/ar/");
      } else if (!path.includes("/ar/")) {
        if (path === "/en" || path === "/") {
          window.location.href = baseUrl + "/ar/";
        } else {
          window.location.href = baseUrl + "/ar" + path;
        }
      }
    }
  }
});

It seems that when the browser language is detected as English or Arabic on the homepage, the code adds an extra language segment to the URL, resulting in "en/en" or "ar/ar". However, this issue doesn’t occur on other pages.

I would appreciate any guidance on how to fix this problem and ensure that the code works correctly on the homepage. Thank you!

I tried implementing a language-based redirection code on my website’s homepage using the provided JavaScript snippet. I expected the code to correctly detect the browser language and redirect the user to the appropriate language version of the homepage (e.g., "/en" for English, "/ar" for Arabic). However, instead of redirecting to the correct language version, the code added an extra language segment to the URL, resulting in "en/en" or "ar/ar" on the homepage. This issue does not occur on other pages of the website. I would like to understand the cause of this problem and find a solution to ensure that the code functions correctly on the homepage.