JavaScriptのreplace関数を利用して文字列の複数箇所を置換する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのreplace関数を利用して文字列の複数箇所を置換する方法について解説しています。replace()で複数の箇所を置き換えするにはRegExpオブジェクトを使用します。RegExpオブジェクトの使い方と実際の複数置き換えの例を見ていきましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

JavaScriptのreplace関数を利用して文字列の複数箇所を置換する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

replace関数を利用して文字列の複数箇所を置換する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

replace関数の使い方

文字列、または文字列を格納した変数に対して、.replace()と記述することで使えます。引数は下記の2つです。

  • 置換の対象にする文字列、または置換する文字パターン(RegExpオブジェクト)
  • 置換する文字列、または置換処理をする関数

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

文字列の複数箇所を置換する方法

replaceは、最初に一致した箇所のみを置換します。replaceで複数箇所を置換するには、第1引数を置換の対象にする文字列ではなく、文字パターン(RegExpオブジェクト)で指定する必要があります。そしてRegExpオブジェクトを生成する際の正規表現で、グローバルサーチを意味する g のフラグを付与します。そうすると、置換の対象が一致する全てになり複数箇所が置換されるようになります。

正規表現の記述および、フラグの種類などは、こちらのMDNの正規表現のページで確認してみてください。

また、ブラウザが対応していれば一致する全てを置換するreplaceAllというメソッドもあります。こちらであれば第1引数をRegExpオブジェクトにしなくても、一致する箇所を全て置換します。

replaceAllのブラウザ対応状況

 

実際に書いてみよう

それでは、複数の置換処理をおこないます。今回は、下記のような変数stringに格納された@が複数含まれた文字列の@をすべて*に置換します。

let string = 'あいうえお@か@き@くけこ'; 
let replaceString = string.replace(/@/g, '*');  //*か*き*くけこ

RegExpオブジェクトは、/(スラッシュ)で囲んで生成しています。今回は@という文字だけなので@を/(スラッシュ)で囲っています。そして、その後に記述した g がグローバルサーチをするフラグです。これで全ての@が置換の対象として検出され、第2引数に置き換えられます。

また、replaceメソッドは置き換えた文字列を返すメソッドなのでもとの文字列(今回の場合は変数のstring)は変更されずそのままの文字が格納されています。

最後に参考までに、第2引数を関数にすることで置換の条件を指定する方法を紹介します。第1引数の正規表現で数字のみを指定し、第2引数の関数で数字が2と3の場合のみ記号に置換しています。

let string = 'あいうえお1か23き4くけこ'; 
let replaceString = string.replace(/\d/g,  replaceFunction ); //あいうえお1か*¥き4くけこ

function replaceFunction(match){
  if(match === '2'){
    return '*';
  }else if(match === '3'){
    return '¥';
  }else{
    return match;
  }
}

 

まとめ

replaceを使って複数箇所を置換する方法を紹介しました。正規表現を使うことで複雑なパターンにも対応することができます。

 

監修してくれたメンター

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。