【JavaScript】正規表現でパターンマッチする文字列を置換する!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2023年10月26日に投稿されました。)

JavaScriptでは、正規表現を利用することで、パターンにマッチする文字列を別の文字列へと置換することができます。

文字列を置換するにはreplace()やreplaceAll()の対象の文字列に正規表現を指定します。

そのため、無数に存在する文字列のパターンを全て対象の文字列にすることができ、指定した文字列へ置換することができます。

また、繰り返し処理を利用することで、配列に格納されている要素を置換対象とすることができます。

以上のことから無数に存在するパターンでも1つにまとめで表現できるため、もし正規表現の置換についてまだ覚えていない場合はこの記事を読んで覚えておきましょう。

今回はJavaScriptの正規表現でパターンマッチする文字列を置換する方法について紹介していきます。

この記事はこんな方におすすめ

条件にマッチする文字列を一括で置換したい場合

受け取った文字列のデータを別のフォーマットへ変換したい場合

正規表現とは

正規表現とは、いくつかの文字列をパターンでマッチするよう一つの形式で表現するための方法となります。

例えば、「[A-Z{3}]とする場合、「AからZの3文字」となるため、「ABC」や「CVB」や「ZXS」などがマッチングします。

もし、正規表現の書き方や使い方について詳しくしたい場合は下記の記事をご参照ください。

正規表現でパターンマッチする文字列を置換するには

正規表現でパターンマッチする文字列を置換するには下記のメソッドを使用します。

  1. replace()
  2. replaceAll()

replace()とは、対象の文字列を指定した文字列に置換するメソッドになります。

また、replaceAll()とは対象の文字列全てを指定した文字列に一括で置換するメソッドになります。

そのため、下記のようにreplace()やreplaceAll()の引数に正規表現を指定することで、正規表現でパターンマッチする文字列を置換することができます。

もし、replace()ついて詳しくしたい場合は下記の記事をご参照ください。

正規表現でパターンマッチする文字列を置換するサンプルコード

正規表現でパターンマッチする文字列を置換するサンプルコードをご紹介します。

ここでは、下記の2つのパターンで正規表現による文字列の置換を行います。

  1. 正規表現の文字列が見つかる場合
  2. 正規表現の文字列が見つからない場合

正規表現の文字列が見つかる場合

正規表現の文字列が見つかる場合は、パターンにマッチングした文字列を指定した文字列に置換します。

● main.js

実行結果

文字列が見つかる場合に正規表現でパターンマッチする文字列を置換した結果

replace()で対象の文字列を正規表現で置換しています。

今回は、「AからZの3文字」と「aからzの8文字」の正規表現としているため、「大文字のアルファベット3文字」と「小文字のアルファベット8文字」の文字列が置換対象となります。

そのため、「ABC」が「**」に、「abcdefgh」が「****」となって表示されています。

正規表現の文字列が見つからない場合

正規表現の文字列が見つからない場合は、置換しないでそのままの文字列を返します。

● main.js

実行結果

文字列が見つからない場合に正規表現でパターンマッチする文字列を置換した結果

replace()で対象の文字列を正規表現で置換しています。

今回は、「aからzの3文字」の正規表現としているため、「小文字のアルファベット3文字」の文字列が置換対象となります。

そのため、置換対象の文字列が見つからず、文字列がそのまま表示されています。

正規表現でパターンマッチする文字列を一括で置換する場合

正規表現でパターンマッチする文字列を一括で置換するには正規表現のオプションに「g」を指定します。

正規表現のオプションである「g」はグローバル検索であり、パターンマッチするすべての文字列を対象にすることができます。

そのため、正規表現でパターンマッチする文字列を一括で置換することが可能になります。

また、replace()だけでなく、replaceAll()を使用することでも対象の文字列を一括で置換することが可能になります。

● main.js

実行結果

正規表現でパターンマッチする文字列を一括で置換した結果

正規表現でパターンマッチする文字列を一括で置換しています。

今回は、「AからZの3文字」と「A-Zの4文字(大文字小文字の区別なし)」の正規表現としているため、「大文字のアルファベット3文字」と「大文字小文字のアルファベット4文字」の文字列が置換対象となります。

そのため、「ABC」と「DEF」と「GHI」と「JKL」が「**」となり、「abcd」と「efgh」と「ijkl」が「****」となって表示されています。

Sossy

replaceAll()の場合は、正規表現のオプションにgを指定しないとエラーになりますので注意してください。

