JavaScript：スプレッド構文を使用して正規表現に変数を使う

2024-04-02

JavaScriptで正規表現を使用する際、パターンの一部を動的に変化させたい場合、変数を使うことができます。

方法

変数を使う方法は2つあります。

リテラル正規表現

const str = "Hello, world!";
const name = "John";

// リテラル正規表現で変数を使用
const regex = new RegExp(`Hello, ${name}!`);
const result = regex.test(str);

console.log(result); // true

RegExp コンストラクタ

const str = "Hello, world!";
const name = "John";

// RegExpコンストラクタで変数を使用
const regex = new RegExp("Hello, " + name + "!");
const result = regex.test(str);

console.log(result); // true

どちらの方法でも同じ結果になりますが、一般的にはリテラル正規表現の方が簡潔で読みやすいのでおすすめです。

注意点

変数名に特殊文字が含まれている場合は、エスケープする必要があります。
変数の値が空文字列の場合、マッチングには失敗します。

補足

上記の方法に加えて、String.prototype.replace() メソッドなどの文字列操作メソッドで正規表現を使用する際にも、変数を使うことができます。

const str = "Hello, world!";
const name = "John";

// replace() メソッドで変数を使用
const result = str.replace(/Hello, (.*)!/, `Hello, ${name}!`);

console.log(result); // Hello, John!

正規表現は複雑になりやすいので、可読性を高めるためにコメントや命名規則などを活用しましょう。
テストケースを用意して、正規表現が正しく動作することを確認しましょう。

応用例

ユーザー入力のバリデーション
テキストの解析
データの抽出

// サンプルコード

// 1. リテラル正規表現

const str = "Hello, world!";
const name = "John";

// リテラル正規表現で変数を使用
const regex1 = new RegExp(`Hello, ${name}!`);
const result1 = regex1.test(str);

console.log("リテラル正規表現:", result1); // true

// 2. RegExpコンストラクタ

const str2 = "Hello, world!";
const name2 = "John";

// RegExpコンストラクタで変数を使用
const regex2 = new RegExp("Hello, " + name2 + "!");
const result2 = regex2.test(str2);

console.log("RegExpコンストラクタ:", result2); // true

// 3. replace() メソッド

const str3 = "Hello, world!";
const name3 = "John";

// replace() メソッドで変数を使用
const result3 = str3.replace(/Hello, (.*)!/, `Hello, ${name3}!`);

console.log("replace() メソッド:", result3); // Hello, John!

実行方法

上記のコードをコピーして、index.html などの HTML ファイルに保存します。
ブラウザでファイルを開きます。
コンソールを確認すると、以下の出力が表示されます。

リテラル正規表現: true
RegExpコンストラクタ: true
replace() メソッド: Hello, John!

上記のコードはあくまでサンプルなので、必要に応じて修正してください。

JavaScriptで正規表現に変数を使う方法：その他の方法

テンプレートリテラル

const str = "Hello, world!";
const name = "John";

// テンプレートリテラルで変数を使用
const regex = new RegExp(`Hello, ${name}!`);
const result = regex.test(str);

console.log(result); // true

関数

const str = "Hello, world!";
const name = "John";

// 関数を使用して正規表現を作成
function getRegex(name) {
  return new RegExp(`Hello, ${name}!`);
}

const regex = getRegex(name);
const result = regex.test(str);

console.log(result); // true

スプレッド構文

const str = "Hello, world!";
const name = "John";

// スプレッド構文を使用して変数を展開
const regex = new RegExp(/Hello, (.*)!/.exec(str)[1]);
const result = regex.test(name);

console.log(result); // true