先生と生徒の会話形式で理解しよう

生徒

「文章の中で特定の文字や単語を別の文字に置き換えたいんですが、JavaScriptではどうすればいいですか？」

先生

「それなら replace メソッドと正規表現を使うと便利です。文字列の一部分を別の文字列に置き換えることができます。」

生徒

「replaceメソッドだけで大丈夫ですか？正規表現と組み合わせるのは難しくないですか？」

先生

「最初は簡単な例から始めるとわかりやすいです。順を追って説明しますね。」

1. replaceメソッドの基本

JavaScriptの replace メソッドは、文字列の一部を別の文字列に置換するメソッドです。基本の書き方は以下の通りです。


const text = "I like apple.";
const newText = text.replace("apple", "orange");
console.log(newText); // I like orange.

ここでは文字列 "apple" を "orange" に置き換えています。replaceは最初にマッチした部分だけを置換します。

2. 正規表現を使った置換

正規表現を使うと、より柔軟に文字列を検索して置換できます。例えば、大小文字を区別せずに置換したい場合などです。


const text2 = "Apple apple APPLE";
const replaced = text2.replace(/apple/gi, "orange");
console.log(replaced); // orange orange orange

/apple/gi は g フラグで文字列全体にマッチさせ、i フラグで大文字小文字を区別しないようにしています。

3. 複数単語の置換

正規表現を使えば、複数の単語をまとめて置換することもできます。例えば、リンゴやバナナなどをまとめて置換する場合です。


const fruits = "I like apple and banana.";
const replacedFruits = fruits.replace(/apple|banana/g, "orange");
console.log(replacedFruits); // I like orange and orange.

| は「または」を意味し、どちらかにマッチすれば置換されます。

4. 関数を使った置換

replaceメソッドでは置換部分を文字列だけでなく、関数で動的に変更することもできます。


const text3 = "I have 2 apples and 5 bananas.";
const newText3 = text3.replace(/\d+/g, (match) => parseInt(match) * 2);
console.log(newText3); // I have 4 apples and 10 bananas.

ここでは \d+ で数字をマッチさせ、関数で2倍にしています。文字列を加工して置換したい場合に便利です。