文字列置換の達人になる！JavaScriptの replace() メソッドを使いこなす

2024-04-02

JavaScriptで文字列をすべて置き換える方法

replace() メソッドは、文字列内の指定された部分文字列をすべて別の文字列に置き換えることができます。

例:

const str = "JavaScript, JavaScript, JavaScript";
const replacedStr = str.replace(/JavaScript/g, "TypeScript");
console.log(replacedStr); // "TypeScript, TypeScript, TypeScript"

解説:

str.replace(/JavaScript/g, "TypeScript") の部分で、文字列置換を行っています。
/JavaScript/ は、検索対象となる文字列を正規表現で指定しています。
g フラグは、すべてのマッチング箇所を置き換えることを指定します。
"TypeScript" は、置き換え後の文字列です。

replaceAll() メソッドは、replace() メソッドと似ていますが、すべてのマッチング箇所を置き換えることがデフォルトの動作になっています。

const str = "JavaScript, JavaScript, JavaScript";
const replacedStr = str.replaceAll("JavaScript", "TypeScript");
console.log(replacedStr); // "TypeScript, TypeScript, TypeScript"

上記の例では、正規表現を使って検索対象となる文字列を指定していますが、文字列リテラルを直接指定することもできます。
置き換え後の文字列は、変数や関数呼び出しの結果など、任意の式を指定することができます。

// replace() メソッドを使う例
const str = "JavaScript, JavaScript, JavaScript";
const replacedStr1 = str.replace(/JavaScript/g, "TypeScript");
console.log(replacedStr1); // "TypeScript, TypeScript, TypeScript"

// replaceAll() メソッドを使う例
const replacedStr2 = str.replaceAll("JavaScript", "TypeScript");
console.log(replacedStr2); // "TypeScript, TypeScript, TypeScript"

// 複数の文字列を置き換える例
const str2 = "JavaScript, TypeScript, Python";
const replacedStr3 = str2.replace(/JavaScript|TypeScript/g, "PHP");
console.log(replacedStr3); // "PHP, PHP, Python"

// 大文字と小文字を区別せずに置き換える例
const str3 = "JavaScript, javascript, JAVASCRIPT";
const replacedStr4 = str3.replace(/javascript/gi, "TypeScript");
console.log(replacedStr4); // "TypeScript, TypeScript, TypeScript"

// 置き換え後の文字列を関数で生成する例
const str4 = "JavaScript";
const replacedStr5 = str4.replace(/JavaScript/g, () => {
  return "TypeScript";
});
console.log(replacedStr5); // "TypeScript"

各例では、replace() メソッドまたは replaceAll() メソッドを使って、文字列をすべて置き換えています。
検索対象となる文字列は、正規表現または文字列リテラルで指定しています。
置き換え後の文字列は、文字列リテラルまたは関数呼び出しの結果で指定しています。

実行方法:

上記のコードを JavaScript ファイルに保存します。
Web ブラウザで JavaScript ファイルを開きます。
コンソールを確認すると、置き換え後の文字列が表示されます。

JavaScriptで文字列をすべて置き換えるその他の方法

ループを使う

const str = "JavaScript, JavaScript, JavaScript";
let replacedStr = "";

for (let i = 0; i < str.length; i++) {
  if (str[i] === "J") {
    replacedStr += "T";
  } else {
    replacedStr += str[i];
  }
}

console.log(replacedStr); // "TypeScript, TypeScript, TypeScript"

ループを使って、文字列を1文字ずつ処理しています。
各文字が "J" の場合は、"T" に置き換えます。
それ以外の場合は、元の文字をそのまま保持します。

map() メソッドを使う

const str = "JavaScript, JavaScript, JavaScript";
const replacedStr = str.split("").map(char => {
  return char === "J" ? "T" : char;
}).join("");

console.log(replacedStr); // "TypeScript, TypeScript, TypeScript"

split("") メソッドを使って、文字列を1文字ずつに分割します。
map() メソッドを使って、各文字を処理します。
join("") メソッドを使って、分割された文字列を再び結合します。

ライブラリを使う

underscore.js や Lodash などのライブラリには、文字列置換を行う関数を提供しているものがあります。

const _ = require("underscore");

const str = "JavaScript, JavaScript, JavaScript";
const replacedStr = _.replace(str, /JavaScript/g, "TypeScript");

console.log(replacedStr); // "TypeScript, TypeScript, TypeScript"