にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

正規表現を使って文字列を置換する方法 [計算・変換]

ユーザが入力した文字列を都合の良いようにJavaScriptで整形したい場面はたくさんあるでしょう。そんなときには、正規表現を使って文字列を置換する方法が役に立ちます。検索文字列が固定されている場合はかなりシンプルな記述で済みます。変数に格納された文字列を検索文字列に使いたい場合は、RegExpコンストラクタ関数を使うことで実現できます。

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

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

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

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

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

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

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

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

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

JavaScriptソース

// 置換処理
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を使って以下のように記述します。

JavaScriptソース

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

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

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

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

JavaScriptソース

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

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

正規表現:
置換後文字列:
対象文字列:

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

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---