対象のテキストが英語か日本語か判定する

.js-langを付与した要素に対して以下の判定をするJavaScriptです。

  • 英語が含まれる場合は.is-langEnを付与
  • 英語以外の文字が含まれる場合は.is-langJaを付与
// 英字判定
var langEls = document.querySelectorAll('.js-lang');
if (langEls.length > 0) {
  for (var i = 0; i < langEls.length; i++) {
    var langEl = langEls[i];
    var texts = langEl.innerText.split('\n').map(function(text) {
      return text.trim();
    });
    // 英語のみのテキストかどうかで判定
    var isEnOnly = isEnglishOnly(texts);
    // 要素にクラスを付与
    langEl.classList.add(isEnOnly ? 'is-langEn' : 'is-langJa');
  }
}
function isEnglishOnly(texts) {
  for (var i = 0; i < texts.length; i++) {
    var text = texts[i];
    // 英語以外の文字が含まれていた場合はfalseを返す
    if (/[^\x00-\x7F]+/.test(text)) {
      return false;
    }
  }
  return true;
}
使用例

英字と日本語フォントが混在していて、なおかつ指定されているデザインが違う場合に使用。