JavaScriptで文字列の一部をスマートに置換！replaceを超えたテクニック

JavaScriptで特定のインデックスの文字を置き換える方法

そこで、今回は以下の2つの方法をご紹介します。

文字列操作とconcatを使う方法

この方法は、まず置換したいインデックスの前後を切り取り、次に置き換え後の文字列を結合することで実現します。

function replaceAt(str, index, newChar) {
  return str.slice(0, index) + newChar + str.slice(index + 1);
}

const str = "Hello, world!";
const newStr = replaceAt(str, 7, "JavaScript");
console.log(newStr); // "Hello, JavaScript!"

正規表現を使う方法

この方法は、正規表現を使って特定のインデックスの文字のみをマッチさせ、置換することで実現します。

function replaceAt(str, index, newChar) {
  return str.replace(new RegExp(`^(.{${index}})(.{1})$`), `$1${newChar}$2`);
}

const str = "Hello, world!";
const newStr = replaceAt(str, 7, "JavaScript");
console.log(newStr); // "Hello, JavaScript!"

どちらの方法を選ぶべき？

• コードの簡潔性: 1番目の方法はコードが短くシンプルです。
• 汎用性: 2番目の方法は、正規表現を使って様々な置換パターンに対応できます。
• 読みやすさ: 1番目の方法は、処理内容が直感的で分かりやすいです。

状況に合わせて適切な方法を選択してください。

補足

• 上記のコード例では、indexが文字列の長さを超えている場合はエラーが発生します。適切なエラー処理を実装することをおすすめします。
• 複数の文字を置換したい場合は、上記のコードをループなどで処理できます。

以上が、JavaScriptで特定のインデックスの文字を置き換える方法の解説でした。

function replaceAt(str, index, newChar) {
  return str.slice(0, index) + newChar + str.slice(index + 1);
}

const str = "Hello, world!";
const newStr = replaceAt(str, 7, "JavaScript");
console.log(newStr); // "Hello, JavaScript!"

解説

1. replaceAt 関数を作成します。
   • この関数は、以下の 3 つの引数を受け取ります。
     • str: 置換対象の文字列
     • index: 置換したいインデックス
     • newChar: 置換後の文字
2. str 変数に、"Hello, world!" という文字列を代入します。
3. replaceAt 関数を使って、7 番目の文字を "JavaScript" に置き換えます。
4. 結果をコンソールに出力します。

このサンプルコードをどのように応用できますか？

このサンプルコードは、以下のような様々な場面で応用できます。

• ユーザー入力フォームで入力された文字列の一部を修正する
• パスワードの一部を伏字にする
• 特定の文字列を別の文字列に置き換える

ぜひ、ご自身の用途に合わせて活用してみてください。

JavaScriptで特定のインデックスの文字を置き換えるその他の方法

charAtとsubstrを使う方法

この方法は、まず置換したい文字を取得し、次に置換後の文字を含む新しい文字列を作成し、最後に元の文字列と新しい文字列を結合することで実現します。

function replaceAt(str, index, newChar) {
  return str.substr(0, index) + newChar + str.substr(index + 1);
}

const str = "Hello, world!";
const newStr = replaceAt(str, 7, "JavaScript");
console.log(newStr); // "Hello, JavaScript!"

コード変換ライブラリを使う方法

lodashやunderscoreのようなコード変換ライブラリを使用すると、より簡潔に記述することができます。これらのライブラリには、replaceAtのような便利なユーティリティ関数が用意されています。

const _ = require('lodash'); // lodashライブラリのインポート

const str = "Hello, world!";
const newStr = _.replaceAt(str, 7, "JavaScript");
console.log(newStr); // "Hello, JavaScript!"

それぞれの方法の比較

上記以外にも、様々な方法で特定のインデックスの文字を置き換えることができます。状況に合わせて、最適な方法を選択してください。