JavaScriptのreplace()メソッドを使用すると文字列の置換ができます。
使い方は次の通りです。
"文字列".replace("置換したい文字列", "置換後の文字列")使用例です。コンソールには「今日は雨です。」と表示されます
const original_message = "今日は晴れです。";
const after_message = original_message.replace("晴れ", "雨");
console.log(after_message);次のように数値に対して、replace()メソッドを使うとエラー(Uncaught TypeError: number.replace is not a function)となってしまいます。
const number = 12345;
console.log(number.replace(2, "two"));replace()メソッドは文字列にしか使えないので、次のように文字列に変換してからreplace()メソッドを使用してください。
const number = 12345;
console.log(String(number).replace(2, "two"));こちらは、コンソールに「1two2345」と表示されます。
次のように置換したい文字列が複数ヶ所にある場合は、最初に見つかった文字列しか置換されません。
const original_message = "昨日は晴れでした。今日も晴れです。";
const after_message = original_message.replace("晴れ", "雨");
console.log(after_message);コンソールには「昨日は雨でした。今日も晴れです。」と表示されます。
該当する文字列を全て置換したい場合は、次の３つの方法があります。
- replaceAll()メソッド
- replace()メソッド + 正規表現
- split() + join()
replaceAll()メソッドを使うと、該当する文字列を全て置換することができます。
使い方は、replace()メソッドとほとんど同じです。
"文字列".replaceAll("置換したい文字列", "置換後の文字列")使用例です。
const original_message = "昨日は晴れでした。今日も晴れです。";
const after_message = original_message.replaceAll("晴れ", "雨");
console.log(after_message);コンソールには「昨日は雨でした。今日も晴れです。」と表示されます。
ただし、replaceAll()メソッドは、ES2021（ECMAScript 12）で導入されたため、古いバージョンのブラウザでは動作しない可能性があるので注意してください。もし動作しない場合は「replace() + 正規表現」、「split() + join()」のいずれかで対応できると思います。
次のように置換したい文字列に正規表現を指定して、該当する文字列を全て置換することができます。
const original_message = "昨日は晴れでした。今日も晴れです。";
const after_message = original_message.replace(/晴れ/g, "雨");
console.log(after_message);コンソールには「昨日は雨でした。今日も晴れです。」と表示されます。
ちなみに私は正規表現は何となくしか理解しておらず、いつもChatGPTにお世話になっています。
split()メソッドとjoin()メソッドを組み合わせて、該当する文字列を全て置換することができます。
const original_message = "昨日は晴れでした。今日も晴れです。";
const after_message = original_message.split("晴れ").join("雨");
console.log(after_message);コンソールには「昨日は雨でした。今日も晴れです。」と表示されます。
split()メソッドは、文字列を指定した文字列で分割し、配列を返します。
上記コードのoriginal_message.split(“晴れ”)の部分では[‘昨日は’, ‘でした。今日も’, ‘です。’]という配列が作成されます。
join()メソッドは、配列を指定した文字列で連結し、文字列を返します。
上記コードでは[‘昨日は’, ‘でした。今日も’, ‘です。’]を雨で連結し、「昨日は雨でした。今日も晴れです。」という文字列が作成されるので、指定した文字で置換したような挙動になります。
