【JavaScript】いろんな部分文字列を一気に置換したい

できればString#trとかtrコマンドとかみたいなすっきりした置換がしたいんです。JavaScriptで。
たまにあるんですよ。特定の文字列を別の特定の文字列に置換しなければならない、しかもいっぱい置換のペアがあるってとき。

'hello world'.tr('eo', '30')
#=> "h3ll0 w0rld"

'ｈｅｌｌｏ ｗｏｒｌｄ'.tr('ａ-ｚ', 'a-z')
#=> "hello world"

まずはMDN

まずはMDNを漁るんですけど、無いんですよ。近しいのが。 String.prototype.replace()とかreplaceAll()とかは見かけるんですけどね。

じゃあ誰か発明してないかとググるわけですよ。

ネットの記事

replace()でメソッドチェーン

まず見かけたのがこちらです。特定の文字列を全て置換する[Javascript]

この記事曰く、replace()のチェーンでゴリ押せば良いと。

"hello world".replace(/e/g, '3')
             .replace(/o/g, '0');
//=> 'h3ll0 w0rld'

うーんなるほど。思ってたんとちょっと違うけどまあそうかと。

でも、これ大変じゃないかって思うんです。種類数によっては。

"ｈｅｌｌｏ ｗｏｒｌｄ"
  .replace(/ａ/g, 'a')
  .replace(/ｂ/g, 'b')
  .replace(/ｃ/g, 'c')
  .replace(/ｄ/g, 'd')
  .replace(/ｅ/g, 'e')
  .replace(/ｆ/g, 'f')
  .replace(/ｇ/g, 'g')
  .replace(/ｈ/g, 'h')
  .replace(/ｉ/g, 'i')
  .replace(/ｊ/g, 'j')
  .replace(/ｋ/g, 'k')
  .replace(/ｌ/g, 'l')
  .replace(/ｍ/g, 'm')
  .replace(/ｎ/g, 'n')
  .replace(/ｏ/g, 'o')
  .replace(/ｐ/g, 'p')
  .replace(/ｑ/g, 'q')
  .replace(/ｒ/g, 'r')
  .replace(/ｓ/g, 's')
  .replace(/ｔ/g, 't')
  .replace(/ｕ/g, 'u')
  .replace(/ｖ/g, 'v')
  .replace(/ｗ/g, 'w')
  .replace(/ｘ/g, 'x')
  .replace(/ｙ/g, 'y')
  .replace(/ｚ/g, 'z')

//=> 'hello world'

手打ちしたくなさすぎてRubyで錬成しました。

puts (<<EOS) + ("ａ".."ｚ").zip("a".."z").map{|zen, han| "  .replace(/#{zen}/g, '#{han}')"}.join("\n")
"ｈｅｌｌｏ ｗｏｒｌｄ"
EOS
#=> "ｈｅｌｌｏ ｗｏｒｌｄ"
#     .replace(/ａ/g, 'a')
#     .replace(/ｂ/g, 'b')
#     .replace(/ｃ/g, 'c')
#	  ...

forでまとめて

もっと他に良いこと書いている記事はないのかと思いまして、お次は こんな記事を見かけました。 JavaScriptで複数置換をスマートにやりたい ほう、スマートに。

なんとこの記事の執筆者さんもメソッドチェーン解法を見た模様です。 そしてなんと同じようなことを考えておられます。

ですが、求めていたのはこれじゃない。置換パターンが2, 3個ならまだ良いですが、ある程度多くのパターンをまとめて置換したいという場合、replaceを繋げまくるのは大変です。しかも見た目もよろしくない。

この方に従えば、forループでこういうことでしょうか。

let str = "hello world";
const keys = [/e/g, /o/g];  // i番目の置換対象
const reps = ["3" , "0" ];  // i番目の置換後

for (let i = 0; i < keys.length; ++i) {
  str = str.replace(keys[i], reps[i]);
}

console.log(str);  // h3ll0 w0rld

なるほど、これなら配列の中身を増やせばいいだけだから、さっきみたいなことにならずに済むわけですね。

let str = "ｈｅｌｌｏ ｗｏｒｌｄ";
const keys = [/ａ/g, /ｂ/g, /ｃ/g, /ｄ/g, /ｅ/g, /ｆ/g, /ｇ/g, /ｈ/g, /ｉ/g, /ｊ/g, /ｋ/g, /ｌ/g, /ｍ/g, /ｎ/g, /ｏ/g, /ｐ/g, /ｑ/g, /ｒ/g, /ｓ/g, /ｔ/g, /ｕ/g, /ｖ/g, /ｗ/g, /ｘ/g, /ｙ/g, /ｚ/g];
const reps = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];

for (let i = 0; i < keys.length; ++i) {
  str = str.replace(keys[i], reps[i]);
}

console.log(str);  // hello world

メソッドチェーンよりは、かなりすっきりして見えます。 でも、置換対象に毎回//gをくっつけるのはちょっと面倒な気もします。

puts "[" + ("ａ".."ｚ").map{|c| "/#{c}/g"}.join(", ") + "]"
#=> [/ａ/g, /ｂ/g, /ｃ/g, /ｄ/g, /ｅ/g, /ｆ/g, /ｇ/g, /ｈ/g, /ｉ/g, /ｊ/g, /ｋ/g, /ｌ/g, /ｍ/g, /ｎ/g, /ｏ/g, /ｐ/g, /ｑ/g, /ｒ/g, /ｓ/g, /ｔ/g, /ｕ/g, /ｖ/g, /ｗ/g, /ｘ/g, /ｙ/g, /ｚ/g]

