讃岐小僧のEngineering×Techメモ

未経験から挑戦中のプログラミングや、趣味の野球や狩猟について、その他、ビジネスやテクノロジーをテーマに様々なことをつぶやく場所です。

【JavaScript】正規表現について

はじめに

この記事はJavaScript正規表現について学習したのでその内容をメモしたものです。

正規表現について

◼︎正規表現を利用するケースは主に3ケースだと考えています。
 1: 文字列を部分的に置換するとき
 2.:文字列が制約を満たしているか確認するとき
 3.:文字列の一部分を抽出するとき

フォームの中に入力したデータに対してValidationをかけたい時とか、電話番号で090-××××-××××とかのハイフンを取り除きたかったり、そもそも、DBスキーマの制約に整合しているか確かめたかったり。。

いろんなところで使いたい正規表現ですが、とにかく地味で「あれ、どうだった?」となりがちなものです。

なので改めてこちらの記事に基本的な内容をまとめてみたいと思います。

正規表現 効果
[a-z] 角括弧で囲まれた文字のいずれか 1 個にマッチ
\d 数字にマッチ
{n, m} 直前の文字が少なくとも n 回、多くても m 回出現するものにマッチ
i 大文字・小文字を区別しない検索
g グローバルマッチで。例えばreplaceメソッドと組み合わせて利用することで文字列の中に指定した文字が複数含まれている場合、全てを置換することができる。
+ 直前の一回以上の文字列にマッチする
- 直後の一回以上の文字列にマッチす
. どの1文字にもマッチする

正規表現を利用する際に使用するメソッド:replacematch

replaceメソッドを使ってみる

replaceメソッドは文字列の指定の部分を別の文字に置き換えるメソッドです。

> var food = 'ポテチうまい';
=> undefined

> food.replace(/ポテチ/, 'じゃがりこ'); 
=> "じゃがりこうまい"

replaceを利用して文字列を操作したい文字列は//で囲みます。第2引数に変換後の文字列を指定します。

今回はポテチをじゃがりこに変更することができました。

グローバルマッチを利用してreplaceメソッドを使ってみる

> var address = '東京都-港区-虎ノ門';
=>  undefined

> address.replace(/-/g, ""); ##'g'を
=> "東京都港区虎ノ門"

matchメソッドを使ってみる

matchメソッドは引数の中に指定した文字列がレシーバに存在しているかどうかを確認するためのメソッドです。 指定した文字列が含まれている場合は、返り値に指定した文字列が配列形式で戻されます。 また含まれていない場合は返り値としてnullが返されます。

> var str = 'ポテチ';
=> undefined

> str.match(/ポテチ/);
=> ["ポテチ"]

> str.match(/じゃがりこ/)
=> null

文字数の制約を設定する

{8,}を利用して8文字以上の制約をつけています。 その他、[a-z]はa~zのアルファベットに合致するもの、

> var pass = 'Huga1234';
=>  undefined

> pass.match(/[a-z\d]{8,}/i);
=> ["Huga1234"]

補足① 最初の1文字を返します。

> var aaa.match(/./);
=> ['a'] ##最初の1文字にマッチ

補足② 最初のaだけでなくその後に続くaも返します

> var aaabbb.match(/a+/);
=> ['a'] ##直前の文字で直後に続く文字にマッチ

補足③ '.'を指定しているので、全ての文字列を返します。

> var aaabbb.match(/.+/);
=> ['aaabbb'] ##直前の文字で直後に続く文字にマッチ、この場合は'.'を利用しているので全てにマッチする

まとめ

これまで基本的な正規表現の書き方についてメモしてきました。 こちらは備忘的に見てもらえたらと思います。

閲覧ありがとうございました。

またこの記事の内容はQiitaにも投稿しているのでそちらもみてくださればと思います。

qiita.com