Переключатель языка для многоязычного сайта

Я написал код javascript для многоязычного сайта. Код работает отлично, но я чувствую, что у меня много повторяющегося кода. Мне было интересно, может ли кто-нибудь объяснить, как я могу сделать это проще или свести к минимуму. Я пытался использовать forEach(function (item, index) но похоже, что это не работает.

Это оригинальный код, который работает ….

(function () {
  var lang1 = "/en/"; //default language
  var lang2 = "/fr/"; //second language
  var lang3 = "/es/"; //third language

 var languageSwitcher = document.querySelectorAll("a[href="https://codereview.stackexchange.com/languages"]").forEach((el) => el.parentNode.classList.add("language-switcher"));
 document.querySelector("[data-folder="https://codereview.stackexchange.com/languages"]").classList.add("language-switcher");
  
  document.querySelectorAll(".language-switcher .header-nav-folder-item").forEach((el) => el.classList.add("languages"));
 document.querySelectorAll(".language-switcher .header-menu-nav-item:not(:first-child)").forEach((el) => el.classList.add("languages"));
  var languages = document.querySelectorAll(".languages");
  
  var language1 = document.querySelectorAll(".language-switcher .languages a[href*='"+lang1+"']");
  var language2 = document.querySelectorAll(".language-switcher .languages a[href*='"+lang2+"']")
  var language3 = document.querySelectorAll(".language-switcher .languages a[href*='"+lang3+"']")

  var windowURL = window.location.href;
  var pageURL = windowURL.split("/")[4];

  if (pageURL == undefined) {
    for (var i = 0; i < language1.length; i++) {
      language1[i].onclick = function () {
        var path = lang1 + "home";
        this.href = path;
      };
    }
    for (var i = 0; i < language2.length; i++) {
      language2[i].onclick = function () {
        var path = lang2 + "home";
        this.href = path;
      };
    }
    for (var i = 0; i < language3.length; i++) {
      language3[i].onclick = function () {
        var path = lang3 + "home";
        this.href = path;
      };
    }
  } else {
    for (var i = 0; i < language1.length; i++) {
      language1[i].onclick = function () {
        var path = lang1 + pageURL;
        this.href = path;
      };
    }
    for (var i = 0; i < language2.length; i++) {
      language2[i].onclick = function () {
        var path = lang2 + pageURL;
        this.href = path;
      };
    }
    for (var i = 0; i < language3.length; i++) {
      language3[i].onclick = function () {
        var path = lang3 + pageURL;
        this.href = path;
      };
    }
  }

 document.querySelectorAll(".header-nav-item:not(.language-switcher) a").forEach((el) => el.classList.add("language"));
  document.querySelectorAll(".header-menu-nav-item:not(.language-switcher) a").forEach((el) => el.classList.add("language"));
  document.querySelectorAll('[data-folder="/languages"] .header-menu-nav-item a').forEach((el) => el.classList.remove("language"));

  var languageLinks = document.querySelectorAll(".language");

  for (var i = 0; i < languageLinks.length; i++) {
    var navURL = languageLinks[i].href;
    if (windowURL.indexOf(lang1) != -1) {
      languages.forEach((el) => el.classList.remove("active"));
      languages[0].classList.add("active");
      if (navURL.indexOf(lang1) != -1) {
        languageLinks[i].closest("div").style.display = "block";
      } else {
        languageLinks[i].closest("div").style.display = "none";
      }
    } else if (windowURL.indexOf(lang2) != -1) {
      languages.forEach((el) => el.classList.remove("active"));
      languages[1].classList.add("active");
      if (navURL.indexOf(lang2) != -1) {
        languageLinks[i].closest("div").style.display = "block";
      } else {
        languageLinks[i].closest("div").style.display = "none";
      }
    } else if (windowURL.indexOf(lang3) != -1) {
      if (navURL.indexOf(lang3) != -1) {
        languages.forEach((el) => el.classList.remove("active"));
        languages[2].classList.add("active");
        languageLinks[i].closest("div").style.display = "block";
      } else {
        languageLinks[i].closest("div").style.display = "none";
      }
    } else {
      if (navURL.indexOf(lang1) != -1) {
        languages.forEach((el) => el.classList.remove("active"));
        languages[0].classList.add("active");
        languageLinks[i].closest("div").style.display = "block";
      } else {
        languageLinks[i].closest("div").style.display = "none";
      }
    }
  }

  var active = document.querySelector(".language-switcher .active");
  active.closest(".language-switcher").prepend(active);
  document.querySelectorAll(".header a").forEach((el) => (el.style.visibility = "visible"));
  languageSwitcher.style.display = "flex";
})();

Я попытался использовать функцию forEach и массив, но это не работает.

 (function () {
  var lang = ["/en/", "/fr/", "/es/"];
  
  document
    .querySelectorAll("a[href="https://codereview.stackexchange.com/languages"]")
    .forEach((el) => el.parentNode.classList.add("language-switcher"));

  document
    .querySelector("[data-folder="https://codereview.stackexchange.com/languages"]")
    .classList.add("language-switcher");

  document
    .querySelectorAll(".language-switcher .header-nav-folder-item")

    .forEach((el) => el.classList.add("languages"));
  document
    .querySelectorAll(
      ".language-switcher .header-menu-nav-item:not(:first-child)"
    )
    .forEach((el) => el.classList.add("languages"));

  var languages = document.querySelectorAll(".languages"); //langauge switcher language options


  document
    .querySelectorAll(".header-nav-item:not(.language-switcher) a")

    .forEach((el) => el.classList.add("language"));
  document
    .querySelectorAll(".header-menu-nav-item:not(.language-switcher) a")

    .forEach((el) => el.classList.add("language"));
  document
    .querySelectorAll('[data-folder="/languages"] .header-menu-nav-item a')

    .forEach((el) => el.classList.remove("language"));

  var languageLinks = document.querySelectorAll(".language"); // languages set in navigation links


  var windowURL = window.location.href;
  var pageURL = windowURL.split("/")[4];

  var language = document.querySelectorAll(".language-switcher .languages a");

  for (var i = 0; i < language.length; i++) {
    lang.forEach(function (item, index) {
      if (pageURL == undefined) {
        language[index].onclick = function () {
          var path = item + "home";
          this.href = path;
        };
      } else {
        language[index].onclick = function () {
          var path = item + pageURL;
          this.href = path;
        };
      }
    });
  }

  for (var j = 0; j < languageLinks.length; j++) {
    var navURL = languageLinks[j].href;
    for (var k = 0; k < lang.length; k++) {
    if (windowURL.indexOf(lang[k]) != -1) {
      languages.forEach((el) => el.classList.remove("active"));
      languages[k].classList.add("active");
      if (navURL.indexOf(lang[k]) != -1) {
        languageLinks[j].closest("div").style.display = "block";
      } else {
        languageLinks[j].closest("div").style.display = "none";
      }
    } else {
      if (navURL.indexOf(lang[0]) != -1) {
        languages.forEach((el) => el.classList.remove("active"));
        languages[0].classList.add("active");
        languageLinks[j].closest("div").style.display = "block";
      } else {
        languageLinks[j].closest("div").style.display = "none";
      }
    }
  }
  }

  document.querySelector(".header").style.visibility = "visible";
  var active = document.querySelector(".language-switcher .active");

  active.closest(".language-switcher").prepend(active);
})();