Webページ内に4バイト文字が含まれるかJavaSctiptで調べる方法

Webページ内に4バイト文字が含まれるかJavaSctiptで調べる方法

4バイト文字を簡単に検出

Webサイトによっては制作時に「4バイト文字を使用してはならない」というルールがある場合がある。

しかし、emojiであればひと目でわかるが、吉野屋の「吉」などの文字は目視だけでは見分けが付きにくい。

そんなときはChromeのデベロッパーツールのConsoleで4バイト文字検出用のJavaScriptを実行すれば簡単に調査可能だ。

4バイト文字検出スクリプト

4バイト文字はJavaScriptのencodeURIComponent変換時にエラーになるため、このときの文字が4バイト文字ということになる。

{
  const r = (document.documentElement.outerHTML).replace(/^\s*[\r\n]+/gm, '');
  for (var i = 0; i < r.length; i++) {
    try {
      encodeURIComponent(r.charAt(i));
    } catch(e) {
      try {
        encodeURIComponent(r.substring(i, i + 2).charAt(1));
      } catch (e) {
        console.info(`4バイト文字の「${r.substring(i, i + 2)}」が含まれています。`);
      }
    }
  }
}

4バイト文字が含まれるサンプルページで実行すればこのように検出されるはずだ。

Webページ内に4バイト文字が含まれるかJavaSctiptで調べる方法