基于URL参数的多语言内容切换JavaScript实现问题

1. 动态访问语言对象的对应属性 #

直接用方括号语法就能根据URL参数里的language值获取对应语言的内容，无需写大量条件判断。

实现步骤示例： #

• 先定义多语言对象：

const languageContent = {
  en: {
    title: "Welcome",
    content: "Hello <b>user</b>!"
  },
  zh: {
    title: "欢迎",
    content: "你好 <b>用户</b>!"
  },
  // 其他50+语言配置...
};

• 从URL参数中提取language值：

const urlParams = new URLSearchParams(window.location.search);
const selectedLang = urlParams.get('language') || 'en'; // 设英文为默认语言

• 动态访问对应语言的内容：

// 用方括号语法直接访问属性
const currentLangContent = languageContent[selectedLang];
// 若指定语言不存在，回退到默认语言
const finalContent = currentLangContent || languageContent['en'];

2. 渲染带HTML标签的内容 #

不要用innerText，换成innerHTML即可让HTML标签正常渲染。innerText会将所有内容当作纯文本解析，而innerHTML会识别HTML标签并渲染成对应元素。

代码示例： #

// 给标题元素赋值
document.getElementById('page-title').innerHTML = finalContent.title;
// 给内容段落赋值
document.getElementById('page-content').innerHTML = finalContent.content;

注：由于页面在WebView2中使用，内容均为可控的内部资源，无需担心XSS风险，可放心使用innerHTML。

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