JavaScript文字列置換方法解説

JavaScript では、文字列内の特定の文字列をすべて置き換えるために、主に次の方法が使用されます。

• split() メソッドと join() メソッド
• replace() メソッドと正規表現
• replaceAll() メソッド

最もシンプルで一般的な方法です。

let text = "apple, banana, apple, orange";
let newText = text.replaceAll("apple", "grape");
console.log(newText); // "grape, banana, grape, orange"

• replaceAll(searchValue, newValue): searchValue を newValue に置き換えた新しい文字列を返します。

より柔軟な置換を行うことができます。

let text = "apple, banana, apple, orange";
let newText = text.replace(/apple/g, "grape");
console.log(newText); // "grape, banana, grape, orange"

• replace(regexp|substr, newSubstr|function): 第1引数に正規表現を指定し、g フラグを使用することで全置換が可能になります。

分割と結合を利用した方法です。

let text = "apple, banana, apple, orange";
let newText = text.split("apple").join("grape");
console.log(newText); // "grape, banana, grape, orange"

• join(separator): 配列の要素を指定した文字列で結合し、文字列を返します。
• split(separator): 指定した文字列で文字列を分割し、配列を返します。

備考

• split() と join() の方法は、単純な置換には適していますが、パフォーマンス面で若干劣る場合があります。
• 正規表現を使用することで、より複雑なパターンマッチングと置換が可能になります。
• replaceAll() は比較的新しいメソッドで、古いブラウザではサポートされていない場合があります。

適切な方法を選択する際には、置換する文字列のパターンやブラウザのサポート状況を考慮してください。

例題

// 全ての数字を "*" に置き換える
let text = "電話番号は 03-1234-5678 です";
let newText = text.replace(/\d/g, "*");
console.log(newText); // "電話番号は ***-****-**** です"

追加情報

• パフォーマンス比較については、ベンチマークテストを行うことをおすすめします。
• 正規表現については、詳細なドキュメントを参照してください。

JavaScript での文字列置換のコード解説

let text = "apple, banana, apple, orange";
let newText = text.replaceAll("apple", "grape");
console.log(newText); // "grape, banana, grape, orange"

• console.log(newText);: newText の内容を出力します。
• let newText = text.replaceAll("apple", "grape");: text 内の全ての "apple" を "grape" に置き換えた新しい文字列を newText に代入します。
• let text = "apple, banana, apple, orange";: 変数 text に "apple, banana, apple, orange" という文字列を代入します。

let text = "apple, banana, apple, orange";
let newText = text.replace(/apple/g, "grape");
console.log(newText); // "grape, banana, grape, orange"

• let newText = text.replace(/apple/g, "grape");:
  • /apple/g: 正規表現で "apple" を検索するパターンを定義します。g フラグはグローバルマッチを意味し、全ての "apple" を対象にします。
  • replace() メソッドで、マッチした "apple" を "grape" に置き換えた新しい文字列を newText に代入します。

let text = "apple, banana, apple, orange";
let newText = text.split("apple").join("grape");
console.log(newText); // "grape, banana, grape, orange"

• let newText = text.split("apple").join("grape");:
  • text.split("apple"): text を "apple" で分割し、配列 ["", ", banana, ", ", orange"] を作成します。
  • join("grape"): 配列の要素を "grape" で結合し、新しい文字列 "grape, banana, grape, orange" を作成して newText に代入します。

注意

• 正規表現は強力なツールですが、複雑になる可能性があります。

ループによる置換

最も基本的な方法ですが、パフォーマンス面で劣ります。

function replaceAllLoop(str, searchStr, replaceStr) {
  let result = "";
  let index = str.indexOf(searchStr);
  while (index !== -1) {
    result += str.substring(0, index) + replaceStr;
    str = str.substring(index + searchStr.length);
    index = str.indexOf(searchStr);
  }
  result += str;
  return result;
}

let text = "apple, banana, apple, orange";
let newText = replaceAllLoop(text, "apple", "grape");
console.log(newText); // "grape, banana, grape, orange"

正規表現の活用 (より複雑な置換)

正規表現を使用することで、より柔軟な置換が可能になります。

let text = "apple1, banana, apple2, orange";
let newText = text.replace(/\dapple/g, "grape");
console.log(newText); // "grape1, banana, grape2, orange"

• /\dapple/g: 数字と "apple" が連続するパターンをグローバルに検索します。

カスタム関数による置換

置換処理をカスタマイズしたい場合に便利です。

function replaceAllCustom(str, searchStr, replaceFn) {
  return str.split(searchStr).join(replaceFn(searchStr));
}

let text = "apple, banana, apple, orange";
let newText = replaceAllCustom(text, "apple", (match) => {
  return match.toUpperCase();
});
console.log(newText); // "APPLE, banana, APPLE, orange"

ライブラリの利用 (特定のケース)

一部のライブラリでは、文字列操作に関する便利な関数を提供している場合があります。

• カスタム関数やライブラリは特定のケースに適している場合があります。
• 正規表現は強力ですが、複雑なパターンマッチングには注意が必要です。
• ループによる置換は一般的に非効率です。