JavaScript 正規表現 Replace

概要: このチュートリアルでは、文字列の replace() メソッドを使用して、正規表現の一致する部分を置換文字列で置き換え、新しい文字列を返す方法を学びます。

JavaScript replace() メソッドの紹介

String.prototype.replace() メソッドは、文字列と正規表現の両方で動作します。このチュートリアルでは、正規表現に焦点を当てます。

replace() メソッドの構文は以下のとおりです。

replace(regexp, newSubstr)

この構文では、

• regexp は、一致させる正規表現です。
• newSubstr は、一致部分を置き換える文字列です。 newSubstr が空の場合、replace() メソッドは一致部分を削除します。

replace() は、一致部分が newSubstr で置き換えられた新しい文字列を返します。 replace() メソッドは元の文字列を変更せず、新しい文字列を返すことに注意してください。

デフォルトでは、regexp がグローバルフラグ (g) を使用しない場合、replace() メソッドは最初の一致部分を置き換えます。すべての一致部分を置き換えるには、regexp でグローバルフラグ (g) を使用します。

JavaScript 正規表現 replace() メソッドの例

replace() メソッドを使用する例をいくつか見てみましょう。

1) JavaScript 正規表現 replace() メソッドの簡単な例

次の例では、replace() メソッドを使用して、JS 文字列の最初の一致部分を JavaScript 文字列に置き換えます。

const s = 'JS and js';
const re = /js/i;

const newS = s.replace(re, 'JavaScript');
console.log(newS);Code language: JavaScript (javascript)

出力

JavaScript and js

/js/i は、'JS and js' 文字列内の JS と js の両方に一致します。ただし、replace() メソッドは最初の一致部分 (JS) のみを置き換えます。

すべての一致部分を置き換えるには、正規表現でグローバルフラグ (g) を使用します。

2) グローバルフラグを使用した JavaScript 正規表現 replace() メソッドの使用

次の例では、グローバルフラグ (g) を含む正規表現で replace() メソッドを使用して、すべての一致部分を置き換えます。

const s = 'JS and js';
const re = /js/gi;

const newS = s.replace(re, 'JavaScript');
console.log(newS);
Code language: JavaScript (javascript)

出力

JavaScript and JavaScript

3) キャプチャグループを使用した JavaScript 正規表現 replace() メソッドの使用

正規表現にキャプチャグループが含まれている場合、newSubstr で $N 構文を使用してこれらのグループを参照できます。ここで、N はグループ番号です。たとえば、$1 と $2 は、最初と2番目のキャプチャグループを参照します。

次の例は、キャプチャグループを使用して replace() メソッドを使用して、人の名前の姓と名を交換する方法を示しています。

let re = /(\w+)\s(\w+)/;
let name = 'Jane Doe';
let lastFirst = name.replace(re, '$2, $1');

console.log(lastFirst);
Code language: JavaScript (javascript)

出力

Doe, Jane

仕組み

正規表現 /(\w+)\s(\w+)/ は、1つ以上の単語文字、スペース、そして1つ以上の単語文字に一致します。言い換えれば、単語、スペース、そして別の単語を持つ文字列に一致します。

正規表現には2つのキャプチャグループが含まれています。最初のキャプチャグループは最初の単語をキャプチャし、2番目のキャプチャグループはスペースの後の2番目の単語をキャプチャします。

newSubstr では、$1 を使用して最初のキャプチャグループを参照し、$2 を使用して2番目のキャプチャグループを参照します。姓と名を交換するには、2番目の一致部分 ($2) を最初に配置し、次に最初の一致部分 ($1) を配置します。

replacer 関数を使用した JavaScript 正規表現 replace() メソッド

replace() メソッドの2番目の引数は、次のような関数にすることができます。

replace(regexp, replacerFunction)

replace() メソッドは、最初の一致部分が見つかった後に replacerFunction を呼び出します。 replacerFunction は、一致部分を置き換える部分文字列を作成するために使用されます。

regexp がグローバルフラグ (g) を使用する場合、replace() メソッドは一致するたびに replacerFunction を呼び出します。

replacerFunction には、次の引数があります。

• match は、一致した部分文字列を指定します。
• p1、p2、… は、regexp 内のキャプチャグループの値です。
• offset は、入力文字列内での一致した部分文字列のオフセットを指定する整数です。
• string は、入力文字列です。
• groups は、名前付きキャプチャグループがキー、一致した値が値であるオブジェクトです。

replacer 関数を使用して replace() メソッドを使用する例を見てみましょう。

次のような文字列があるとします。

backgroundColor

これを次のようなものに変換したいとします。

background-color

これを行うには、replacer 関数を使用して replace() メソッドを使用できます。

まず、大文字に一致する正規表現を作成します。

/[A-Z]/g

次に、replacer 関数を定義します。

function replacer(match, offset) {
  return (offset > 0 ? '-' : '') + match.toLowerCase();
}Code language: JavaScript (javascript)

replacer() 関数は、一致した文字が文字列の先頭でない場合はハイフンを追加し、ハイフンと小文字に変換された一致した文字を連結します。

3番目に、replace() メソッドを使用して、一致部分を replacer() 関数から返された部分文字列に置き換えます。

function addHyphen(prop) {
  return prop.replace(/[A-Z]/g, replacer);
}Code language: JavaScript (javascript)

完全なコードは以下のとおりです。

function replacer(match, offset) {
  return (offset > 0 ? '-' : '') + match.toLowerCase();
}

function addHyphen(prop) {
  return prop.replace(/[A-Z]/g, replacer);
}

const prop = 'backgroundColor';
console.log(addHyphen(prop));
Code language: JavaScript (javascript)

出力

background-color

コードをより簡潔にするために、replacer 関数をコールバック関数としてアロー関数を使用できます。

const addHyphen = (prop) =>
  prop.replace(
    /[A-Z]/g,
    (match, offset) => (offset > 0 ? '-' : '') + match.toLowerCase()
  );

const prop = 'backgroundColor';
console.log(addHyphen(prop));
Code language: JavaScript (javascript)

まとめ

• replace() メソッドを使用して、正規表現と一致する部分を見つけ、一致部分を新しい部分文字列に置き換えます。