(追記: MDNのreplace()のページを見ると文字列も受け入てくれそうなので、クオーテーションでもよさそうですね。)

変換表を定数で持つので、その場限りでしか使われない変換表が処理の後にずっと残っちゃうのも、ちょこっとだけ気になります。

reduce()で一行

ここまで知ったら私としてはワンライナーにしたくなるんです。

むずむずしてきたので私も考えました。

これ、replace()って、返り値が置換後の文字列だからメソッドチェーンできるんですよね。

ってことはEnumerable#inject的な物が使えると思うんです。返り値を蓄積して結果にしてくれるやつです。

JSなのでArray.prototype.reduce()ですね。reduce()はちょうどRubyのinjectに相当しています。コールバックの返り値を蓄積する仕組みが備わっているんです。
あと、置換対象と置換後文字列をペアで持てると嬉しいですね。 そんな願望を携えたなら、こんな感じでよっこらせ。

 const str = 'hello world';
 [["e", "3"], ["o", "0"]].reduce((s, [from, to]) => s.replaceAll(from, to), str); 
 // 'h3ll0 w0rld'

2次元配列になってますが、中身は[置換対象, 置換後]です。これならもっとすっきり使えるのではないでしょうか。

JavaScriptはとっても寛容なので、Stringにちょろっと失礼しますと。

String.prototype.replaceEvery = function(patterns) { // レシーバを`this`として使いたいので`function`
   return patterns.reduce((s, [from, to]) => s.replaceAll(from, to), this)
};

すると、こんな具合で使えるわけです。

> 'hello world'.replaceEvery([["e", "3"], ["o", "0"]])
'h3ll0 w0rld'

trのようにとまではいかないものの、他の2つの方法よりは手軽に扱えそうな気がします。

'ｈｅｌｌｏ ｗｏｒｌｄ'.replaceEvery([
  ["ａ", "a"], ["ｂ", "b"], ["ｃ", "c"], ["ｄ", "d"], ["ｅ", "e"], ["ｆ", "f"], ["ｇ", "g"],
  ["ｈ", "h"], ["ｉ", "i"], ["ｊ", "j"], ["ｋ", "k"], ["ｌ", "l"], ["ｍ", "m"], ["ｎ", "n"],
  ["ｏ", "o"], ["ｐ", "p"], ["ｑ", "q"], ["ｒ", "r"], ["ｓ", "s"], ["ｔ", "t"], ["ｕ", "u"],
  ["ｖ", "v"], ["ｗ", "w"], ["ｘ", "x"], ["ｙ", "y"], ["ｚ", "z"]
]);  //=> 'hello world'

でも、連番なら、一気にできないものか…。とも思います。

puts "[" << ("ａ".."ｚ").zip("a".."z").map{|from, to| %Q_["#{from}", "#{to}"]_ }.join(", ") << "]"
#=> [["ａ", "a"], ["ｂ", "b"], ["ｃ", "c"], ["ｄ", "d"], ["ｅ", "e"], ["ｆ", "f"], ["ｇ", "g"], ["ｈ", "h"], ["ｉ", "i"], ["ｊ", "j"], ["ｋ", "k"], ["ｌ", "l"], ["ｍ", "m"], ["ｎ", "n"], ["ｏ", "o"], ["ｐ", "p"], ["ｑ", "q"], ["ｒ", "r"], ["ｓ", "s"], ["ｔ", "t"], ["ｕ", "u"], ["ｖ", "v"], ["ｗ", "w"], ["ｘ", "x"], ["ｙ", "y"], ["ｚ", "z"]]

本当に目指していたもの

せっかくなので劣化版trも実装してみました。長ーい。範囲指定しかついていないので劣化版です。
私は範囲指定が欲しかっただけなのでそこだけ。

String.prototype.tr = function tr(from, to) {
  const arrayLast = arr => arr[arr.length-1];

  const from_expanded = expand_hyphenation(from);
  const to_expanded   = expand_hyphenation(to);
  const maxLength = Math.max(from_expanded.length, to_expanded.length);
  const from_last = arrayLast(from_expanded);
  const to_last   = arrayLast(to_expanded);
  from_expanded.length = maxLength;
  to_expanded  .length = maxLength;
  from_expanded.fill(from_last, from_expanded.length-1);
  to_expanded  .fill(to_last  , to_expanded  .length-1);

  return from_expanded.reduce((s, from, i) =>
    s.replaceAll(from, to_expanded[i])
    , this);

  function expand_hyphenation(source) {
    const src = [...source];
    const expanded = [];

    src.forEach((c, i) => {
      if (c === '-' && i !== 0 && i !== src.length-1) {
        // ハイフンで範囲指定されている部分を展開
        for (let pt = src[i-1].codePointAt(0) + 1  // ハイフン指定の手前側(の次の文字)
             ;   pt < src[i+1].codePointAt(0)      // ハイフンの後の文字
             ;  pt++
            ) {
          expanded.push(String.fromCodePoint(pt));
        }
        return;

      } else {
        expanded.push(c);
      }
    });
    return expanded;
  }
}

console.log('abcdefg'.tr('a-cf', '1-3'));              // 123de3g
console.log('hello world'.tr('eo', '30'));             // h3ll0 w0rld
console.log('ｈｅｌｌｏ ｗｏｒｌｄ'.tr('ａ-ｚ', 'a-z')); // hello world

おわりに

ところで、reduce()って嫌われてるんですか…?