正規表現を使って文字列を置換する方法

JavaScriptでも正規表現を使った文字列の置換が可能です。正規表現を使って文字列を検索する方法については、以前のエントリ「JavaScriptで正規表現を使う方法」で書きましたので、詳しくはそちらをご参照下さい。
正規表現で文字列を検索する場合、たいていは別の文字列に置き換えるのが目的ではないかと思います。正規表現を使って検索する場合と同様に、文字列の置換もとても簡単にできます。

ここでは、検索文字列があらかじめ固定されている場合(記述量が短くて済む)と、検索文字列が変数に格納されている場合(記述量が少し長い)とに分けて紹介します。

正規表現での置換の記述方法(検索文字列が固定の場合)

変数TargetStringに格納されている文字列に対して、正規表現にマッチする文字列を別の文字列に置き換えた結果を、変数ResStringに格納したい場合は、以下のように記述します。

var ResString = TargetString.replace( 正規表現 , 置換後の文字列 );

文字列を格納した変数のreplaceメソッドに、「正規表現」と「置換後の文字列」とを渡せば良いだけです。「=」記号の左側に記述した変数ResStringには、変数TargetStringの中身を置換した後の文字列が入ります。正規表現に1つもマッチしなければ、元の文字列がそのまま返されるだけです。

文字列中に含まれる日本語の日付表記を、スラッシュ区切りの簡易表記に変換する正規表現での置換ソース例

以下のように書けば、対象文字列中に含まれる日本語の日付表記(yyyy年mm月dd日)を、簡易表記(yyyy/mm/dd)に置き換えます。

// 置換処理
var ResString = TargetString.replace( /(\d+)年(\d+)月(\d+)日/g , "$1/$2/$3" );
// 結果表示
alert( ResString );

※正規表現部分の解説：

「\d」は任意の数字にマッチ、「+」は1回以上の繰り返しを表すため、「\d+」は1文字以上の連続する数字にマッチする正規表現です。これらを丸カッコで囲んでいるのは、該当文字列を置換後の文字列内で利用するため(後方参照で利用するため)です。また、正規表現の最後にグローバル修飾子「g」を記述しているので、正規表現にマッチするすべての文字列が置換対象になります。グローバル修飾子がなければ、最初にマッチした1つだけが置換対象になります。

※置換後の文字列部分の解説：

「$1」～「$3」は、JavaScriptの正規表現での「後方参照」の書き方です。バックスラッシュ記号(円記号)を使った「\1」～「\3」ではない点に注意して下さい。また、これらは引用符の内側に記述しなければならない点にも注意して下さい。

上記のサンプルでは、ボタンをクリックすると、2つの「日本語での日付表記」(yyyy年mm月dd日)が、「簡易表記」(yyyy/mm/dd)に変わります。(入力欄の内容を自由に書き換えて試せます。)
具体的には、以下のように変換されるはずです。

• [置換前] 平成25年度は、2013年4月1日から2014年3月31日です。
• [置換後] 平成25年度は、2013/4/1から2014/3/31です。

上記のように、日付を構成する部分だけを抜き出して別の形式に変換するような処理も簡単にできます。

正規表現での置換の記述方法(検索文字列が変数に格納されている場合)

先ほどの例では検索文字列や正規表現をソース中に直接記述しました。それに対して、変数に格納されている文字列を使って検索したり、正規表現そのものも変数に入れて置換処理を行いたい場合、先ほどの記述方法は使えません。
その場合は、コンストラクタ関数RegExpを使って以下のように記述します。

var SearchString = "検索文字列(正規表現)";
var RegularExp = new RegExp( SearchString, "修飾子" );
var ResString = TargetString.replace( RegularExp , "置換後の文字列" );

SearchString変数が「検索する文字列(正規表現)」で、ReplaceString 変数が「置換後の文字列(正規表現)」で、TargetString変数が「検索対象の文字列」です。

文字列中に含まれる日付表記を自由に変換する正規表現での置換ソース例

先ほどと同様に、文字列中の日付を日本語表記から簡易表記に変換(置換)するなら、以下のように書けば良いでしょう。

var SearchString = "(\d+)年(\d+)月(\d+)日";
var RegularExp = new RegExp( SearchString, "g" );
var ReplaceString = "「$1/$2/$3」";
var ResString = TargetString.replace( RegularExp , ReplaceString );

上記のソースを使ったサンプルを以下に示しておきます。試してみて下さい。

ユーザが入力した文字列を都合の良いように整形したい場面はたくさんあるでしょうから、そういうときにはこの正規表現を使って文字列を置換する方法が役に立つでしょう。上記ではちょっと正規表現を複雑にしようかと思って「日付」を例にしましたが、全角英数字を半角英数字に置き換えるとか、電話番号や郵便番号のハイフンを一括で抜くとか、いろいろ活用場面はありそうです。

(更新日：2017年06月13日)