JavaScriptで正規表現により文字列を置換する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptで正規表現により文字列を置換する方法について解説しています。正規表現とは特定の文字列に対して特別な役割を与えて、検索に適した表現が出来るようにしたものです。データのバリデーションやWebスクレイピングなどに使用します。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptで正規表現により文字列を置換する方法について解説します。
実際のコードをもとに解説していきますので、理解を深めていきましょう。
また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
JavaScriptで正規表現により文字列を置換する方法について詳しく説明していくね！
お願いします！
正規表現とは
正規表現とは、文字列を表す「文字パターンの組み合わせ」です。文字パターンの組み合わせは所定のルールに基づいて記述されます。正規表現を用いると、文字列の照合や置換を柔軟に行うことができます。
正規表現により文字列を置換する方法
正規表現を使用するには、正規表現オブジェクト（パターン）を作成します。正規表現オブジェクトを作成するには、正規表現リテラルを用いる方法と、RegExpオブジェクトを用いる方法があります。
なお、グローバルマッチとは、一致した文字列をすべて返す正規表現の記法のオプションです。
// 正規表現リテラルを用いた方法
var pattern1 = /(Programmer|プログラマー)/;
// グローバルマッチ(一致した文字列をすべて返す)
var pattern1 = /(Programmer|プログラマー)/g;
// RegExpオブジェクトを用いた方法
var pattern2 = new RegExp("(Programmer|プログラマー)");
// グローバルマッチ(RegExpオブジェクトを用いた場合)
var pattern2 = new RegExp("(Programmer|プログラマー)", "g");
正規表現オブジェクトを用いて、文字列の照合や置換を行うことができます。正規表現オブジェクトは以下のメソッドで使用できます。
- RegExpクラス：exec、test
- Stringクラス：match、replace、search、split
正規表現について詳しくは以下の記事を参考にしてください。
実際に書いてみよう
今回のサンプルプログラムでは、正規表現を使用して文字列の照合や置換を行います。グローバルマッチを用い、一致した文字列をすべて対象としています。実行結果はコンソールに出力されます。
ブラウザがChromeの場合、デベロッパーツールのコンソールで確認できます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>sample</title>
</head>
<body>
<script language="javascript" type="text/javascript">
var intext = "Programmerはプログラマーと読み、プログラムを書く人、すなわちプログラマを指します。";
// 正規表現の作成
// (1)正規表現リテラルを用いた方法
var pattern1 = /(Programmer|プログラマー|プログラマ)/g;
// (2)RegExpを用いた方法
var pattern2 = new RegExp("(Programmer|プログラマー|プログラマ)", "g");
// 一致した結果を返す
console.log(intext.match(pattern1));
// 一致した文字列を置換する(1)
var out1 = intext.replace(pattern1, "PGM");
console.log(out1);
// 一致した文字列を置換する(2)
var out2 = intext.replace(pattern2, "pgm");
console.log(out2);
</script>
</body>
</html>
実行結果は以下のようになります。「Programmer」、「プログラマー」、および「プログラマ」が照合され、すべて置換出来ているのが分かります。
筆者プロフィール
| この記事を監修してくれた方
太田和樹（おおたかずき） ITベンチャー企業のPM兼エンジニア 普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。 開発実績：画像認識技術を活用した駐車場混雑状況把握（実証実験）、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント 地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。 |
内容分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
