JavaScriptで正規表現を利用して文字列を置換する方法を現役エンジニアが解説【初心者向け】

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

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

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

 

 

目次

• JavaScriptでの正規表現の使い方
• 正規表現を利用して文字列を置換する方法<
• 実際に書いてみよう
• まとめ

 

JavaScriptでの正規表現の使い方

正規表現とは一定のルールに従った文字を組み合わせることで任意の文字列を表現する仕組みです。

入力された文字列の書式をチェックしたり、複雑な検索を行う場合に使用されます。正規表現は多くのルールがあり使いこなすのが大変なので、基本的な使い方を覚えてWebのサンプルや書籍などを参考にしながら活用すると良いでしょう。

正規表現について、詳しくは以下の記事も参考にしてください

MDN – 正規表現

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

正規表現を利用して文字列を置換する方法

正規表現を利用して文字列を置換するにはreplace()メソッドを使用します。

置換後の文字列 = 文字列.replace(/正規表現/オプション, 置換文字列);

正規表現で置換対象の文字列を指し示します。オプションにはいくつかの種類があり、日本語を使用する場合には「u」、全ての該当する文字列を置換するには「g」を指定します。

例えば以下は文字列中に現れる「いちご」という文字をすべて「イチゴ」に置換する書き方です。

const text2 = text1.replace(/いちご/gu, 'イチゴ');

replace()メソッドについて、詳しくは以下の記事も参考にしてください

MDN – String.prototype.replace()

関連記事：JavaScriptでreplaceメソッドを使って指定した文字列を削除する方法を現役エンジニアが解説【初心者向け】

関連記事：JavaScriptのreplaceメソッドとreplaceAllについてを現役エンジニアが解説【初心者向け】

実際に書いてみよう

今回のサンプルプログラムでは正規表現を利用して文字列を置換する方法について確認します。実行はChromeブラウザーのデベロッパーツールで行いましょう。

はじめにもととなる文字列を定義します。

const text1 = 'いちごは生でも、苺ジャムにしても美味しい果物ですね。nそんないちごは農林水産省では「果実的野菜」という野菜に分類しています。n苺が野菜だなんて不思議ですね。';
console.log(text1);

実行結果は以下のとおりです。

いちごは生でも、苺ジャムにしても美味しい果物ですね。
そんないちごは農林水産省では「果実的野菜」という野菜に分類しています。
苺が野菜だなんて不思議ですね。

それでは、最初に現れる「いちご」だけを「イチゴ」に置換してみましょう。

const text2 = text1.replace(/いちご/u, 'イチゴ');
console.log(text2);

実行結果は以下のとおりです。

イチゴは生でも、苺ジャムにしても美味しい果物ですね。
そんないちごは農林水産省では「果実的野菜」という野菜に分類しています。
苺が野菜だなんて不思議ですね。

全ての「いちご」を「イチゴ」に置換するにはグローバルサーチオプション「g」を指定します。

const text3 = text1.replace(/いちご/gu, 'イチゴ');
console.log(text3);

実行結果は以下のとおりです。

イチゴは生でも、苺ジャムにしても美味しい果物ですね。
そんなイチゴは農林水産省では「果実的野菜」という野菜に分類しています。
苺が野菜だなんて不思議ですね。

正規表現の部分はRegExp()で記述することもできます。

const text4 = text1.replace( new RegExp('いちご', 'gu'), 'イチゴ');
console.log(text4);

実行結果は上記と同様です。

イチゴは生でも、苺ジャムにしても美味しい果物ですね。
そんなイチゴは農林水産省では「果実的野菜」という野菜に分類しています。
苺が野菜だなんて不思議ですね。

「いちご」または「苺」を「イチゴ」に置換することもできます。このように様々なルールを表現できることが正規表現の魅力です。

const text5 = text1.replace(/いちご|苺/gu, 'イチゴ');
console.log(text5);

実行結果は以下のとおりです。

イチゴは生でも、イチゴジャムにしても美味しい果物ですね。
そんなイチゴは農林水産省では「果実的野菜」という野菜に分類しています。
イチゴが野菜だなんて不思議ですね。

 

まとめ

今回の記事ではJavaScriptで正規表現を利用して文字列を置換する方法を学習しました。

筆者プロフィール

太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。 開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント。 地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

 

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

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。