正規表現でパターンマッチングする文字列を置換する実際のケース

正規表現でパターンマッチングする文字列を置換する実際のケースについてご紹介します。

ここでは、正規表現による文字列の置換を下記の3ケースで使用します。

  1. 文字列内の単語を変換する場合
  2. フォーマットを変更する場合
  3. HTMLタグの削除を行う場合

文字列内の単語を変換する場合

正規表現で文字列の置換を行うことで文字列内の単語を変換することができます。

例えば、「パターンが共通している文字列を別の文字に変換したい」という場合に使用することができます。

● index.html

● main.js

実行結果

正規表現による置換を利用して文字列内の単語の置換を行った結果その1

実行結果(書き出したファイル)

正規表現による置換を利用して文字列内の単語の置換を行った結果その2

replace()で対象の文字列を正規表現で置換しています。

今回は、「aからzが4文字以上」の正規表現としているため、「小文字のアルファベット4文字以上」の文字列が置換対象となります。

そのため、toUpperCase()でアルファベットの小文字がすべて大文字となり、「pig」以外の文字列が大文字となって表示されています。

フォーマットを変更する場合

正規表現で文字列の置換を行うことでフォーマットを変更することができます。

例えば、「文字のデータを日付のフォーマットに変更して表示したい」という場合に使用することができます。

● index.html

● test.txt

● main.js

実行結果

正規表現による置換を利用して日付のフォーマットを変更した結果

replace()で対象の文字列を正規表現で置換しています。

今回は、「数字4文字 + 数字2文字 + 数字2文字」の正規表現としているため、「数字8桁」の文字列が置換対象となります。

そのため、数字8桁で並んでいたフォーマットが年月日のフォーマットに変換されて表示されています。

HTMLタグの削除を行う場合

正規表現で文字列の置換を行うことでHTMLタグの削除ができます。

例えば、「とある処理で取得したデータの特定のタグのみ取り出したい」という場合に使用することができます。

● index.html

● test.html

● main.js

実行結果

正規表現による置換を利用してHTMLタグの削除を行った結果

正規表現による文字列の置換でHTMLタグの削除を行っています。

今回は、「< + /が付くか付かない + html + 任意の文字 + >」もしくは「< + /が付くか付かない + body+ 任意の文字 + >」もしくは「」の正規表現としているため、「htmlタグとbodyタグの開始タグ、終了タグ」と「」が置換対象となります。

そのため、htmlタグとbodyタグが除去されたHTMLコードが表示されています。

正規表現でパターンマッチする配列の要素を置換する場合

正規表現でパターンマッチする配列の要素を置換するには、繰り返し処理を使用します。

そのため、繰り返し処理の中に正規表現で文字列を置換する処理を追記することで、取り出した要素に対して正規表現の置換を行うことができます。

● main.js

実行結果

正規表現でパターンマッチする配列の要素を置換した結果

forEach()で配正規表現でパターンマッチする配列の要素を置換しています。

今回は、「aからzの3文字(大文字小文字の区別なし)」もしくは「1から9の3文字」もしくは「英数文字以外の3文字」の正規表現としているため、「同じ種類の文字からなる3文字」の文字列が置換対象となります。

そのため、「ABCDEFGH」が「******GH」、「abcdefgh」が「******gh」、「アルファベット」が「******ト」、「123456789」が「*********」、「a123b456c789」が「a***b***c***」、「阿流負亜別斗」が「******」となって表示されています。

もし、forEach()ついて詳しくしたい場合は下記の記事をご参照ください。

まとめ

⚫︎ 正規表現とはいくつかの文字列をパターンでマッチするよう一つの形式で表現するための方法である。

⚫︎ 正規表現でパターンマッチする文字列を置換するには下記のメソッドを使用する。
・replace()
(対象の文字列を指定した文字列に置換するメソッド)
・replaceAll()
(対象の文字列全てを指定した文字列に置換するメソッド)

⚫︎ 正規表現の文字列が見つかる場合は、パターンにマッチングした文字列を指定した文字列に置換する。

⚫︎ 正規表現の文字列が見つからない場合は、置換しないまま文字列を返す。

⚫︎ 正規表現でパターンマッチする文字列を一括で置換するには正規表現のオプションに「g」を指定する。

⚫︎ 正規表現でパターンマッチする配列の要素を置換するには、繰り返し処理を使用する。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA