JavaScriptのRegExpで文字列内の複数の単語を一括置換する方法を解説
はじめに
JavaScriptでは、正規表現(RegExp)を使うことで、文字列の中から複数の特定の単語を一度に検出し、まとめて別の値に置き換えることができます。この記事では、配列に格納された複数のキーワードを、RegExpオブジェクトとreplace()メソッドを組み合わせて一括置換する方法を解説します。
やりたいこと
たとえば、次のような文字列があるとします。
var sentence = "My Name is John Smith. I live in UK. My Favourite Subject is JavaScript."
この文章の中から、以下の配列に含まれるすべての単語を見つけ出し、「Not Available」という文字列に置き換えたいとします。
var values = ['John','Smith','UK','JavaScript']
期待される実行結果は次のとおりです。
My Name is Not Available Not Available. I live in Not Available. My Favourite Subject is Not Available.
この処理は、正規表現を使えばシンプルに実装できます。
コード例
実際のコードは以下のようになります。
var values = ['John','Smith','UK','JavaScript']
var sentence = "My Name is John Smith. I live in UK. My Favourite Subject is JavaScript."
var regularExpression = new RegExp(values.join('|'), 'gim')
sentence = sentence.replace(regularExpression, 'Not Available');
console.log(sentence);コードのポイント
- values.join('|'):配列の各要素をパイプ記号(|)で連結し、「John|Smith|UK|JavaScript」というパターンを作成します。正規表現では「|」がOR条件を意味するため、いずれかの単語にマッチします。
- 'gim'フラグ:「g」はグローバル検索(一致したすべてを対象)、「i」は大文字小文字を区別しない、「m」は複数行モードを意味します。これにより、文中のすべての出現箇所が確実に置換されます。
- sentence.replace():第1引数に正規表現、第2引数に置換後の文字列を指定することで、マッチしたすべての箇所が「Not Available」に置き換わります。
プログラムの実行方法
Node.js環境で上記のプログラムを実行するには、次のコマンドを使用します。
node fileName.js
ここでは、ファイル名をdemo279.jsとして保存しているものとします。
実行結果
コンソールには以下のように出力されます。
PS C:\Users\Amit\javascript-code> node demo279.js My Name is Not Available Not Available. I live in Not Available. My Favourite Subject is Not Available.
注意点
置換したい単語に正規表現で特別な意味を持つ記号(.や*など)が含まれている場合は、そのまま結合すると意図しない動作になることがあります。そのようなケースでは、各単語をエスケープしてからjoin('|')で結合すると安全です。
エスケープ処理の例
const escaped = values.map(v => v.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
const regularExpression = new RegExp(escaped.join('|'), 'gi');このように前処理を行うことで、より堅牢な置換処理が実現できます。
まとめ
JavaScriptで複数の単語を一括置換したい場合は、Array.prototype.join()で配列要素を「|」で連結して正規表現パターンを生成し、replace()メソッドに渡すのが効率的な方法です。「gim」などのフラグを適切に組み合わせることで、大文字小文字を問わず文中のすべての該当箇所を確実に置換できます。ぜひ実際のコードで試してみてください。
-
JavaScriptで配列の先頭(0番目)の要素を削除して残りの要素を取得する方法
JavaScriptのライブラリunderscore.jsに含まれる_.rest()メソッドは、配列の先頭(0番目)の要素を取り除き、それ以外の残りの要素を返します。このメソッドは2つの引数を受け取ります。1つ目は対象となる配列、2つ目はインデックスです。2つ目の引数を指定すると、その位置以降の要素から抽出が開始されます。 構文 _.rest( array, index ); 例:先頭の1要素だけを削除する場合 次の例では、_.rest()メソッドを使って配列の0番目の要素を削除しています。このとき、2つ目の引数は指定していません。 <html> <body> &l
-
JavaScriptで配列の要素を同じ配列内に複製する方法
JavaScriptでは、concat()メソッドとsort()メソッドを組み合わせることで、既存の配列の要素を同じ配列内に複製することができます。ここでは、実際に動作するサンプルコードを使って、その手順をわかりやすく解説します。 コード例 以下は、配列の要素を同じ配列内に複製するためのコード例です。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" cont