検索
連載

「正規表現」の基本的な使い方をJavaScriptで理解するJavaScript標準ライブラリの使い方超入門(5)(2/5 ページ)

JavaScriptの標準仕様としてビルトインされている主なオブジェクトの使い方を紹介する連載。今回は、正規表現について。Stringのsearch、match、replaceやRegExpのexecなどメソッドにおける文字列検索や置換の仕方、エスケープ文字や改行などのパターンマッチの基本を解説。

Share
Tweet
LINE
Hatena

文章の中からメールアドレスの部分を抜き出す

theme

あらかじめ入力された文章の中からメールアドレスの部分を抜き出し、これを画面に表示する。


Navigator

「正規表現のパターンを作るにはちょっとしたコツがいるんですが、まずは『xx-xx@xxxx.xxxx.xxxx』のような形式のメールアドレスを想定して正規表現のパターンを作成してみます」


正規表現のパターンを作成して変数に代入
Driver

「意味を知ってなきゃ、暗号にしか見えませんね」


Navigator

「先頭から順に見ていきましょう。まず『[\w-]+』の部分ですが、これは英数字とアンダースコア、さらにハイフン(-)で構成される文字列で始まることを意味しています。[]で囲んでいるので、『\w』または『-』に一致することが条件になります。続く『@[\w.]』は、@で始まり、英数字とアンダースコア、ピリオド(.)で構成される文字列を表しています」


Driver

「最後に付いてる『/g』は、何なのですか?」


Navigator

『/』はオプションを指定するための記号です。gオプションは文字列全体に対してマッチングすることを指定します。これを付けることで、すべてのパターンにマッチした『xx-xx@xxxx.xxxx.xxxx』の形式で抽出が行えるようになります。最初の部分を『[\w-]+』にしていますので、想定した形式のほかに、ユーザー名部分にハイフンを含まない『xxxx@xxxx.xxxx』のようなアドレスもパターンマッチの対象になります」


Driver

「うーん、中々複雑ですが、まずは最後に『/g』を付けておかないと、すべての文字を抽出できないってことですね」


メールアドレス形式の文字列を抽出

Navigator

「では、実際にメールアドレスを検索し、結果を画面に表示してみることにしましょう。正規表現のパターンで文字列を検索するのはmatch()メソッドです。戻り値は、一致した文字列を格納した配列です」


Driver

「先ほどのパターンをmatch()メソッドの引数にして抽出すればいいですね」


メールアドレスを抽出(match1.html)
Driver

「(1)でメールアドレスを含む文字列を変数に格納しておいて、(3)でこの変数からmatch()メソッドを実行しています。メソッドの引数は、(2)で作成した正規表現のパターン文字列を格納した変数regを指定しています」


実行結果

URLを検索する

theme

複数の文の中からURLを検索して、これを画面に表示する。


Navigator

「今回は文字列の中からURLを検索します」


Driver

「httpから始まるURLは構造が複雑なので、メールアドレスのときよりも難易度が上がりますね」


Navigator

「1つずつ検証しながら、正規表現のパターンを作っていくことにしましょう。まず、次のようなURLを想定して、パターン文字列を作ってみましょうか」


想定するURLの形式
「https://」にも対応させたい

 冒頭の部分は「http://」と「https://」の2つのパターンに対応させたいと思います。そこで、次のようなパターン文字列にします。

http(s)?:\/\/
Onepoint

 「(s)?」は、sという文字が0または1回出現することを表します。これによって「http://」と「https://」のどちらにもマッチするようになります。

 また、スラッシュは正規表現のパターンの開始と終了を示す予約語なので、パターン文字列の中に「/」が含まれる場合は、「\/」のようにエスケープ処理しておきましょう。

「www.homepage.example.com」

 続く文字列が英数字、アンダースコア、ハイフンで構成され、さらに途中にピリオドが含まれていることを想定して、次のようなパターン文字列にします。

([\w-]+\.)+[\w-]+
「/index.html」

 スラッシュ(/)に続く部分は、ピリオドのほかにハイフンや、その他の?、%、=、&などの特殊文字やさらにスラッシュが含まれることが想定されます。

(\/[\w-.\/?%&=]*)?

 以上のパターン文字列を連結して、正規表現のパターンを作成します。

以上のパターン文字列を連結して、正規表現のパターンを作成

複数の文の中からURLを検索する

Navigator

「では、URLを検索するプログラムを作成することにしますが、今回は複数の文が対象になりますので、URLも複数、含まれることが予想されますよね」


Driver

「複数のURLが含まれてたら、全部抽出しなきゃならないですね」


Navigator

match()メソッドは結果を配列として返すので、複数の文字列がマッチした場合は順番に配列要素に格納されます。そこで、for文を使って配列要素を1つずつ取り出すようにすればうまくいきますよ。正規表現のパターンは僕が入力しますから、あとに続く部分を入力していってください」


Driver

「じゃ、対象の文字列を作成して、抽出する部分を作りますね」


URLを検索する(match_URL.html)
実行結果

match()メソッドは結果を配列で返す

Navigator

「先にお話ししたように、match()メソッドは次のように結果を配列で返します。


match()メソッドは結果を配列で返す
Driver

「しっかし、今回の正規表現のパターンは長いですねー」


Navigator

「これについては、このあとのMemoとHintでお話ししましょう」


Copyright © ITmedia, Inc. All Rights Reserved.

ページトップに戻る