jq及以前时代的国际化手段

时间 2019-12-09

原文原文链接

<body>
    <select onchange="changeLang(event)">
      <option value="cn">中文</option>
      <option value="en">英文</option>
    </select>
    <div id="template1">
      {index01}
      <div>{index02}</div>
    </div>
  </body>
复制代码

// 保存模版
  var template = document.querySelector("#template1").innerHTML;

  // json 文件
  var lang = {
    en: {
      index01: "Hello world",
      index02: "I love javascript."
    },
    cn: {
      index01: "你好世界",
      index02: "我爱javascript。"
    }
  };

  // select 改变事件
  function changeLang(event) {
    // 获取当前语言
    var currentLang = event.target.value;
    autoReplaceTextWithLang(currentLang);
  }

  // 替换模版中 {index**} 的函数
  function autoReplaceTextWithLang(currentLang) {
    var dom = document.querySelector("#template1");
    dom.innerHTML = template
      .replace(/{index01}/, lang[currentLang].index01)
      .replace(/{index02}/, lang[currentLang].index02);
  }
  // 初始化显示中文
  autoReplaceTextWithLang("cn");

复制代码

效果:javascript