Combine text with multiple replacements

Question

I want to translate English to Vietnamese via javascript:

var text = 'Name, Password and ConfirmPassword';
var _text = text.replace('Name', 'Tên đại diện')
                .replace(/Password|ConfirmPassword/g, 'Mật khẩu');

My question is: is there any other way to compress 2 replacein 1?

As well as:

var text = 'Name, Password and ConfirmPassword';
var _text = text.replace(/(Name)|(/Password|Confirmpassword/g)/, ???);

Answer 1

Using a callback, you can return different things depending on how much of the matched regular expression

var _text = text.replace(/Password|ConfirmPassword|Name/g, function(m) {
    if ( m === 'Name' ) return 'Tên đại diện';
    return 'Mật khẩu';
});

Answer 2

if you need several languages ​​or just want to simplify the code, I would use json objects to store translations and just change the text of the elements with the translation, instead of dealing with many regular expression replacements.

// language translations. this objects key is the element selector
var translations = {
  '#welcome' : {
    english: 'Hello',
    vietnamese: 'chào bạn',
    thai: 'สวัสดี',
    afrikaans: 'Goeie dag'
  },
  '#password' : {
    english: 'Please enter your password',
    vietnamese: 'Vui lòng nhập mật khẩu của bạn',
    thai: 'กรุณาใส่รหัสผ่านของคุณ',
    afrikaans: 'gee jy jou wagwoord'
  },
  '.submit': {
    english: 'Submit',
    vietnamese: 'đệ trình',
    thai: 'ส่ง',
    afrikaans: 'Indien'
  }
};

/**
 * translate a string based on the translations hash object
 *
 * this function will find an element based on the selector and change
 * it text or placeholder to the selected language
 *
 * @param {string}    language    language to translate text to
 */
function translate( language ){
  return function( e ){
    for( var key in translations ){
      var el = document.querySelector( key ),
          translation = translations[ key ][ language ];
      
      if( el.placeholder ){
        el.placeholder = translation;
      }
      else if( el.value ){
        el.value = translation;
      }  
      else {
        el.innerHTML = translation;
      }
    }
  }  
}

// get all the required elements
var 
  english    = document.querySelector('#translate-english'),
  vietnamese = document.querySelector('#translate-vietnamese'),
  thai       = document.querySelector('#translate-thai'),
  afrikaans  = document.querySelector('#translate-afrikaans');

// bind the events to the language buttons
      thai.addEventListener('click', translate('thai'), false);
   english.addEventListener('click', translate('english'), false);
 afrikaans.addEventListener('click', translate('afrikaans'), false);
vietnamese.addEventListener('click', translate('vietnamese'), false);

<button id="translate-english">english</button>
<button id="translate-vietnamese">Vietnamese</button>
<button id="translate-thai">Thai</button>
<button id="translate-afrikaans">afrikaans</button>

<h3><span id="welcome">hello</span> stackoverflow</h3>
<input type="password" id="password" placeholder="Please enter your password" />
<input type="submit" class="submit" value="Submit" />

Run codeHide result