如何使用jQuery实现多语言网站的URL路径语言切换？

Hey there! Let's get that language switcher working properly for your multi-language site. Here's a straightforward jQuery solution tailored to your URL structure (www.example.com/en/content, etc.):

Core jQuery Code #

$(document).ready(function() {
  // Bind click event to all language switch links
  $('.language a').on('click', function(e) {
    // Prevent default anchor jump behavior
    e.preventDefault();
    
    // Get target language from the button's data attribute
    const targetLang = $(this).data('language');
    const currentUrl = window.location.href;
    const urlSegments = currentUrl.split('/');
    
    // Extract current language (the first path segment after the domain)
    const currentLang = urlSegments[3];
    
    // Skip if we're already on the target language
    if (currentLang === targetLang) {
      return;
    }
    
    // Replace the language segment with the target
    urlSegments[3] = targetLang;
    const newUrl = urlSegments.join('/');
    
    // Redirect to the new language URL
    window.location.href = newUrl;
  });
});

Breakdown of How This Works #

• DOM Ready Check: $(document).ready() ensures we only bind events once all page elements are loaded, so we don't waste time trying to attach clicks to non-existent links.
• Prevent Default Action: The links have href="#/", which would jump to the top of the page otherwise—e.preventDefault() stops that annoying behavior.
• Get Target Language: Using data('language') is cleaner than relying on the link's ID, since it's purpose-built for storing this kind of metadata.
• URL Manipulation: Splitting the URL into segments lets us directly target the language part (the 4th segment, index 3, since we split on /). We swap that segment with the target language, then join the segments back into a full URL.
• Avoid Unnecessary Redirects: We check if the current language matches the target first, so users don't reload the same page by accident.

Alternative: Using Regular Expressions #

If you prefer regex for URL replacement (works great if your URL structure stays consistent), here's another version:

$(document).ready(function() {
  $('.language a').on('click', function(e) {
    e.preventDefault();
    const targetLang = $(this).data('language');
    const currentUrl = window.location.href;
    
    // Match any of your existing language segments and replace with target
    const newUrl = currentUrl.replace(/\/(en|cn|bn)\//, `/${targetLang}/`);
    
    // Only redirect if the URL actually changed
    if (newUrl !== currentUrl) {
      window.location.href = newUrl;
    }
  });
});

This regex specifically looks for /en/, /cn/, or /bn/ in the URL and swaps it out with the target language's path segment—no fuss, no extra steps.

内容的提问来源于stack exchange，提问作者user9030616