JavaScript【 replace 】3 ～ 様々な置換方法

String オブジェクトのreplace メソッドを使用して文字列の置換を行う場合、指定した文字列を新たな文字列に置き換える以外にも、色々と便利な置換方法があります。
今回は、replace メソッド内でコールバック関数を使用する方法などを紹介します。

目次

　
１．置換文字列を置換パターンに指定
２．置換文字列を複数指定
３．コールバック関数で指定

　

１．置換文字列を置換パターンに指定

　
String オブジェクトのreplace メソッドを使用して文字列の置換を行う場合に、置換後の文字列として置換パターンを指定することができます。

置換パターンには次のようなものがあります。

置換 パターン	内容
$$	「 $ 」を挿入
$&	置換対象として指定した文字列を挿入
$`	置換対象として指定した文字列の直前の文字列部分を挿入
$’	置換対象として指定した文字列の直後の文字列部分を挿入
$n $nn	n か nn には 10 進表現の数が入る 第一引数が RegExp オブジェクトだった場合、n 番目の括弧でキャプチャされたサブマッチの文字列を挿入

次のサンプルは、指定した文字列を<b>と</b>で囲む置換処理をしています。

var str = "青は藍より出でて藍より青し";
var str2 = str.replace(/青|藍/g, "<b>$&</b>"); 

正規表現の後ろに記述する「 g 」は グローバルサーチという正規表現フラグで、指定した正規表現リテラルのパターンにマッチする全ての文字列を返します。
（正規表現の記述については、正規表現をご参照下さい。）

正規表現の中に記述している「 | 」は 左右の文字列のいずれかという意味のメタ文字です。
（メタ文字については、メタ文字を使用した置換をご参照下さい。）

変数str2を出力すると、次のように表示されます。

　
文字列の中の「 青 」と「 藍 」が b タグで囲まれました。

▲目次へ戻る

２．置換文字列を複数指定

　
正規表現で、置換対象をカッコ「 (　) 」で囲むことによって、複数の置換文字列を指定することができます。

置換処理を複数指定する場合は、次のように記述します。

var str = "青は藍より出でて";
var str2 = str.replace(/(青)は(藍)/g, "<b>$1</b>は<u>$2</u>);

正規表現の後ろに記述する「 g 」は グローバルサーチという正規表現フラグで、指定した正規表現リテラルのパターンにマッチする全ての文字列を返します。
（正規表現の記述については、正規表現をご参照下さい。）

「 $1 」や「 $2 」は、それぞれカッコ「 (　) 」で囲まれた文字列を示しており、置換後、$1 部分には先頭のカッコ内文字列が入り、$2 部分には先頭から2番目のカッコ内文字列が入ります。
$3、$4、…と、いくらでも指定できます。

変数str2を出力すると、次のように表示されます。

　
テキストの中の「 青 」が b タグで、「 藍 」が u タグで囲まれました。　

▲目次へ戻る

３．コールバック関数で指定

　
置換後文字列の代わりに、replace メソッド内の引数にコールバック関数を指定することもできます。

コールバック関数を指定すると、より複雑な処理を行うことができます。

コールバック関数を指定する場合は、次のように記述します。

var str = "'ab','c',d,'ef'";
var str2 = str.replace(/'.*?'/g,           
                        function(){
                            return arguments[0].toUpperCase();
                        });

「 arguments[0] 」は、返す値のことで、「 toUpperCase() 」は、小文字を大文字にするString オブジェクトのメソッドですので、このコールバック関数によって、置換対象文字列の小文字が大文字に置き替えられます。

「 /’.*?’/g 」の記述については、メタ文字を使用したパターンをご参照下さい。

変数str2を出力すると、次のように表示されます。

　
シングルコーテーション（ ‘ ）で囲まれた文字列の小文字が大文字に置換されました。　
　
　

arguments

先ほどのサンプルで、コールバック関数の返り値「 arguments[0] 」が出てきましたが、この arguments を利用して、コールバック関数内で条件分岐を行うことができます。

arguments

文字列 ．replace（　/'(.*?)’|<(.*?)>/g　,　コールバック関数　）；

上記のような指定をした場合、arguments の中身は以下の通りです。

arguments[0]	「 ‘ ‘ 」または「 < > 」で囲まれた文字列
arguments[1]	1番目のカッコ「 ( ) 」内に該当する文字列
arguments[2]	2番目のカッコ「 ( ) 」内に該当する文字列
arguments[arguments.length-2]	置換対象文字列の先頭の位置
arguments[arguments.length-1]	検索対象の文字列

次のサンプルは、コールバック関数内で条件分岐処理を行っています。

var str = "'',,f";
var str2 = str.replace(/'(.*?)'|<(.*?)>/g,
            function(){
                if(!arguments[1] && arguments[2]) {
                    return "[" + arguments[2] + "]";
                } else {
                    return arguments[0]
                }
            });

　
「 /'(.*?)’|<(.*?)>/g 」は、「シングルコーテーション（ ‘ ‘ ）内の文字列 または 山カッコ（ < > ）内の文字列全て」を意味しています。

「 arguments[1] 」は、1番目のカッコ内に該当する文字列「 <abc> 」を、「 arguments[2] 」は、2番目のカッコ内に該当する文字列「 de 」を それぞれ示しているため、「 !arguments[1] && arguments[2] 」の条件を満たすのは、「 <de> 」のみとなり、文字列「 [de] 」に置換されます。

「 ‘<abc>’ 」は、「 arguments[0] 」が示す「 ‘<abc>’ 」に置換されるため、結果的には変更はありません。

「 f 」は、置換対象に該当しません。

したがって、変数str2を出力すると、次のように表示されます。

　
因みに、arguments[0]?arguments[4]の中身を出力すると、次のようになります。

▲目次へ戻る