jQueryで全角を半角に変換するコードをもっと分かりやすく解説

なぜ全角を半角に変換するのか？

入力フォームで全角文字が入力されると、データ処理でエラーが発生したり、意図しない結果になることがあります。特に数値や英数字を扱う場面では、全角を半角に変換することで、より正確なデータ処理が可能になります。

jQueryで全角を半角に変換するコード

$(document).ready(function() {
  $('#your_input_id').on('input', function() {
    // 入力された値を取得
    const inputValue = $(this).val();

    // 全角英数字を半角英数字に変換
    const halfWidthValue = inputValue.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) {
      return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
    });

    // 変換後の値を元の入力欄に設定
    $(this).val(halfWidthValue);
  });
});

コードの解説

1. $(document).ready(function() {})

   ページが読み込まれた後に、この中のコードが実行されます。

2. $(‘#your_input_id’).on(‘input’, function() {})

   IDが your_input_id の要素（通常は入力フォーム）で、何か入力された時に、この中の関数が実行されます。

3. const inputValue = $(this).val();

   入力された値を取得し、inputValue 変数に格納します。

4. const halfWidthValue = inputValue.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) { … })

   inputValue の中の全角英数字を正規表現を使って探し出し、function(s) { … } の部分で半角英数字に変換します。
   s はマッチした1文字を表し、String.fromCharCode(s.charCodeAt(0) – 0xFEE0) で、その文字のコードポイントから 0xFEE0 を引くことで対応する半角文字に変換します。

5. $(this).val(halfWidthValue);

   変換後の値 halfWidthValue を、元の入力フォームに設定します。

重要なポイント

• 正規表現 /[Ａ-Ｚａ-ｚ０-９]/g: 全角英数字を全てマッチさせるための正規表現です。
• String.fromCharCode(): 数字のコードポイントから文字に変換する関数です。
• charCodeAt(): 文字のコードポイントを取得する関数です。

まとめ

このコードを使うことで、入力フォームに全角英数字が入力された際に、自動的に半角に変換され、データの整合性を保つことができます。