Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:47.

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

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

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

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

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)に変わります。(入力欄の内容を自由に書き換えて試せます。)

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

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

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

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

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

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど