【JavaScript】別の文字列に含まれる文字を削除する方法｜replace()とreduce()を活用

JavaScriptでは、ある文字列から別の文字列に含まれる文字をすべて取り除きたいケースがあります。例えば、次のような2つの文字列を用意したとしましょう。

var originalName = 'JOHNDOE';
var removalName = 'JOHN';

この場合、originalName（'JOHNDOE'）からremovalName（'JOHN'）に含まれる各文字（J・O・H・N）を削除し、最終的に「DOE」だけを残すのが目標です。

replace()とreduce()を組み合わせた解決策

この処理には、split()・reduce()・replace()の3つのメソッドを組み合わせるのが効果的です。まず削除対象の文字列を1文字ずつの配列に分解し、その各文字について順番に、元の文字列から該当する文字を置換によって取り除いていきます。

サンプルコード

const removeCharactersFromAString =
  (removalName, originalName) =>
    removalName.split('').reduce((obj, v) => obj.replace(v, ''), originalName);

var originalName = 'JOHNDOE';
var removalName = 'JOHN';

console.log(removeCharactersFromAString(removalName, originalName));

プログラムの実行方法

上記のプログラムはNode.js環境で動作します。ターミナルで以下のコマンドを実行してください（ここではファイル名を「demo93.js」としています）。

$ node demo93.js

実行結果

コマンドを実行すると、コンソールには次のように出力されます。

$ node demo93.js
DOE

出力からもわかるように、originalNameからremovalNameの各文字が順番に削除され、'DOE'だけが残っています。

コードの仕組みを解説

このアロー関数は一見シンプルですが、内部では次のような流れで処理が進んでいます。

• split('')：削除対象の文字列'JOHN'を、['J', 'O', 'H', 'N']という配列に変換します。
• reduce()：配列の各要素（1文字ずつ）に対して順番にコールバックを適用します。初期値としてoriginalName（'JOHNDOE'）が渡されます。
• replace(v, '')：各ステップで、それまでに処理された文字列から該当する文字を1つ削除し、その結果を次のステップへ引き渡します。

イメージとしては、「JOHNDOE」→「OHNDOE」（Jを削除）→「HNDOE」（Oを削除）→「NDOE」（Hを削除）→「DOE」（Nを削除）というように、文字が段階的に取り除かれていきます。

注意点：同じ文字が複数ある場合

標準のreplace()は、文字列内で最初に一致した箇所しか置換しません。そのため、元の文字列に同じ文字が複数含まれている場合、この方法では1つしか削除されないことがあります。すべての出現箇所を確実に削除したい場合は、replaceAll()を使うか、正規表現にグローバルフラグ（g）を付けて対応するとよいでしょう。