VIDEO LESSON

JavaScriptのString.prototype.replaceAll()の使い方：引数・戻り値・実例と注意点の解説動画

再生時間 7:55動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00今回はリプレイスオールを紹介します。
0:03これは、文字列の中で一致する箇所を、すべて別の文字列に置き換えるメソッドです。
0:09似た名前のリプレイスが最初の一致だけを置き換えるのに対して、リプレイスオールは残らずすべてを置き換えます。
0:17この動画では、書き方と引数と戻り値、記事の基本例である日付の区切りをそろえる例、
0:24正規表現を使う場合の決まりと、ジーフラグがない場合に起きるエラーまで、実行結果と一緒に学びます。
0:31前回のスターツウィズで文字列の先頭を判定した流れで、今回は文字列の中身を変換する基本操作を押さえましょう。
0:39まとめて置き換えたい場面に、ぴったりの道具です。
0:43まず動作環境を確認します。
0:45リプレイスオールは比較的新しい文字列メソッドです。
0:48クロームでは八十五以降、エッジでは八十五以降、ファイアーフォックスでは七十七以降、
0:53サファリでは十三・一以降で使えます。
0:57ノード・ジェイエスでは十五・ゼロ・ゼロ以降に対応しています。
1:01記事の互換性情報はエムディーエヌのデータに基づく目安です。
1:05古いブラウザーでは使えない場合があるため、対象環境が古い場合は先に対応状況を確認してください。
1:12追加の読み込みは不要で、空文字列にも関数として備わっていることを実機で確認済みです。
1:18迷ったときは、実際に使う環境で小さなコードを試すのが確実です。
1:23書き方を確認します。
1:24対象の文字列に続けてリプレイスオールと書き、カッコの中に探したいパターンと、
1:29置き換え後の内容を渡します。
1:33第一引数は検索文字列か、ジーフラグ付きの正規表現です。
1:38第二引数は置換文字列か、置換を行う関数です。
1:42戻り値は、すべての一致を置き換えた新しい文字列で、元の文字列自体は変更されません。
1:49スライドの例では、エーが三つともビーになること、ハローが二か所ともハイになることを、
1:53実機で確認しました。
1:57結果を受け取るには、戻り値を変数に入れるか、そのまま表示する形で使ってください。
2:04引数の順番は、探すもの、置き換え後、の順です。
2:08迷ったときはこの順番を声に出して確認すると、逆に書くミスを防げます。
2:14記事の基本例を見ます。
2:16二千二十六年九月二十一日という日付文字列の、スラッシュ区切りをすべてハイフンに置き換えるコードです。
2:25実行すると二千二十六ハイフン九ハイフン二十一と表示され、記事の期待出力と一致し、
2:30ノードの実機結果とも一致しました。
2:35記事が説明するように、これは書式をそろえる置換であり、日付として正しいかどうかを検証する処理ではありません。
2:44区切り文字の統一や、表記のゆれをそろえる前処理として、そのまま使える形です。
2:51置き換える対象が一文字でも、文章でも、考え方は同じです。
2:56まずはこの基本例を手で実行してみてください。
3:00よく似たリプレイスとの違いを実例で確かめます。
3:03ハローが二回登場する文字列に対して、リプレイスを使うと最初のハローだけがハイになり、
3:08後ろはハローのまま残ります。
3:12一方リプレイスオールでは、二か所ともハイに変わります。
3:16どちらも実機の結果と一致しました。
3:19すべて変えたいのにリプレイスを使ってしまうと、置き換え漏れが起きます。
3:25逆に、最初の一個だけ変えたい場合はリプレイスを選んでください。
3:29目的が全部か最初だけかで、メソッドを使い分けることが大切です。
3:34この違いが、リプレイスオールを選ぶ一番分かりやすい理由です。
3:39置き換え漏れは画面では気づきにくいため、同じ語が複数回出るデータでは、
3:43特に慎重に選んでください。
3:47第一引数に正規表現を使う例を見ます。
3:50エーの後に数字と英字が交互に並ぶ文字列で、数字を表すパターンにジーフラグを付けて渡すと、
3:55数字の部分がすべてシャープに置き換わります。
4:00結果はエーシャープ、ビーシャープ、シーシャープとなり、実機とも一致しました。
4:05正規表現を使うと、数字だけ、空白だけといった、種類で絞った置換ができます。
4:11ただし後で説明するように、ジーフラグを付け忘れるとエラーになります。
4:16正規表現は強力ですが、パターンの意味を読みながら、置換範囲を予測してから実行してください。
4:23たとえば空白やカンマの種類をそろえる処理でも、正規表現ならまとめて表現できる場合があります。
4:30第二引数に置換関数を使う例を見ます。
4:33置換文字列の代わりに関数を渡すと、一致が見つかるたびにその関数が呼ばれ、
4:37戻り値が置き換え後の文字列になります。
4:41スライドの例では、連続した数字を見つけて数値に直し、二倍にしてから文字列に戻しています。
4:48結果は百が二百、二百が四百となり、実機とも一致しました。
4:52決まった文字列への置き換えでは足りず、一致した内容に応じて結果を変えたい場合に便利です。
4:59関数の中では、元の一致を受け取って加工できる点を覚えておいてください。
5:04計算が必要な置換で力を発揮します。
5:07記事の境界条件の例を見ます。
5:09エーが三つ並ぶ文字列に対して、ジーフラグのない正規表現をリプレイスオールに渡すコードです。
5:15実行するとタイプエラーが発生し、エラー名を表示すると記事の期待出力と同じくタイプエラーとなり、
5:19実機とも一致しました。
5:23すべて置き換えるという目的と、全体を対象にしない正規表現が矛盾するため、
5:27エラーで知らせてくれる仕様です。
5:31文字列を第一引数にする場合はこの制約はありません。
5:34正規表現を使うときは、必ずジーフラグを付けているかを最初に確認する習慣を付けてください。
5:40注意点を三つ確認します。
5:42まず、大文字と小文字は区別されます。
5:45キャットと小文字のキャットが混ざる文字列では、小文字の方だけがドッグに変わり、
5:49実機でも確認できました。
5:53次に、検索文字列に空文字列を渡すと、文字と文字の間や両端にも置換文字列が入ります。
6:00意図せず使うと予想外の結果になるため注意してください。
6:04最後に、該当する箇所がなければ、元の文字列がそのまま返ります。
6:09エラーにはなりません。
6:11空文字列の扱いと大小の区別は、入力データを扱うときに特につまずきやすい点です。
6:17大小を区別したくない場合は、正規表現のアイフラグとジーフラグを組み合わせる方法も、
6:21実機で確認できます。
6:25置換文字列に含まれるドル記号の扱いを見ます。
6:28ドルとアンパサンドの組み合わせは、一致した部分そのものを表す特殊なパターンです。
6:34テストという文字列のティーをこのパターンで置き換えると、ティーが二重になり、
6:38実機でも確認できました。
6:41ドル記号を文字としてそのまま使いたい場合は、表記の決まりを別途確認してください。
6:47あわせて大切なのは、リプレイスオールを実行しても元の文字列は変わらないことです。
6:53変換後の値は戻り値として新しく作られるため、元の変数を上書きしたい場合は代入し直してください。
7:00元の文字列が変わらない性質のおかげで、変換前と変換後を並べて比べることも簡単です。
7:06まとめです。
7:07リプレイスオールは、一致するすべての箇所を置き換えた、新しい文字列を返すメソッドです。
7:14判断のポイントは三つです。
7:16まず、第一引数には検索文字列かジーフラグ付き正規表現を渡すこと。
7:21次に、第二引数には置換文字列だけでなく、計算する関数も渡せること。
7:27そして、正規表現にジーフラグがないとタイプエラーになり、元の文字列は変わらないことです。
7:34まずは記事の基本例と境界例を実行し、検索文字列を一つ変えて、結果を予測してから確かめてみてください。
7:42次回のリプレイスと合わせると、置換の使い分けが完成します。
7:47お疲れさまでした。
7:48小さな置換を正しく積み重ねることが、読みやすいデータ整形につながります。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

String.prototype.replaceAll()で一致するすべての箇所を置換する方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

解説記事・サンプルコードを読む：JavaScriptのString.prototype.replaceAll()の使い方：引数・戻り値・実例と注意点 →