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(): 文字のコードポイントを取得する関数です。

まとめ

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

javascriptjQuery

フロントエンドエンジニアとして10年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、今は亡きXHTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

制作のご依頼やお問い合わせはこちらから連絡お願いします。

エンデ・バタローをフォローする
シェアする
初めてのブログ

コメント

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