概要: このチュートリアルでは、JavaScript String replace() メソッドを使用して、文字列内の部分文字列を新しい部分文字列に置き換える方法を説明します。
JavaScript String replace() メソッドの紹介
replace() メソッドの構文を以下に示します。
let newStr = str.replace(substr, newSubstr);Code language: JavaScript (javascript)JavaScript String replace() メソッドは、部分文字列 (substr) を新しい部分文字列 (newSubstr) で置き換えた新しい文字列を返します。
replace() メソッドは元の文字列を変更しません。新しい文字列を返します。
JavaScript String replace() の例
次の例では、replace() を使用して、文字列 'JS will, JS will rock you' 内の JS を新しい部分文字列 JavaScript に置き換えます。
let str = 'JS will, JS will rock you!';
let newStr = str.replace('JS','JavaScript');
console.log(newStr);Code language: JavaScript (javascript)出力
JavaScript will, JS will rock you!Code language: JavaScript (javascript)出力からわかるように、部分文字列 JS の最初の出現箇所のみが新しい部分文字列 JavaScript に置き換えられました。
文字列内の部分文字列のすべての出現箇所を新しい部分文字列に置き換えるには、正規表現 を使用する必要があります。
正規表現の使用
replace() メソッドは正規表現を完全にサポートしています。
let newStr = str.replace(regexp, newSubstr);Code language: JavaScript (javascript)この構文では、replace() メソッドは str 内のすべてのマッチを見つけて、それらを newSubstr で置き換え、新しい文字列 (newStr) を返します。
次の例では、グローバルフラグ (g) を使用して、str 内の JS のすべての出現箇所を JavaScript に置き換えます。
let str = 'JS will, JS will rock you!';
let newStr = str.replace(/JS/g,'JavaScript');
console.log(newStr);
Code language: JavaScript (javascript)出力
JavaScript will, JavaScript will rock you!Code language: JavaScript (javascript)検索と置換で大文字と小文字を区別しないようにするには、正規表現で ignore フラグ (i) を次のように使用できます。
let str = 'JS will, Js will rock you!';
let newStr = str.replace(/JS/gi,'JavaScript');
console.log(newStr);Code language: JavaScript (javascript)出力
JavaScript will, JavaScript will rock you!Code language: JavaScript (javascript)置換関数の使用
replace() メソッドの第2パラメーターに newSubstr を渡す代わりに、次のように置換関数を渡すことができます。
let newStr = str.replace(substr | regexp, replacer);Code language: JavaScript (javascript)この構文では、replace() メソッドはマッチが実行された後に replacer 関数を呼び出します。その後、この関数の結果を置換文字列として使用します。
正規表現でグローバルフラグ (g) を使用する場合、replace() メソッドは各マッチに対して replacer 関数を呼び出します。たとえば、3つのマッチがある場合、replace() メソッドは replacer() 関数を3回呼び出します。
replacer() 関数の構文を以下に示します。
function replacer(match, p1, p2, ..., offset, string);Code language: JavaScript (javascript)各パラメーターの意味は以下のとおりです。
match: マッチした部分文字列です。p1、p2、…pnは、正規表現によって提供される括弧で囲まれたキャプチャグループによって検出されたn番目の文字列です。offset: 検索対象の文字列全体におけるマッチした部分文字列のオフセットです。string: 調査対象の文字列全体です。
次の例では、replace() 関数を使用して、部分文字列 apples と bananas を大文字に変更します。置換関数を replace() 関数に渡します。
let str = "I like to eat, eat, eat apples and bananas";
let re = /apples|bananas/gi;
let newStr = str.replace(re, (match) => {
console.log({match});
return match.toUpperCase();
});
console.log(newStr);Code language: JavaScript (javascript)出力
{match: "apples"}
{match: "bananas"}
I like to eat, eat, eat APPLES and BANANAS
Code language: JavaScript (javascript)まとめ
replace()メソッドを使用して、部分文字列を新しい部分文字列で置き換えた新しい文字列を返します。- グローバルフラグ (
g) を含む正規表現を使用して、部分文字列のすべての出現箇所を新しい部分文字列で置き換えます。
