【JavaScript】replace()メソッドで文字列を置換する

置換するならreplace()。

文字列の中からパターンに一致した部分を、置換後の文字列に置き換えます。

パターンには、文字列や正規表現が使えます。

replace()メソッドの構文

構文は次のとおりです。

str.replace(regex, substr);

strは元の文字列です。

regexは、置換したい文字列または正規表現を指定できます。

substrに入れられるのは、置換後の文字列だけではありません。[br num=”1″]関数も指定できます。[br num=”1″]指定した文字列か、関数の戻り値に置き換わります。

また、この置換後の文字列には、特殊変数も指定できます。[br num=”1″]使い方は、正規表現のところに記載します。

replace()メソッドで任意の文字を置換する

まずは正規表現を使わない場合から。[br num=”1″]置換したいところを文字列で指定します。

次の例では、カフェラテをソイラテに換えてみます。

var str = "caffe latte";
console.log(str.replace('caffe', 'soy'); //soy latte

replace()メソッドで正規表現を使って置換する

次に正規表現を使って置換します。

次の例では、電話番号のハイフンをカッコに換えます。

var str = "ご連絡は、フリーダイヤル0120-999-999。おかけ間違いのないようにご注意ください。";
var str_regex = /(0[0-9]{1,4})-([0-9]{1,4})-([0-9]{1,4})/;
console.log(str.replace(str_regex, $1($2)$3)); //ご連絡は、フリーダイヤル0120(999)999。おかけ間違いのないようにご注意ください。

今回は$1～$3の特殊変数を使ってみました。

使える変数は他にもいろいろあります。

グローバル検索（ｇフラグ）を使って２つ目以降も置換する

置換したいところが2か所以上あっても、そのままでは1つ目しか置換されません。

2つ目以降も置換対象としたい場合は、gフラグを指定します。

次の例では電話番号の箇所が２つあるため、正規表現の最後に「g」を入れています。

var str = "固定電話からは、フリーダイヤル0120-999-999まで。携帯電話からは、050-999-999までおかけください。";
var str_regex = /(0[0-9]{1,4})-([0-9]{1,4})-([0-9]{1,4})/g;
console.log(str.replace(str_regex, $1($2)$3)); //固定電話からは、フリーダイヤル0120(999)999まで。携帯電話からは、050(999)999までおかけください。

今回は数字と記号のみでした。

英字も含んでいて、大文字小文字を無視する場合はiフラグを使います。[br num=”1″]gフラグと併用するなら、「/g」のところを「/gi」とします。

まとめ：replace()メソッドはとても便利

とても便利なreplace。

いろんな言語に用意されているので、「置換するならreplace」とひとまず覚えておけば良いでしょう。

何度もgoogle先生に聞いて使っているうちに、徐々に身に付いていくはずです。