【JSリファレンス】String.prototype.replaceAll()

更新日：2024/06/14

初出：ECMAScript2021


String.prototype.replaceAll()は、Stringオブジェクト(Stringコンストラクターのインスタンス)のプロトタイプチェーンに組み込まれるメソッドです。

文字列から特定の文字列を検索して任意の文字列で置き換えた結果を返します。
検索する値が文字列の場合、一致する文字を全て置換します。

 

■構文


String.prototype.replace ( searchValue, replaceValue )
  1. searchValue: 検索する値

    次の３つのうちのどれかを指定

    ●文字列
    ●gフラグを指定したRegExpオブジェクト。
    ●[Symbol.replace]をプロパティ名にもつオブジェクト

    上記以外の値は文字列に変換される

  2. replaceValue: 置換文字列または関数

    置換文字列についてはこちらを参照
    関数についてはこちらを参照

searchValueに文字列を指定した場合、一致する文字列を全て置換します。

正規表現を指定した場合は、String.prototype.replace()と同じ処理を行います。
ただし、gフラグが指定されていない場合はTypeErrorです。

オブジェクトを指定した場合、オブジェクトが[Symbol.replace]()メソッドを所持していれば、そのメソッドが呼び出されます。
その際の戻り値は、メソッドに一任されます。

引数が文字列またはRegExpオブジェクトの場合、置換した結果の文字列。

引数が[Symbol.replace]()を持つがRegExpオブジェクトでない場合、そのメソッドの戻り値

 

■置換文字列について

検索する値が文字列またはRegExpオブジェクトのとき、置換文字列は次の意味がある文字列パターンを含むことができます。

文字列パターン意味例
$&一致した文字列"abcabc".replaceAll("b","$&$&$&")
→ "abbbcabbbc"
$`
(バック
クオート)		一致した文字列の
前方文字列		"abcabc".replaceAll( "b" , "$`")
→ "aacaabcac"
$'
(シングル
コーテーション)		一致した文字列の
前方文字列		"abcabc".replaceAll( "b" , "$'")
→ "acabccacc"
$$"$"に置き換え"abcabc".replaceAll( "b" , "$$")
→ "a$ca$c"

検索する値がRegExpオブジェクトのとき、次のパターンを追加で使用できます。

文字列パターン意味例
$n
(nは数値)		n番目の
キャプチャ文字		"abcabc".replaceAll( /(a)(b)(c)/g , "$3$2$1")
→ "cbacba"
$<Name>
(Nameはグループ名)		Nameに対応する
キャプチャ文字		"abcabc".replaceAll(
/(?<n1>a)(?<n2>b)(?<n3>c)/g
, "$<n3>$<n2>$<n1>")
→ "cbacba"

 

■replaceValue関数について

引数replaceValueが関数の場合、検索対象の文字列を受け取り置き換え後の文字列を返します。
searchValueが文字列かRegExpオブジェクトかで、replaceValue関数の引数が変わります。

▶テキストの場合の構文


replaceValue( text , index , alltext )
  1. text: 一致した文字列
  2. index: 一致した位置
  3. alltext: 置換対象の文字列全体

▶RegExpオブジェクトの場合の構文


replaceValue( text , p1 , p2 , ... pn , index , alltext ,group )
  1. text: 一致した文字列
  2. index: 一致した位置
  3. p1 , p2 , ... pn : キャプチャグループ
  4. alltext: 置換対象の文字列全体
  5. group: グループ名をプロパティ名にキャプチャ値をプロパティ値に持つオブジェクト

 

■使用例

console.log( "ABCABCABC".replaceAll("B","●") ); // A●CA●CA●C

 

関連ページ

●【JavaScript】 replaceのコールバックでawaitを使いたい
●【JavaScript】 replaceAllとは replaceとの違い
●【JavaScript】 replace()の使い方 単純な置換と正規表現での置換
●【JavaScript】全角数字または全角漢数字を半角数字に変換する
●【JavaScript】htmlタグのエスケープ処理はちょっと難しいので整理してみる

更新日：2024/06/14

書いた人（管理人）：けーちゃん

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://jsref.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。