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

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

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

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

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

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

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

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

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

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

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

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

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

▲目次へ戻る

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

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

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

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

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

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

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

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

▲目次へ戻る

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

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

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

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

let str = "'ab','c',d,'ef'";
let 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]	検索対象の文字列

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

let str = "'',,f";
let 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]の中身を出力すると、次のようになります。

▲目次へ戻る