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

3D render of a round rugby stadium with  red seats and VIP boxes for hundred thousand people

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

目次

 
1.置換文字列を置換パターンに指定
2.置換文字列を複数指定
3.コールバック関数で指定

 

1.置換文字列を置換パターンに指定

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

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

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

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

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

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

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

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

 

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

▲目次へ戻る

2.置換文字列を複数指定

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

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

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

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

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

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

 

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

▲目次へ戻る

3.コールバック関数で指定

 
置換後文字列の代わりに、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]の中身を出力すると、次のようになります。

arguments[0]: 
arguments[1]: 
arguments[2]: 
arguments[3]: 
arguments[4]: 

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です