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

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

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

 

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

 

 

目次

• replace関数の使い方
• 文字列の複数箇所を置換する方法
• 実際に書いてみよう
• まとめ

 

replace関数の使い方

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

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

 

[PR] フロントエンドで副業する学習方法を動画で公開中

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

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では、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

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