文字列.replace() / replaceAll()
| 対応: | ES1(ECMAScript 1997) |
|---|
文字列内の指定した文字列やパターンを別の文字列に置換します。元の文字列は変更されず、新しい文字列が返されます。
構文
// 最初に一致した部分だけを置換します。
文字列.replace("検索文字列", "置換文字列")
文字列.replace(/正規表現/, "置換文字列")
// 一致したすべての部分を置換します。
文字列.replaceAll("検索文字列", "置換文字列")
メソッド一覧
| メソッド | 概要 |
|---|---|
| replace("検索文字列", "置換文字列") | 最初に一致した部分だけを置換した新しい文字列を返します。 |
| replace(/正規表現/, "置換文字列") | 正規表現に一致した部分を置換します。gフラグを付けると全箇所を置換できます。 |
| replaceAll("検索文字列", "置換文字列") | 一致したすべての部分を置換した新しい文字列を返します。 |
サンプルコード
sample_replace.js
var str = "狡噛慎也は執行官だ。執行官は監視官に従う。";
// replace は最初の1つだけを置換します。
console.log(str.replace("執行官", "エンフォーサー")); // 『狡噛慎也はエンフォーサーだ。執行官は監視官に従う。』と出力されます。
// replaceAll はすべてを置換します。
console.log(str.replaceAll("執行官", "エンフォーサー")); // 『狡噛慎也はエンフォーサーだ。エンフォーサーは監視官に従う。』と出力されます。
// 正規表現でgフラグを付けても全箇所を置換できます。
console.log(str.replace(/執行官/g, "エンフォーサー")); // 『狡噛慎也はエンフォーサーだ。エンフォーサーは監視官に従う。』と出力されます。
// 正規表現で大文字・小文字を無視して置換します。
var name = "Kogami kogami KOGAMI";
console.log(name.replace(/kogami/gi, "Enforcer")); // 『Enforcer Enforcer Enforcer』と出力されます。
// 元の文字列は変更されません。
console.log(str); // 『狡噛慎也は執行官だ。執行官は監視官に従う。』のまま出力されます。
// テキスト整形: 電話番号のハイフンを除去します。
var phone = "090-1234-5678";
var normalized = phone.replaceAll("-", "");
console.log(normalized); // 『09012345678』と出力されます。
// テンプレート文字列の差し込み: プレースホルダーを実際の値に置き換えます。
var template = "こんにちは、{name}さん。あなたの犯罪係数は{score}です。";
var message = template.replace("{name}", "常守朱").replace("{score}", "5");
console.log(message); // 『こんにちは、常守朱さん。あなたの犯罪係数は5です。』と出力されます。
狡噛慎也はエンフォーサーだ。執行官は監視官に従う。 狡噛慎也はエンフォーサーだ。エンフォーサーは監視官に従う。 狡噛慎也はエンフォーサーだ。エンフォーサーは監視官に従う。 Enforcer Enforcer Enforcer 狡噛慎也は執行官だ。執行官は監視官に従う。 09012345678 こんにちは、常守朱さん。あなたの犯罪係数は5です。
概要
『文字列.replace()』は最初に一致した部分だけを置換するメソッドです。文字列を渡した場合、最初の1箇所しか置換されない点に注意してください。すべての一致箇所を置換したい場合は『文字列.replaceAll()』を使うか、正規表現にgフラグを付けて『文字列.replace()』に渡します。
『文字列.replaceAll()』はES2021で追加された比較的新しいメソッドで、すべての一致箇所を一度に置換できます。正規表現のgフラグを使う方法と結果は同じですが、正規表現に慣れていない場合は『文字列.replaceAll()』の方が読みやすいでしょう。
いずれのメソッドも元の文字列は変更せず、置換後の新しい文字列を返します。結果を使うためには、変数に代入するか直接利用する必要があります。
対応ブラウザ
デスクトップ
5 ×
4.5 △
4 △↑ 部分的に対応
3.5 以前 ×
3 以前 ×モバイル
Android Browser
37 以降 ○
4 以前 ×
Chrome Android
36 以降 ○
17 以前 ×
Firefox Android
79 以降 ○
3 以前 ×記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。