JavaScript 正規表現を初心者向きに解説、match、replace、search、split、testメソッドなども解説｜Javascript入門講座（9）

JavaScript
この記事は約8分で読めます。

はじめに

　JavaScript入門講座の第九弾として、JavaScript 正規表現を初心者向きに解説、match、replace、search、split、testメソッドなどついて紹介します。

　この記事を読むと次の疑問について知ることができます。

  • 正規表現とは？
  • 正規表現で使う主要な記号と意味とは？
  • 正規表現で扱う主要なメソッドとは？ 
    • matchメソッド
    • replaceメソッド
    • searchメソッド
    • splitメソッド
    • testメソッド

　JavaScript入門講座（8）では、JavaScript オブジェクトを初心者向けに解説、追加、削除、コンストラクタ、new演算子などについて解説してきました。

　ここでは、JavaScript 正規表現を初心者向きに解説、match、replace、search、split、testメソッドなどについて深堀していきます。

正規表現とは？

　正規表現は、簡単に言うと文字列から特定のパターン（特定の組み合わせの文字列など）を見つけ出すための仕組みです。

　これにより、プログラム中のある文字列だけを検索し、違う文字列と置換したりなどが行えるようになります。

　Javascriptで正規表現を扱う際には、扱う文字列を正規表現で宣言をする必要があります。

　その宣言の仕方には２通りの方法があります。

let str = /abf/;
let str1 = new RegExp( "abf" );
console.log(str);
console.log(str1);
console.log(typeof str);
console.log(typeof str1);
上述のコードの解説

  1. letで宣言した変数 str に「/abf/」の文字列を正規表現として代入
    普通の文字列であれば、「””」ダブルクォーテーション又は「’’」クォーテーションで文字列を括りますが、正規表現の場合は「/文字列/」で括ります。
  2. letで宣言した変数 str1 に「abf」の文字列を正規表現として代入
  3. console.log(str);でコンソールに変数 str を出力、　（結果　/abf/）
  4. console.log(str1);でコンソールに変数 str1 を出力、　（結果　/abf/）
  5. console.log(typeof str);でコンソールに変数 str のデータ型を出力、　（結果　object）
  6. console.log(typeof str1);でコンソールに変数 str1 のデータ型を出力、　（結果　object）

正規表現で使う主要な記号と意味

　正規表現では、特殊な記号を用いて表現します。

　それらの中で主要な記号（メタ文字）について表にまとめました。

記号 意味 正規表現の例 マッチする例
. 任意の一文字（改行を含まない）にマッチ . a 、Y 、g
⁺ 直前の文字が １回以上 繰り返す場合にマッチ ko+kei kokei 、ko…kei
⋆ 直前の文字が ０回以上 繰り返す場合にマッチ ko*kei kkei 、ko…kei
? 直前の文字が ０個か１個 の場合にマッチ ko?kei kkei 、kokei
{m, n} 直前の文字が m 回以上、n 回以下の繰り返しにマッチ x{3,4} xxx 、xxxx
| いずれかの条件 (OR条件) ab|cd ab , cd
[...] 角括弧に含まれるいずれか１文字にマッチ [xyz] x 、 y、 ｚ
[^...] 角括弧に含まれない１文字にマッチ [^xyz] a、 c 、p
\w アンダースコアを含む英数字の1文字にマッチ [a-zA-Z_0-9] a 、P、 8
\W アンダースコアを含む英数字以外の1文字にマッチ [^a-zA-Z_0-9] =、 % , #
\d 数字の1文字にマッチ [0-9] 0、 5、 9
\D 数字以外の1文字にマッチ [^0-9] a 、 R 、 _
\s 空白文字（スペース、タブ、改行などが含まれます）にマッチ [ \t\f\r\n] " "、\t、 \r、\n
\S 空白文字以外にマッチ [^ \t\f\r\n] a 、T、 8
\t タブ \t なし
\r CR(Carriage Return：0x0D) \r なし
\n LF(Line Feed：0x0A) \n なし

