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

この記事は約3分で読めます。
広告

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

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

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

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

    // 全角英数字を半角英数字に変換
    const halfWidthValue = inputValue.replace(/[A-Za-z0-9]/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(/[A-Za-z0-9]/g, function(s) { … })

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

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

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

重要なポイント

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

まとめ

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

コメント

タイトルとURLをコピーしました