JavaScript【 replace 】3. 様々な置換方法
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]の中身を出力すると、次のようになります。
▲目次へ戻る