正規表現で扱うメソッド

matchメソッド

　正規表現でよく使われるメソッドで、優れた機能を持っています。

　それでは、例を見てみましょう。

let str2 = "bsDabfPWk";
var str3 = new RegExp (/a.*W/)
let result = str2.match(str3)[0];
console.log(result);
 
上述のコードの解説

  1. letで宣言した変数 str2 に「bsDabfPWk」の文字列を代入
  2. varで宣言した変数 str3 に「/a.*W/」（a文字で始まりWで終わる文字）の正規表現代入
  3. 文字列 str2 の中で正規表現「/a.*W/」にマッチしたものを index 0 の配列の値を var で宣言した変数 result に代入
  4. console.log(result);でコンソールに result を出力、　（結果　abfPW）

replaceメソッド

　パターンにマッチした文字列を指定した文字で置き換えて、その結果の文字列を返します。

　それでは、例を見てみましょう。

let result1 = str2.replace(str3,"WqeTbg")
console.log(result1);
上述のコードの解説

  1. letで宣言した変数 result1 に 文字列 str2 「bsDabfPWk」内に正規表現 str3 「/a.*W/」（a文字で始まりWで終わる文字）で見つかった文字列「abfPW」をreplaceメソッドで「WqeTbg」に置換して代入
  2. console.log(result1);でコンソールに result1 を出力、　（結果　bsDWqeTbgk）

searchメソッド

　正規表現のパターンにマッチした文字列の場所のインデックスを返します。

　それでは、例を見てみましょう。

let result2 = str2.search(str3)
console.log(result2);
上述のコードの解説

  1. letで宣言した変数 result2 に 文字列 str2 「bsDabfPWk」内に正規表現 str3 「/a.*W/」（a文字で始まりWで終わる文字）で見つかった文字列「abfPW」が search メソッドでstr2 「"bsDabfPWk」の最初の文字から（０から数えて何番目にあるか）のインデックスを代入
  2. console.log(result2);で コンソールにresult2を出力、　（結果　3）

splitメソッド

　正規表現などで指定した区切り文字で分割して、配列で返します。

　それでは、例を見てみましょう。

let str4 = "1th,2th,3th";
let result3 = str4.split(",");
console.log(result3);;
console.log(result3[1]);

 

上述のコードの解説

  1. letで宣言した変数 str4 に 文字列 「1th,2th,3th」を代入
  2. letで宣言した変数 result3 に str4 の文字列「1th,2th,3th」を split メソッドで「,」で分割した配列を返し、それを代入
  3. console.log(result3);でコンソールに result3 を出力、　（結果　(3) ['1th', '2th', '3th']）
  4. console.log(result3[1]);でコンソールに result3 配列のインデクス１の値を出力
    （結果　2th）

testメソッド

　正規表現のパターンにマッチしたかどうかの結果を真偽値、マッチしたら true、マッチしなければ false で返します。

　文字列がパターンにマッチするかを判別したい場合に testメソッドを使います。

let result4 = str3.test(str2);
console.log(result4);
result4 = /\d/.test(str2);
console.log(result4);
上述のコードの解説

  1. letで宣言した変数 result4 に 正規表現 str3 「a.*W」（a文字で始まりWで終わる文字）が文字列 str2「bsDabfPWk」内に見つかれば「true」を、見つからなければ「false」を返し、それを代入
  2. console.log(result4);でコンソールに result4 を出力、　（結果　true）
  3. letで宣言した変数 result4 に 正規表現 str3 「/\d/」（数字）が文字列 str2「bsDabfPWk」内に見つかれば「true」を、見つからなければ「false」を返し、それを代入
  4. console.log(result4);でコンソールに result4 を出力、　（結果　false）

おわりに

　如何だったでしょうか？

　正規表現とは？、正規表現で使う主要な記号と意味とは？、正規表現で扱う主要なメソッドとは？ 、matchメソッド、replaceメソッド、searchメソッド、splitメソッド、testメソッドなどについて紹介してきました。

　この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。

以上です。

コメント