「正規表現」の基本的な使い方をJavaScriptで理解する:JavaScript標準ライブラリの使い方超入門(5)(2/5 ページ)
JavaScriptの標準仕様としてビルトインされている主なオブジェクトの使い方を紹介する連載。今回は、正規表現について。Stringのsearch、match、replaceやRegExpのexecなどメソッドにおける文字列検索や置換の仕方、エスケープ文字や改行などのパターンマッチの基本を解説。
文章の中からメールアドレスの部分を抜き出す
「正規表現のパターンを作るにはちょっとしたコツがいるんですが、まずは『xx-xx@xxxx.xxxx.xxxx』のような形式のメールアドレスを想定して正規表現のパターンを作成してみます」
「意味を知ってなきゃ、暗号にしか見えませんね」
「先頭から順に見ていきましょう。まず『[\w-]+』の部分ですが、これは英数字とアンダースコア、さらにハイフン(-)で構成される文字列で始まることを意味しています。[]で囲んでいるので、『\w』または『-』に一致することが条件になります。続く『@[\w.]*』は、@で始まり、英数字とアンダースコア、ピリオド(.)で構成される文字列を表しています」
「最後に付いてる『/g』は、何なのですか?」
「『/』はオプションを指定するための記号です。gオプションは文字列全体に対してマッチングすることを指定します。これを付けることで、すべてのパターンにマッチした『xx-xx@xxxx.xxxx.xxxx』の形式で抽出が行えるようになります。最初の部分を『[\w-]+』にしていますので、想定した形式のほかに、ユーザー名部分にハイフンを含まない『xxxx@xxxx.xxxx』のようなアドレスもパターンマッチの対象になります」
「うーん、中々複雑ですが、まずは最後に『/g』を付けておかないと、すべての文字を抽出できないってことですね」
メールアドレス形式の文字列を抽出
「では、実際にメールアドレスを検索し、結果を画面に表示してみることにしましょう。正規表現のパターンで文字列を検索するのはmatch()メソッドです。戻り値は、一致した文字列を格納した配列です」
「先ほどのパターンをmatch()メソッドの引数にして抽出すればいいですね」
「(1)でメールアドレスを含む文字列を変数に格納しておいて、(3)でこの変数からmatch()メソッドを実行しています。メソッドの引数は、(2)で作成した正規表現のパターン文字列を格納した変数regを指定しています」
URLを検索する
「今回は文字列の中からURLを検索します」
「httpから始まるURLは構造が複雑なので、メールアドレスのときよりも難易度が上がりますね」
「1つずつ検証しながら、正規表現のパターンを作っていくことにしましょう。まず、次のようなURLを想定して、パターン文字列を作ってみましょうか」
冒頭の部分は「http://」と「https://」の2つのパターンに対応させたいと思います。そこで、次のようなパターン文字列にします。
「(s)?」は、sという文字が0または1回出現することを表します。これによって「http://」と「https://」のどちらにもマッチするようになります。
また、スラッシュは正規表現のパターンの開始と終了を示す予約語なので、パターン文字列の中に「/」が含まれる場合は、「\/」のようにエスケープ処理しておきましょう。
続く文字列が英数字、アンダースコア、ハイフンで構成され、さらに途中にピリオドが含まれていることを想定して、次のようなパターン文字列にします。
スラッシュ(/)に続く部分は、ピリオドのほかにハイフンや、その他の?、%、=、&などの特殊文字やさらにスラッシュが含まれることが想定されます。
以上のパターン文字列を連結して、正規表現のパターンを作成します。
複数の文の中からURLを検索する
「では、URLを検索するプログラムを作成することにしますが、今回は複数の文が対象になりますので、URLも複数、含まれることが予想されますよね」
「複数のURLが含まれてたら、全部抽出しなきゃならないですね」
「match()メソッドは結果を配列として返すので、複数の文字列がマッチした場合は順番に配列要素に格納されます。そこで、for文を使って配列要素を1つずつ取り出すようにすればうまくいきますよ。正規表現のパターンは僕が入力しますから、あとに続く部分を入力していってください」
「じゃ、対象の文字列を作成して、抽出する部分を作りますね」
match()メソッドは結果を配列で返す
「先にお話ししたように、match()メソッドは次のように結果を配列で返します。
「しっかし、今回の正規表現のパターンは長いですねー」
「これについては、このあとのMemoとHintでお話ししましょう」
Copyright © ITmedia, Inc. All Rights Reserved.
関連記事
- JavaScriptプログラミングをdocument.writeやalertで始める際の基礎知識をパーフェクトに解説する
初めてJavaScriptのWebアプリを作ってみたいという人に向けて「Hello World!」などの文字列を表示する方法について解説する。 - JavaScriptを中心としたWebアプリ開発の栄枯盛衰まとめ――LiveScriptからAngularJS/React.jsまで
@ITが誕生した2000年頃はJavaScriptが不遇だった時代。そこから現在のような人気のプログラミング言語になるまでには、どのような歴史があったのか。15周年を迎えた@ITの豊富なWeb開発関連記事とともに振り返る。 - ようこそJavaScriptの世界へ
JavaScriptで本格的なプログラミングの世界に触れてみよう。連載を通じて実用的なアプリケーションを作れるようになるはず!?(編集部)