連載
» 2016年10月25日 05時00分 公開

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

[金城俊哉,著]

正規表現を利用した文字列の置き換え

theme

文字列の中からURLを検索し、これをリンク付の文字列に書き換えたものをドキュメント上に配置する。


Navigator

「文字列の置き換えは、Stringオブジェクトのreplace()メソッドで行います。このメソッドは、正規表現のパターンにマッチした文字列を別の文字列に置き換えます。書き方は次のとおりです」


replace()メソッド

文字列の中からURLを検索してリンク付の文字列に書き換える

Navigator

「では、文字列の中からURLを検索し、これをリンク付の文字列に書き換えてみることにしましょう」


Driver

「リンクの設定は、次のようにHTMLの<a>タグで設定すればいいですね」


リンクの設定は&lt;a&gt;タグで設定
正規表現で検索した文字列の置き換え(replace1.html)
Driver

「こんな感じでどうですか」


Navigator

「たんに単語を置き換えるといったことなら、このような書き方になりますが、文字列を置き換えるときに同じURLを2回も書いているので、コードが長くなっていますね」


置き換え文字列の中にパターンマッチした文字列を埋め込む

Navigator

「実は、書き換える文字列がパターンマッチした文字列を含んでいる場合は、もっと便利な方法があるんです」


Driver

「先にそれを言ってくださいよぉ」


Navigator

「えーっとですね、まずは置き換えてみてからでないと内容がよく理解できなくなっちゃうんですよ。で、replace()メソッドは内部的にサブマッチ文字列を格納した特殊な変数を持っていて、$1から始まる変数名を指定することでパターンマッチした文字列を取り出すことができるようになっています。例えば、先の例の場合は、次のような値が格納されます」


replace()メソッドの変数
変数名 格納されている値
$1 http://www.newsite.example.com/
$2 undefined
$3 example
$4 /
Driver

「へー、『$1』って書けば、抽出された文字列を取り出せるんですね」


Navigator

「1つだけ重要な注意点があります。それは、パターン文字列全体を()で囲むという点です。これを付けることで、変数$1にパターンマッチした文字列全体が格納されるようになります。では、replace()メソッドの変数を使って、先のプログラムを書き換えてみましょうか」


Driver

「これで『$1』で文字列全体を取り出せるようにするには、あらかじめパターン文字列全体を()で囲めばいいんですね。では書き換えてみます」


文字列を置き換える(replace2.html)
実行結果

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。