【jquery】コピペでOK!英数字入力で英字を削除し半角数字のみに変換する方法

【PR】記事内に広告を含みます。

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

フォーム入力の実装は奥が深いと思っているくらパパ（ @Cloud_san99）です。今回はメールフォーム等の入力するフォームでよく見かける半角数字のみに変換する方法を紹介します。今回紹介するソースコードは英字の全角・半角は削除し、全角数字は半角数字に変換させるので希望の値を入力させる時など実践でも役立つコードです。ソースコードを紹介した後に詳細な解説もしていますので、なぜそうなるのか？を知りたい方は最後までチェックしてもらえれば幸いです。

目次閉じる

英数字入力で英字を削除し半角数字のみに変換するソースコード【jquery】
英数字入力で英字を削除し半角数字のみに変換するソースコードの解説
【jquery】英数字入力で英字を削除し半角数字のみに変換する方法まとめ

英数字入力で英字を削除し半角数字のみに変換するソースコード【jquery】

英数字入力で英字を削除し半角数字のみに変換するソースコードの解説

今回紹介する処理は以下の順番で処理しています。

#oneのフォームに入力された値を取得して変数input_textに代入
全角の数字のみを正規表現で抽出し、replaceで半角に変換し、変数input_textに上書き代入
replaceで半角数字以外を削除
変数input_textに入っている値をvalで#oneの値を変更

それではひとつひとつ解説していきます。

let input_text = $('#one').val();

1の『#oneのフォームに入力された値を取得して変数input_textに代入 』ではIDであるoneに入力された値を変数input_textに代入しています。

.replace(/[０-９]/g, function(s) { return String.fromCharCode(s.charCodeAt(0) - 65248);
})

2の『全角の数字のみを正規表現で抽出し、replaceで半角に変換し、変数input_textに上書き代入』では入力された文字列から全角数字だけを正規表現で抽出。ここで使われている正規表現である/[０-９]/gは『0～9の全角数字にマッチする』という意味です。そしてreplaceメソッドで半角数字に変換しています。

replaceメソッドとは

replace(‘第1引数’,’第2引数’);
第1引数を第2引数に変換するという意味になります。

MEMO

全角英数字から65248をひくことで半角英数字になります。

.replace(/[^0-9]/g, '');

3の『replaceで半角数字以外を削除』では2と同じようにreplaceメソッドで半角数字以外を全て削除する処理をしています。ここで使われている正規表現/[^0-9]/gは『半角数字の0～9にマッチする』という意味です。

【jquery】英数字入力で英字を削除し半角数字のみに変換する方法まとめ

この記事では【jquery】英数字入力で英字を削除し半角数字のみに変換する方法を詳しく解説してみました。よくメールフォームなどで理想の値を入力してもらうために比較的頻繁に実装するんじゃないでしょうか。今回のソースコードのポイントは下記の通りです。

正規表現
全角英数字から65248をひくことで半角英数字になる
replaceメソッド
valメソッド

ひとつひとつの処理をじっくりと見ていけば理解できるかと思いますが、もし「ここがわからない！」や「ここ間違えてる！」などがあれば教えて頂ければ幸いです。ではでは、くらパパ（ @Cloud_san99）でした。