JS iOS13以下だとreplaceAllは動かないのでreplaceで対応させたい

Question

iOS13以下だとreplaceAllは動かないのでreplaceで対応させたい

replaceですと最初に合致した文字しか置換されません
replaceAllと同じ動きにしたい場合どうすればいいのでしょうか？

const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';
console.log(p.replaceAll('dog', 'monkey'));

const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';
console.log(p.replace('dog', 'monkey'));

Comments

[miyabi_pudding]

全ての該当文字にマッチさせたい、ということでしょうか？

Answer 1

正解コード

p.replace(/(?<!\w)dog(?!\w)/g, 'monkey');

解説

例のコード↓

const p = 'dog. The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy? Hey, doggy! dog.';

const result1 = p.replaceAll('dog', 'monkey'); // 質問者様の元のコード
const result2 = p.replace(/dog/g, 'monkey'); // ダメな正規表現例
const result3 = p.replace(/(?<!\w)dog(?!\w)/g, 'monkey'); // 正解の正規表現

console.log('1:', result1);
// 1: monkey. The quick brown fox jumps over the lazy monkey. If the monkey reacted, was it really lazy? Hey, monkeygy! monkey.
console.log('2:', result2);
// 2: monkey. The quick brown fox jumps over the lazy monkey. If the monkey reacted, was it really lazy? Hey, monkeygy! monkey.
console.log('3:', result3);
// 3: monkey. The quick brown fox jumps over the lazy monkey. If the monkey reacted, was it really lazy? Hey, doggy! monkey.

正規表現について

正規表現 - JavaScript | MDN

• .replace()を使いつつ、条件に合致するもの全てを置換したければ正規表現を使います。
• 正規表現とは、テキストをパターンと照合するための記法です。
• 正規表現には二通りの記法がありますが、今回はリテラル記法を利用します（どちらでも同じです）。
  • リテラル記法の例：/abc/g
  • コンストラクターの例：new RegExp(/abc/, 'g')

正規表現（リテラル記法）の書き方

/パターン/フラグ

• 「パターン」は今回の場合でしたら、dogとなります。
  • ただ単に文字列を書くだけではなく、[a-z]←a〜zのいずれか1文字のような条件を書くこともできます。
  • 詳しくはお調べください。
• 「フラグ」は今回の場合でしたら、gとなります。
  • gは、「グローバル検索」の意味で、つまり1回ヒットしたら終わりではなく、全文字検索するということです。.replaceAll()の代わりをしてくれます。
  • 他にもiなど、いろいろあります。giと複数書いてもいいです。詳しくはお調べください。

例のコード　result1の問題点

const p = 'dog. The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy? Hey, doggy! dog.';

const result1 = p.replaceAll('dog', 'monkey');
// monkey. The quick brown fox jumps over the lazy monkey. If the monkey reacted, was it really lazy? Hey, monkeygy! monkey.

こちらは質問者様の書かれた.replaceAll()を用いたコードです。
変数pの文章を少し追加してみたのですが、最後の方の「doggy」が「monkeygy」になってしまうという問題点があります。

例のコード　result2の問題点

const result2 = p.replace(/dog/g, 'monkey');
// monkey. The quick brown fox jumps over the lazy monkey. If the monkey reacted, was it really lazy? Hey, monkeygy! monkey.

こちらは.replace()と正規表現を用いたコードです。
こちらも同様に、最後の方の「doggy」が「monkeygy」になってしまうという問題点があります。
単純に「d」「o」「g」という並びの文字列をmonkeyに変更するという条件だからです。

しかし質問者様のご質問は、

replaceAllと同じ動きにしたい場合どうすればいいのでしょうか？

ですので、その場合はこのresult2が正解となります。

例のコード　result3の解説

const result3 = p.replace(/(?<!\w)dog(?!\w)/g, 'monkey');
// monkey. The quick brown fox jumps over the lazy monkey. If the monkey reacted, was it really lazy? Hey, doggy! monkey.

上記の問題点を解決するために、より条件を厳しくした正規表現を書いたものがresult3です。
こちらは想定通りの置換をしてくれていると思います。

• (?<!\w)は、dogの 前 に、a〜z、A〜Z、0〜9、_がない　という条件を表現しています。
• (?!\w)は、dogの 後 に、a〜z、A〜Z、0〜9、_がない　という条件を表現しています。
• doggyは、dogのあとにさらにgがありますから、条件に合致せず、monkeyに置換されません。

正規表現は他にもいろいろなパターンを表現することができますので、興味や必要がおありでしたら是非一度お勉強なさってみてください。

Comments

[yambejp]

特別な指定がないかぎり単語の置換は無条件に変換すべきです
たとえば例示のものではdogsをmonkeysに変換することができません

[Cocode]

ご指摘ありがとうございます！おっしゃる通りですね。
ただ、英語の複数形はそんなに単純なものでもないので、複数形に関しては別で指定する方が良いかもしれませんね！

Answer 2

const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';
console.log(p.replace(/dog/g, 'monkey'));