[TIL] 멀티랭귀지 multi language (ml)

27312 단어 TILTIL
var lang = "un"; //언어 값 받아올 변수. un은 undefined 의 앞 2글자.

// 다국어 언어 예시. 
let multiLanguage = { 
    "ko" : { 
        msg : "안녕하세요.", 
        title: "한국어", 
    }, 
    
    "en" : { 
        msg : "Hello World.", 
        title: "English", 
    } 
};

window.onload = () => { 
  let changeNodeList = Array.prototype.slice.call(document.querySelectorAll('[data-detect]')); 

  changeNodeList.map( v => {
    v.textContent = multiLanguage[lang][v.dataset.detect] 
  }) 
};


 console.log(navigator.language);
 if (navigator.language!=null) //이 값이 null이 아니면. 즉 크롬이나 파폭이면
 {
     lang = navigator.language;
 } else if (navigator.userLanguage!=null) { //이 값이 null이 아니면. 즉 익스라면
     lang = navigator.userLanguage;
 } else if (navigator.systemLanguage!=null) { //여기까지는 안 올거 같은데 혹시나 해서
     lang = navigator.systemLanguage;
 } else { //이도저도 아니면
     lang="un";
 }

 

 lang = lang.toLowerCase(); //받아온 값을 소문자로 변경
 lang = lang.substring(0, 2); //소문자로 변경한 갚의 앞 2글자만 받아오기

 

  if (lang=="ko") { //한국어라면
      console.log("한국어");
  } else if (lang=="cn" || lang=="tw" || lang=="zh") { //중국어라면
      console.log("중국어");
  } else if (lang == "en") {
      console.log("미국");
  } else{ //그 외~
      console.log("그 외");
  }


<button id="koBtn" data-lang="ko">한국</button> 
<button id="enBtn" data-lang="en">영어</button> 
<p id="title" data-detect="title"></p> 
<p id="msg" data-detect="msg"></p>

수정


var lang = "un"; //언어 값 받아올 변수. un은 undefined 의 앞 2글자.

// 다국어 언어 예시. 
let multiLanguage = { 
    "ko" : { 
        msg : "안녕하세요."
        title: "알로하", 
        sub_title: "하이",
    }, 
    
    "en" : { 
        msg : "Hello World.", 
        title: "English", 
        sub_title: "english TEST",
    },

    "jp" : {
      msg : "こんにちは", 
      title: "これわ タイトルです", 
      sub_title: "にほんごの ページです",
    },
};


window.onload = () => { 
  let changeNodeList = Array.prototype.slice.call(document.querySelectorAll('[data-detect]')); 

  changeNodeList.map( v => {
    v.textContent = multiLanguage[lang][v.dataset.detect] 
  }) 
};

function changeLanguage(lang) {
  // window.onload = () => { 
    let changeNodeList = Array.prototype.slice.call(document.querySelectorAll('[data-detect]')); 

    changeNodeList.map( v => {
      v.textContent = multiLanguage[lang][v.dataset.detect] 
    }) 
  // };
}



 console.log(navigator.language);
 if (navigator.language!=null) //이 값이 null이 아니면. 즉 크롬이나 파폭이면
 {
     lang = navigator.language;
 } else if (navigator.userLanguage!=null) { //이 값이 null이 아니면. 즉 익스라면
     lang = navigator.userLanguage;
 } else if (navigator.systemLanguage!=null) { //여기까지는 안 올거 같은데 혹시나 해서
     lang = navigator.systemLanguage;
 } else { //이도저도 아니면
     lang="un";
 }

 lang = lang.toLowerCase(); //받아온 값을 소문자로 변경
 lang = lang.substring(0, 2); //소문자로 변경한 갚의 앞 2글자만 받아오기

  if (lang=="ko") { //한국어라면
    console.log("한국어");
    document.getElementsByClassName('dropdown-select-box')[0].value = "kr";
  } else if (lang=="cn" || lang=="tw" || lang=="zh") { //중국어라면
    console.log("중국어");
    document.getElementsByClassName('dropdown-select-box')[0].value = "china";
  } else if (lang == "en") {
    console.log("미국");
    document.getElementsByClassName('dropdown-select-box')[0].value = "en";
  } else if(lang === "jp") {
    console.log("일본");
    document.getElementsByClassName('dropdown-select-box')[0].value = "jp";
  } else { //그 외~
    console.log("그 외");
  }


 
/*
 ==================================================================
 셀렉트 박스로 언어 선태할 시에
 ================================================================== 
*/
let selectLang = "";

function handle_select_lang(e) {
  // console.log(e);
  for(let i = 0; i < e.options.length; i++) {
    const option = e.options[i];
    if(option.selected) {
      lang = option.value;
      changeLanguage(lang);
      console.log(lang);
    }
  }
}

Reference

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=quasimodo__&logNo=110179247680

https://zzdd1558.tistory.com/245

좋은 웹페이지 즐겨찾기