SE

JavaScriptで文字列の置換を行いたい時に使用するreplaceについて教えてください。

PM

分かりました。それでは、replaceを使用した文字列の置換方法についてご紹介しましょう。

JavaScriptのreplaceとは？

JavaScriptで文字列の中のある単語を、別の単語に置き換えたいことはよくあると思います。そんな時に役立つのがreplaceメソッドです。replaceは最初に指定した文字列を、次に指定した文字列に置換してくれます。以下が簡単な使用例です。

JavaScriptの文字列は.replaceで置換処理を呼び出せます。最後のalertは指定された文字列を表示したポップアップウィンドウを出すメソッドです。

実行すると「私はミカンが好きです。」と書かれたポップアップウィンドウが表示されます。text1のリンゴがミカンに置換されていますね。

replaceの落とし穴

では次にこのJavaScriptのサンプルのtext1の内容を少し変えてみましょう。

結果は「私はミカンが好きなのでリンゴを食べます。」になります。1つ目のリンゴしか置換されていません。ここまでの使い方だと、replaceは1つしか置換してくれないのです。

正規表現を使おう

全ての文字列を置換するにはどうしたらよいのでしょうか。それには「正規表現」を使用します。正規表現は文字列を置換するための機能で、JavaScript以外のプログラミング言語でも広く普及しています。

JavaScriptで正規表現を使う場合、/（スラッシュ）で正規表現を囲みます。そしてすべての対象を置換する場合は、「/正規表現/g」のように末尾にgを追加します。

/正規表現/gで全て置換できる

今回のJavaScriptサンプルで正規表現を使う場合は、以下のようにします。

実行すると「私はミカンが好きなのでミカンを食べます。」と表示されます。対象の文字列が全て置換されることがわかりますね。

iを付けると大文字小文字を無視できる

/正規表現/にgだけてなくiも付けると、以下のように大文字と小文字の違いを無視できます。

実行すると「Melon Orange Grape」と表示されます。appleでAppleを置換できていますね。なおiはignore（無視）の頭文字です。

文字列の位置の入れ替えの例

正規表現は様々なことが出来ます。例えば、

とすると「私はミカンが好きですがリンゴは嫌いです。」と表示されます。(.*)の.は任意の1文字で、*はそれが0文字以上続くという意味です。

(リンゴ)が$1、(.*)が$2、(ミカン)がS3に該当し、リンゴとミカンを逆にすることができています。

$&を使った例

特定の文字列を操作したい場合は、以下のJavaScriptサンプルのように$&を使うと便利です。

実行すると「私はリンゴジュースが好きですがミカンジュースは嫌いです。」と表示されます。$&で正規表現でマッチした文字列に追加などができるのです。なお(a|b)は「aまたはb」という意味になります。

$と$\'を使った例

$&と似た機能で、$と$\’があります。

実行すると、「リンゴリンゴバナナ」と出た後に、「リンゴバナナバナナ」と表示されます。$`がマッチした文字列の前の文字列、$\’がマッチした文字列の後の文字列を意味します。なお$\’は本来は$’なのですが、シングルクォーテーションは\によるエスケープが必要になります。

数字の桁数指定の例

ネットを利用しているとクレジットカード番号を*で置き換えて表示しているのを見かけます。それをreplaceで行う場合は、以下のJavaScriptサンプルのようにします。

実行すると「**** **** ****」と表示されます。\dは数字を意味していて、その後の{数字}は、数字が指定した回数繰り返されるとマッチします。なお\dを[0-9]にしても同じ結果になります。

3桁カンマ区切りの例

1,000円のように、金額などの数値で3桁毎にカンマを入れることはよくあります。以下のJavaScriptサンプルでそれを実現できます。

実行すると「6,555,444,333,222,111」と表示されます。a(?=b)は「a’ に ‘b’ が続く場合のみ ‘a’ にマッチする」、a(?!b)は「’a’ に ‘b’ が続かない場合のみ ‘a’ にマッチする」と言う意味です。

つまり(\d)(?=(\d{3})+(?!\d))は「最初に数値があって、その後に3桁の数値が続いて、その後には数値が無い」という条件にマッチするということです。

スペース除去の例

replaceでスペース除去も簡単にできます。以下のJavaScriptサンプルをご覧ください。

実行すると「リンゴミカンバナナ」と表示されます。\sが半角・全角のスペースを意味して、+はそれが0回か1回続く、と言う意味になります。

replaceには関数も渡せる

replaceには関数を渡すことができます。以下のJavaScriptサンプルをご覧ください。

実行すると「APPLE ORANGE GRAPE」と表示されます。replaceの[a-z]で小文字の文字列が抽出されてtoUpper関数に渡され、その中でtoUpperCaseメソッドで大文字に変換されています。

SE

JavaScriptのreplaceについてよく分かりました。

PM

replaceは正規表現と組み合わせると非常に多くのことが出来るので、是非この記事を読んで理解を深めて下さい。

JavaScriptのreplaceを使いこなそう

JavaScriptのreplaceについて解説しましたが、ご理解頂けましたでしょうか。文字列を置換したい時はよくあるので、使う機会は多くなるでしょう。正規表現の機能についてはこの記事の内容はごく一部なので、是非他の機能も調べてテキスト処理を極めて下さい。