文字列を扱う際に、特定の文字列を別の文字列に置き換える操作をすることはよくありますよね。
ですが、テキストエディタで1つ1つ検索して書き換えるのは効率的ではないので、まとめて置き換えたいということが多々あると思います。
その際に活用できるのが、replaceメソッドです。
今回は、replaceメソッドの基本的な使い方から、実践的な内容まで詳しく解説していきたいと思います。
JavaScriptのreplaceメソッドとは？
replaceメソッドは、文字列の中に存在する特定の記号や文字などを、別の文字に置換することができるメソッドです。
例えば、文字列に含まれている空白文字を削除したい、あるいは日付の表記を任意の書式に変更したいなど、文字列の一部のみを変更したい場合によく使用されます。
文字列を扱う際に、取得したデータが期待する書式と一致しないケースなどはよくあるため、プログラミング全体で見ても使用頻度は比較的高めのメソッドであると言えるでしょう。
replaceメソッドの使い方
それでは早速、replaceの使い方について見ていきましょう。
基本構文
まずは、replaceメソッドの基本構文から解説していきます。
メソッドを使用する際は、以下のように記述します。
【基本構文】
対象の文字列.replace(置換する文字, 置換後の文字);メソッドの第１引数に置換したい文字を指定し、第２引数にどの文字へと置換するかを指定します。
これにより、文字列内にある対象の文字を第２引数で指定した文字へと置換し、置き換えた状態の文字列をメソッドの戻り値として返却してくれます。
任意の文字列を置換する
以下の簡単なサンプルコードから、メソッドの実際の動きを見てみましょう。
【サンプルコード】
// 置換対象の文字列
const sampleString = "sampleString";
// 置換前の文字列を表示
console.log(sampleString);
// 置換処理
const resultString = sampleString.replace("sample", "test");
// 結果表示
console.log(resultString);【サンプルコード】
sampleString
testString上記のコードでは、文字列内にある 「sample」 の文字を 「test」 へと置換しています。
メソッドの引数に指定した通りに置き換わっているのが分かりますね。
replaceメソッドの基本的な動きは、以上の通りとなります。
複数の文字列を置換する
JavaScriptの replaceメソッドを使用するにあたり、気を付けるべきポイントがあります。
まずは、以下のサンプルコードをみてください。
【サンプルコード】
const sampleString = "2020-08-20";
const resultString = sampleString.replace("-", "/");
console.log(resultString);【実行結果】
2020/08-20実行結果を見てみると、文字列内に２つ存在する対象の文字のうち、最初の１つしか置換されていないのが分かると思います。
このように、JavaScriptの replace メソッドでは、指定の文字が複数含まれている場合に、最初に一致した文字しか置換されません。
他の言語では、メソッド名は同様でも全ての文字が置換されるケースが多いため、JavaScript以外の言語に慣れている人は特に注意するべきポイントです。
これまで解説した基本的な方法で全ての文字を置換しようとする場合、replaceメソッドを繰り返し使用する必要があります。
例えば、以下のように反復処理を使用して、全ての文字が置換されるまで replaceメソッドを繰り返すといった方法ができます。
【サンプルコード】
let str = "2020-08-20";
let result = str.replace("-", "/");
while(str !== result) {
str = result;
result = result.replace("-", "/");
}
console.log(result);【実行結果】
2020/08/20先ほどとは変わり、対象の文字が全て置換されているのが分かりますね。
結果だけで言えば、上記の方法で対応することは十分可能であるように見えるでしょう。
ですが、このやり方では記述するコード量が必然的に多くなってしまうため、プログラムの効率や可読性の高さといった点から見ると、あまり良い方法であるとは言えません。
また、上記のサンプルの場合は問題なく実行できますが、内容によってはエラーの原因となってしまう可能性があります。
安全性の点から見ても、意図しない動作や不具合が発生しやすく、運用には向かない方法であると言えるでしょう。
JavaScriptでは、上述の方法を使用せずとも、少ないコードで安全に実行できる方法がいくつか存在します。
それぞれの使用方法について、順に説明していきたいと思います。
複数の文字列をreplaceAll()で全て置換する
文字列内に対象の文字が複数ある場合に、全てを置換できる方法の１つが、replaceAllメソッドを使用する方法です。
使用する際の基本構文は、replaceメソッドとほとんど変わりません。
【基本構文】
対象の文字列.replaceAll( 置換する文字, 置換後の文字 );第１引数に置換対象の文字を指定し、第２引数でどの文字に置換するかを指定します。
replaceAllメソッドを使用することにより、少ないコードで全ての対象の文字を置換することができます。
サンプルコードで実際の動きを見てみましょう。
【サンプルコード】
const str = "apple,orange,peach,apple,banana";
const result = str.replaceAll("apple", "りんご");
console.log(result);【実行結果】
りんご,orange,peach,りんご,banana先ほどよりもかなりすっきりとした、見やすいコードになりましたね。
置換する文字の種類やパターンが１通りのみの場合は、このように replaceAllメソッドで対応が可能です。
ただし、replaceAllメソッドは比較的新しいメソッドのため、古いブラウザでは対応していない場合があります。
使用環境によってはメソッドを使うことができないため、注意が必要です。
また、複数の種類やパターンの文字を一度に置換したいケースには対応できないため、その場合は後述する正規表現を使用する方法を活用してください。
正規表現を利用して文字列を置換する
replaceメソッドは、正規表現と組み合わせることによって、より複雑な条件に対応できるようになります。
これまで解説した replaceメソッドの使い方では、aを指定すれば a のみ、Helloを指定すれば Hello のみといったように、決まった単一の文字や１パターンの文字列しか置換することができませんでした。
置換後の文字に関しても同様です。
一方、正規表現を活用すると、アルファベットに該当するもの全てを置換したり、数字3つが連続して並ぶ箇所のみを置換したりといったように、置換する文字列の条件を柔軟に決めることができます。
或いは、冒頭の日付の表記変更の例でも出した 「2020/08/20 → 2020年8月20日」 といったケースのように、置換後の文字のパターンを複数組み合わせることも可能です。
ここからは、正規表現を使用して文字列を置換する方法について解説していきたいと思います。
正規表現に一致する任意の文字列を置換する
JavaScriptdeで正規表現を使用する際は、以下のように / (スラッシュ) で囲い、その中に指定する条件を記述します。
条件の指定は、文字クラスや数量子、 アサーション (位置指定) といった様々なメタ文字を組み合わせて行います。
メタ文字の種類は多岐に渡るため、今回はその中から使用頻度の高い代表的なものを抜粋して紹介します。
| メタ文字 | 説明 |
|---|---|
| * | 直前のパターンの０回以上の繰り返し |
| + | 直前のパターンの１回以上の繰り返し |
| ? | 直前のパターンの０回か１回の繰り返し |
| {n} | 直前のパターンのｎ回の繰り返し |
| {n,} | 直前のパターンのｎ回以上の繰り返し |
| {n,m} | 直前のパターンのｎ~m回の繰り返し |
| . | 改行文字を除く1文字 |
| [] | [] 内のいずれか１文字 |
| [^] | [] 内の文字に該当しない いずれかの１文字 |
| \d | いずれかの数字に該当 |
| \n | 改行文字に該当 |
| \s | 空白文字に該当 |
| ^ | 文字列の先頭 |
| $ | 文字列の末尾 |
replaceメソッドの第1引数に正規表現を記述することで、置換する文字の条件を指定することができます。
【基本構文】
対象文字列.replace(正規表現, 置換後の文字)以下のサンプルコードで、実際の動きを見てみましょう。
【サンプルコード】
const str = "012-3abc4-567";
const result = str.replace(/[a-z]+/, "***");
console.log(result);【実行結果】
012-3***4-567このサンプルコードにおける正規表現は、「/[a-z]+/」 の部分です。
[] はその中のいずれか１文字を指し、a-z と記述することで小文字のアルファベット全般を指すことができます。
＋は直前のパターンの１回以上の繰り返しを表すため、この場合は小文字のアルファベットが１つ以上連なる文字列が置換対象となります。
実行結果を見ると、条件に一致する 「abc」 の部分が指定の文字列に置き換わっているのが分かりますね。
これが、正規表現の基本的な使い方です。
正規表現に一致する任意の文字列を全て置換する
先ほどの表記だけでは、最初に一致した文字しか置換されず、全てを一度に置き換えることはできません。
そこで、正規表現の指定時に、グローバルフラグと呼ばれる機能を設定します。
これにより、文字列内にある全ての対象の文字を置換することができます。
グローバルフラグは、正規表現パターン末尾のスラッシュの後ろに 「g」 を追加することで設定可能です。
以下のサンプルコードを見てみましょう。
【サンプルコード】
const str = "123ab456cd789";
const result = str.replace(/[a-z]+/g, "-");
console.log(result);【実行結果】
123-456-789グローバルフラグを設定することにより、条件に一致する全ての文字列を置換することができました。
使用する環境や置換したい文字列の内容によりreplaceAllメソッドでは置き換えができない場合には、この方法を活用しましょう。
キャプチャグループ（$1, $2, …）で置換しない文字列を指定する
先ほどまでは、置換する文字列を正規表現で指定していましたが、キャプチャグループという機能を使用することによって、反対に置換しない文字列を指定することもできます。
キャプチャグループとは、()で囲んだ条件に一致する文字列を、１つのグループとして取得することができる機能です。
取得した文字列は、各グループごとに 「$1」「$2」 といった形式で扱うことができるため、これにより置換する文字列とそうでない文字列を正規表現を使用して振り分けることができます。
文章のみでは想像が付きづらいかと思うので、以下のサンプルコードを見ながら実際の使い方を確認していきましょう。
【サンプルコード】
const str = "2025-08-20";
const result = str.replace(/(\d+)-0?(\d+)-0?(\d+)/, "$1年$2月$3日");
console.log(result);【実行結果】
2025年8月20日上記のサンプルコードのうち、(\d+) と記述された部分がキャプチャグループです。
この場合は、$1に 「2025」、$2に 「8」、$3に 「20」 がそれぞれ入ります。
キャプチャグループを使用する最大のメリットは、置換後の文字列を柔軟に指定できる点にあります。
キャプチャグループによって取得した文字はそのまま第２引数で使用することができるため、グループ化した文字列はそのままに、置換後の文字列全体の形式を自在に組み合わせることができます。
例えば、上記のサンプルコードを正規表現のみで条件指定した場合、数値ごとの間に挟まる 「-」 を別の文字に置換することはできますが、上記のように 「〇〇年〇〇月〇〇日」 といったそれぞれ別の文字に一度に置換することはできません。
キャプチャグループ機能と合わせた使用方法であれば、上述した異なる文字への同時置換だけでなく、グループごとの配置の置き換えなども簡単に行うことができます。
【サンプルコード】
const sampleString = "Taro Yamada, Jiro Tanaka";
const result = sampleString.replace(/(\w+)\s(\w+),\s(\w+)\s(\w+)?/, "$1 $4, $3 $2");
console.log(result);【実行結果】
Taro Tanaka, Jiro Yamadareplaceメソッドの活用例
最後に、実際の開発でよくある replaceメソッドの使用例をいくつか紹介したいと思います。
ぜひ参考にしてみてください。
改行文字をHTMLの改行タグに置換する
まずは、改行文字を<br>タグに置換する例について紹介します。
テキストファイルなどに含まれている改行文字を、正規表現を使用してHTMLの
タグに置換するケースです。
以下のサンプルコードを見てみましょう。
【サンプルコード】
const str = "これはサンプルコードです。\n改行文字を置換します。";
const result = str.replace(/(\r\n|\n|\r)/g, "<br>");
console.log(result);【実行結果】
これはサンプルコードです。<br>改行文字を置換します。改行コードはOSにより、「\r\n」、「\n」、「\r」 のうちいずれかとなるため、「(\r\n|\n|\r)」 と表記することで対応可能となります。
文字列内の不要な空白を削除する
次に、文字列の中に含まれているスペース (空白文字) を削除する方法について紹介します。
文字列内の不要なスペースを無くしたい場合は、空白文字を空文字に置換して削除します。
【サンプルコード】
const str = "abc def hij";
const result = str.replace(/\s+/g, "");
console.log(result);【実行結果】
abcdefhij正規表現で空白文字を表す際は、「\s」 と記述します。
空白文字の対象には、半角スペースや全角スペースだけでなく、タブなども含まれます。
数値に一定間隔でカンマを挿入する
次に、数値に一定間隔でカンマを付与する方法について紹介します。
よくあるケースとして、3桁区切りでカンマを付与したい場合などに活用できる方法です。
カンマ区切りを行う際は、正規表現とキャプチャグループを組み合わせて置換を行います。
まずは、以下のサンプルコードを見てみましょう。
【サンプルコード】
let str = '123456789';
let result = str.replace(/^(\d+)(\d{3})/,"$1,$2");
while (str !== result) {
str = result;
result = result.replace(/^(\d+)(\d{3})/,"$1,$2");
}
console.log(result);【実行結果】
123,456,789ポイントは、「^(\d+)(\d{3})」 の記述で、対象の文字列を下３桁とそれ以上の桁の２グループに分けることです。
グループ同士の間にカンマを打つことで、区切られた下３桁は正規表現で指定した条件の対象外となるため、これを繰り返して残りの桁も３桁ごとに区切っていきます。
最終的に、３桁ごとの区切りができなくなった時点で while文の終了条件が満たされるため、ループを抜けて処理が完了します。
なお、異なる桁数でカンマ区切りを行いたい場合は、{}内の数値を変更すれば OKです。
replaceの引数に関数を指定する
replaceメソッドの第2引数には、文字列の他に関数を指定することも可能です。
例えば、条件に一致する文字列を取得した後、指定した関数に渡して処理を行うといったような、より複雑な処理に対応できるようになります。
以下のサンプルコードで、実際の動きを見てみましょう。
【サンプルコード】
const str = 'THIS IS SAMPLE';
const result = str.replace(/[A-Z]/g, toLowerStr);
console.log(result)
function toLowerStr(str) {
return str.toLowerCase();
}【実行結果】
this is sample上記のサンプルコードでは、大文字のアルファベットを全て取得し、それらを関数内の処理で小文字に変換してから返却しています。
文字列だけでは指定が難しい内容も、関数を利用することによって柔軟な処理が可能となるため、ぜひ活用してみてください。
まとめ
いかがでしたか？今回は、replaceメソッドの使い方について解説を行いました。
メソッド単体だけでなく、正規表現とも上手く組み合わせて、上手に使いこなしていきましょう。
関連記事
- JavaScriptとは？初心者向けにできることや基本的な書き方を解説
- JavaScriptが初心者におススメな理由を現役プログラマーが解説
- 【JavaScript入門】簡単なサンプルコードを実行して習得
- 【JavaScript入門】getElementByIdの使い方をわかりやすく徹底解説
- 【JavaScript入門】forEachメソッドで配列の各要素に処理を繰り返す！使い方から注意点まで徹底解説
JavaScriptの勉強方法は？
書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。
ただ、JavaScriptに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。
プログラミングスクールならテックマニアがおすすめ！
ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。
＜テックマニアの特徴＞
・たしかな育成実績と親身な教育 ～セカンドキャリアを全力支援～
・講師が現役エンジニア ～“本当”の開発ノウハウを直に学べる～
・専属講師が学習を徹底サポート ～「わからない」を徹底解決～
・実務ベースでスキルを習得 ～実践的な凝縮カリキュラム～
このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。
