【JavaScript】全角を半角に変換する方法｜英字・数字・記号・スペース・カタカナを正規化する

function toHalfWidth(str) {
  return str
    .replace(/[！-～]/g, (c) => String.fromCharCode(c.charCodeAt(0) - 0xFEE0))
    .replace(/　/g, " "); // 全角スペース(U+3000) → 半角スペース
}

console.log(toHalfWidth("Ａｂ１２３！？　ｚ")); // "Ab123!? z"
console.log(toHalfWidth("ＴＥＬ：０３－１２３４")); // "TEL:03-1234"

// 全角アルファベットだけ（大文字・小文字は保持される）
function alphaToHalf(str) {
  return str.replace(/[Ａ-Ｚａ-ｚ]/g, (c) => String.fromCharCode(c.charCodeAt(0) - 0xFEE0));
}
console.log(alphaToHalf("ＡＢＣｄｅｆ")); // "ABCdef"（小文字はそのまま小文字）

// 全角数字だけ
function digitToHalf(str) {
  return str.replace(/[０-９]/g, (c) => String.fromCharCode(c.charCodeAt(0) - 0xFEE0));
}
console.log(digitToHalf("０１２３")); // "0123"

// ※主要なものを抜粋。実務で全カナを正確に変換するなら完全な対応表かライブラリを使う
const KANA_MAP = {
  "ガ":"ｶﾞ","ギ":"ｷﾞ","グ":"ｸﾞ","ゲ":"ｹﾞ","ゴ":"ｺﾞ", // 濁音は1→2文字
  "パ":"ﾊﾟ","ピ":"ﾋﾟ","プ":"ﾌﾟ","ペ":"ﾍﾟ","ポ":"ﾎﾟ", // 半濁音も1→2文字
  "ア":"ｱ","イ":"ｲ","ウ":"ｳ","エ":"ｴ","オ":"ｵ",
  "カ":"ｶ","キ":"ｷ","ク":"ｸ","ケ":"ｹ","コ":"ｺ",
  "ー":"ｰ","、":"､","。":"｡","「":"｢","」":"｣","・":"･",
};

function kanaToHalf(str) {
  const re = new RegExp("(" + Object.keys(KANA_MAP).join("|") + ")", "g");
  return str.replace(re, (m) => KANA_MAP[m]);
}

console.log(kanaToHalf("ガパアカ。")); // "ｶﾞﾊﾟｱｶ｡"

function toFullWidth(str) {
  return str
    .replace(/[!-~]/g, (c) => String.fromCharCode(c.charCodeAt(0) + 0xFEE0))
    .replace(/ /g, "　"); // 半角スペース → 全角スペース
}

console.log(toFullWidth("Ab1!")); // "Ａｂ１！"

const input = document.getElementById("tel");

input.addEventListener("blur", () => {
  // 全角英数記号→半角 + 前後の空白除去
  input.value = toHalfWidth(input.value).trim();
});

// "０３－１２３４－５６７８" → "03-1234-5678"