From 345e8a61dee7f6d096f8bb3a46c0461091e240f2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 15 Jun 2021 00:43:06 +0900 Subject: Web/JavaScript/Reference/Global_Objects/String/replace を更新 (#1077) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/05/05 時点の英語版に同期 - 訳注マクロを削除。訳注は翻訳の注釈を超えていると思われるので削除。 --- .../global_objects/string/replace/index.html | 332 +++++++++------------ 1 file changed, 139 insertions(+), 193 deletions(-) diff --git a/files/ja/web/javascript/reference/global_objects/string/replace/index.html b/files/ja/web/javascript/reference/global_objects/string/replace/index.html index 4145550f59..e125669514 100644 --- a/files/ja/web/javascript/reference/global_objects/string/replace/index.html +++ b/files/ja/web/javascript/reference/global_objects/string/replace/index.html @@ -2,117 +2,136 @@ title: String.prototype.replace() slug: Web/JavaScript/Reference/Global_Objects/String/replace tags: - - Expressions - - JavaScript - - Methods - - Prototype - - Reference - - Regular - - String +- Expressions +- JavaScript +- Method +- Prototype +- Reference +- Regular +- String translation_of: Web/JavaScript/Reference/Global_Objects/String/replace +browser-compat: javascript.builtins.String.replace ---
{{JSRef}}
-

replace() メソッドは、pattern にマッチした文字列の一部またはすべてを replacement で置き換えた新しい文字列を返します。pattern は文字列または {{jsxref("RegExp")}}、replacement は文字列または各マッチで呼び出される関数です。pattern が文字列の場合、最初に一致した箇所のみを置き換えます。

+

replace() メソッドは、pattern に一致する文字列の一部またはすべてを replacement で置き換えた新しい文字列を返します。 pattern は文字列または {{jsxref("RegExp")}}、replacement は文字列または各一致で呼び出される関数です。pattern が文字列の場合、最初に一致した箇所のみを置き換えます。

元の文字列は変更されません。

{{EmbedInteractiveExample("pages/js/string-replace.html")}}
+

構文

+
+replace(regexp, newSubstr)
+replace(regexp, replacerFunction)
 
-
構文

-
-
str.replace(regexp|substr, newSubstr|function)

+replace(substr, newSubstr)
+replace(substr, replacerFunction)
+
-

引数

+

引数

-
regexp (pattern)
-
{{jsxref("RegExp")}} オブジェクト、またはリテラルです。マッチすると、第2引数の newSubStr または function の戻り値と置き換えられます。
-
substr (pattern)
-
newSubStr に置き換えられる {{jsxref("String")}} です。これは逐次的な文字列として扱われ、正規表現としては解釈されません。最初に出てきたものだけが置き換えられます。
-
newSubStr (replacement)
-
regexp や substr パラメーターで指定される部分文字列を置換する {{jsxref("String")}} です。数々の特別な置換パターンがサポートされます。下記の「{{anch("Specifying_a_string_as_a_parameter", "引数としての文字列の指定")}}」節を見てください。
-
function (replacement)
-
新しい部分文字列を生成するために実行される関数で、regexp や substr でマッチしたものを置き換えるのに使われます。この関数に渡される引数は下記の「{{anch("Specifying_a_function_as_a_parameter", "引数としての関数の指定")}}」で述べられています。
+
regexp (pattern)
+
{{jsxref("RegExp")}} オブジェクト、またはリテラルです。一致すると、第 2 引数の newSubstr または replacerFunction の返値と置き換えられます。
+
substr
+
newSubstr に置き換えられる {{jsxref("String")}} です。これは逐次的な文字列として扱われ、正規表現としては解釈されません。最初に出てきたものだけが置き換えられます。
+
newSubstr (replacement)
+
regexp や substr 引数で指定される部分文字列を置換する {{jsxref("String")}} です。数々の特別な置換パターンがサポートされます。下記の「引数としての文字列の指定」の節を見てください。
+
replacerFunction (replacement)
+
新しい部分文字列を生成するために実行される関数で、regexp や substr で一致したものを置き換えるのに使われます。この関数に渡される引数は下記の「引数としての関数の指定」で述べられています。
-

戻り値

+

返値

-

パターンにマッチした部分文字列の一部またはすべてを置換文字列で置き換えた新しい文字列です。

+

パターンに一致した部分文字列の一部またはすべてを置換文字列で置き換えた新しい文字列です。

-

詳細

+

解説

-

このメソッドは、それを呼び出した {{jsxref("String")}} オブジェクトを変化させません。戻り値として新しい文字列を返します。

+

このメソッドは、それを呼び出した {{jsxref("String")}} オブジェクトを変化させません。返値として新しい文字列を返します。

グローバルな検索と置換を動作させるためには、正規表現に g フラグを含める必要があります。

-

引数としての文字列の指定

+

引数としての文字列の指定

-

置換文字列には以下の特殊な置換パターンを含めることができます。

+

置換文字列には以下の特殊な置換パターンを入れることができます。

- - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
パターン挿入
$$"$" を挿入します。
$&マッチした部分文字列を挿入します。
$`マッチした部分文字列の直前の文字列の部分を挿入します。
$'マッチした部分文字列の直後の文字列の部分を挿入します。
$nn は 100 未満の正の整数です。第一引数が {{jsxref("RegExp")}} オブジェクトだった場合に n 番目の括弧でキャプチャされた文字列を挿入します。1, 2, ... でインデックスされることに注意してください。
パターン挿入
$$"$" を挿入します。
$&一致した部分文字列を挿入します。
$`一致した部分文字列の直前の文字列の部分を挿入します。
$'一致した部分文字列の直後の文字列の部分を挿入します。
$nn は 100 未満の正の整数です。第一引数が {{jsxref("RegExp")}} オブジェクトだった場合に n 番目の括弧でキャプチャされた文字列を挿入します。なお、 1 から始まることに注意してください。 n 番目のグループが存在しない場合 (例えば、グループ 3 の場合)、リテラル (例えば $3) として置換されます。
$<Name>ここで、 Name はキャプチャするグループ名です。グループが一致に含まれていなかったり、正規表現に含まれていなかったり、正規表現ではなく文字列が replace の第一引数として渡された場合は、リテラル (例えば $<Name>) に解決されます。名前付きキャプチャグループに対応しているブラウザーのバージョンでのみ利用可能です。
-

引数としての関数の指定

+

引数としての関数の指定

-

第二引数として関数を指定することができます。このとき、関数はマッチが完了された後に実行されます。関数呼び出しの結果（返り値）は、置換文字列として使われます（注記: 上記の特殊な置換パターンはこの場合には適用されません）。第一引数の正規表現がグローバルだと、置換されるべきマッチごとに関数が複数回実行されうることに注意してください。

+

第二引数として関数を指定することができます。このとき、関数は一致が完了された後に実行されます。関数呼び出しの結果 (返値) は、置換文字列として使われます (注: 上記の特殊な置換パターンはこの場合には適用されません)。

+ +

第一引数の正規表現がグローバルだと、置換されるべき一致ごとに関数が複数回実行されうることに注意してください。

関数に与えられる引数は次の通りです。

- - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + +
名前与えられる値
matchマッチした部分文字列（上記の $& に対応）です。
p1, p2, ...replace() の第一引数が {{jsxref("RegExp")}} オブジェクトだった場合、n 番目の括弧でキャプチャされたグループの文字列（上記の $1, $2, などに対応）です。例えば /(\a+)(\b+)/ が与えられた場合、p1 は \a+ に対するマッチ、p2 は \b+ に対するマッチとなります。
offsetマッチした部分文字列の、分析中の文字列全体の中でのオフセットです（例えば、文字列全体が 'abcd' で、マッチした部分文字列が 'bc' ならば、この引数は 1 となります）。
string分析中の文字列全体です。
名前与えられる値
match一致した部分文字列 (上記の $& に対応) です。
p1, p2, ...replace() の第一引数が {{jsxref("RegExp")}} オブジェクトだった場合、n 番目の括弧でキャプチャされたグループの文字列 (上記の $1, $2, などに対応) です。例えば /(\a+)(\b+)/ が与えられた場合、p1 は \a+ に対する一致、p2 は \b+ に対する一致となります。
offset一致した部分文字列の、分析中の文字列全体の中でのオフセットです（例えば、文字列全体が 'abcd' で、一致した部分文字列が 'bc' ならば、この引数は 1 となります）。
string分析中の文字列全体です。
groups名前付きキャプチャグループに対応しているブラウザーのバージョンでは、使用されるグループ名をキーとし、一致した部分を値とするオブジェクトになります (一致しない場合は undefined)。
-

（引数の正確な個数は、第一引数が {{jsxref("RegExp")}} オブジェクトかどうか、そうならばさらに括弧でキャプチャされるサブマッチがいくつ指定されているかに依ります。）

+

（引数の正確な個数は、第一引数が {{jsxref("RegExp")}} オブジェクトかどうか、そうならばさらに括弧でキャプチャされるサブ一致がいくつ指定されているかによります。）

以下の例は newString に 'abc - 12345 - #$*%' をセットします。

@@ -120,50 +139,57 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/replace // p1 is nondigits, p2 digits, and p3 non-alphanumerics return [p1, p2, p3].join(' - '); } -var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer); +let newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer); console.log(newString); // abc - 12345 - #$*% -

例

+

例

-

replace() で正規表現を利用する

+

replace() で正規表現を利用する

-

以下の例では、replace メソッドで正規表現を利用しています。

+

以下の例では、 replace() メソッドで正規表現を利用しています。

-
var str = 'Twas the night before Xmas...';
-var newstr = str.replace(/xmas/i, 'Christmas');
+
let str = 'Twas the night before Xmas...';
+let newstr = str.replace(/xmas/i, 'Christmas');
 console.log(newstr);  // Twas the night before Christmas...
 

 
-
ignore フラグと global フラグの利用

+
これは 'Twas the night before Christmas...' と出力します。

+
+

+  
注: 正規表現についてのその他の例はこのガイドを参照してください。

+

 
-
グローバルな置換は正規表現だけで行われます。以下の例では、正規表現で大文字と小文字の違いを無視するフラグ (i) とグローバルマッチのフラグ (g)を利用し replace() は'apples'が出てくるたびに'oranges'に置換します。

+
大文字小文字を区別しないフラグとグローバルフラグの使用

 
-
var re = /apples/gi;
-var str = 'Apples are round, and apples are juicy.';
-var newstr = str.replace(re, 'oranges');
+
グローバルな置換は、正規表現でのみ行うことができます。次の例では、正規表現にグローバルフラグと大文字小文字の区別をしないフラグが含まれているため、 replace() は文字列中の 'apples' の各出現箇所を 'oranges' に置き換えることができます。

+
+
let re = /apples/gi;
+let str = 'Apples are round, and apples are juicy.';
+let newstr = str.replace(re, 'oranges');
 console.log(newstr);  // oranges are round, and oranges are juicy.
 

 
 
この出力は 'oranges are round, and oranges are juicy' となります。

 
-
文字列内の単語の交換

+
文字列内の単語の交換

 
-
文字列内の単語の位置を交換します。$1 と $2 を置き換えるパターンを使用しています。

+
次のスクリプトでは、文字列内の単語を交換します。テキストを置き換えるために、このスクリプトはキャプチャリンググループと置換パターン $1 および $2 を使用しています。

 
-
var re = /(\w+)\s(\w+)/;
-var str = 'John Smith';
-var newstr = str.replace(re, '$2, $1');
+
let re = /(\w+)\s(\w+)/;
+let str = 'John Smith';
+let newstr = str.replace(re, '$2, $1');
 console.log(newstr);  // Smith, John
 

 
 
この出力は 'Smith, John' となります。

 
-
マッチした文字を修正するインライン関数の使用

+
一致した文字を修正するインライン関数の使用

 
-
次の例では、文字列内に出現する大文字のすべては小文字に変換され、ハイフンがマッチした位置の直前に挿入されます。ここで重要なことは、追加の操作は、マッチしたアイテムが置換されて戻される前に必要とされるということです。

+
次の例では、文字列内に出現する大文字のすべては小文字に変換され、ハイフンが一致した位置の直前に挿入されます。ここで重要なことは、追加の操作は、一致したアイテムが置換されて戻される前に必要とされるということです。

 
-
置換する関数はマッチした断片をその関数の引数として適用します。そして、その引数を大文字小文字変形し、戻り値の直前にハイフンを連結します。

+
置換する関数は一致した断片をその関数の引数として適用します。そして、その引数を大文字小文字変形し、返値の直前にハイフンを連結します。

 
 
function styleHyphenFormat(propertyName) {
   function upperToHyphenLower(match, offset, string) {
@@ -173,124 +199,44 @@ console.log(newstr);  // Smith, John
 }
 

 
-
styleHyphenFormat('borderTop')を入力すると 'border-top'を返します。

+
styleHyphenFormat('borderTop')を入力すると 'border-top' を返します。

 
-
最終的な置換が作成される前にサブマッチの結果 をさらに変形したい場合、関数を使わなくてはなりません。これは、toLowerCase() メソッドの前にマッチを評価することを強制します。関数無しにこれをマッチに使用した場合、その toLowerCase() メソッドは効果がないでしょう。

+
最終的な置換が行われる前に、一致の結果をさらに変換したいので、関数を使用する必要があります。これにより、 {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} メソッドの前に一致の評価が行われます。関数を使わず一致を使ってこれを行おうとした場合、 {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} は何の効果もないでしょう。

 
-
var newString = propertyName.replace(/[A-Z]/, '-' + '$&'.toLowerCase());  // 動作しないでしょう

+
let newString = propertyName.replace(/[A-Z]/g, '-' + '$&'.toLowerCase());  // 動作しないでしょう

 
 
これは、'$&'.toLowerCase() は、まずその文字がパターンとして使用される前に ('$&' という結果である ) 文字列リテラルとして評価されるだろうからです。

 
-
華氏温度を同等の摂氏温度と置き換える

+
華氏温度を同等の摂氏温度と置き換える

 
-
以下の例は、ある華氏温度をそれと同等の摂氏温度と置き換えます。その華氏温度は F で終わる数でなければなりません。その関数は C で終わる摂氏を返します。例えば、入力される数が 212F である場合、その関数は 100C を返します。入力される数が 0F であった場合、その関数は -17.77777777777778C を返します。

+
以下の例は、ある華氏温度をそれと同等の摂氏温度と置き換えます。その華氏温度は "F" で終わる数でなければなりません。この関数は "C" で終わる摂氏を返します。例えば、入力される数が "212F" である場合、その関数は "100C" を返します。入力される数が "0F" であった場合、その関数は "-17.77777777777778C" を返します。

 
-
その正規表現 test は、任意の数が F で終わっているかチェックします。華氏温度の数は、関数の 第二引数 p1 を通して、その関数にアクセスできます。その関数は文字列内で渡された華氏温度をベースとした摂氏の数を f2c にセットします。それから、f2c は、摂氏の数を返します。この関数は Perl の s///e フラグ {{訳注('s は substitute （置換する）の略。e は evaluate（評価する）の略です。詳細は perlop の Regexp Quote-Like Operators の項（※perldoc.jp による日本語訳）を参照してください。')}} と似ています。

+
その正規表現 test は、任意の数が F で終わっているかチェックします。華氏温度の数は、関数の 第二引数 p1 を通して、その関数にアクセスできます。その関数は文字列内で渡された華氏温度をベースとした摂氏の数を f2c() にセットします。それから、f2c() は、摂氏の数を返します。この関数は Perl の s///e フラグと似ています。

 
 
function f2c(x) {
   function convert(str, p1, offset, s) {
     return ((p1 - 32) * 5/9) + 'C';
   }
-  var s = String(x);
-  var test = /(-?\d+(?:\.\d*)?)F\b/g;
+  let s = String(x);
+  let test = /(-?\d+(?:\.\d*)?)F\b/g;
   return s.replace(test, convert);
 }
 

 
-
インライン関数と正規表現で for ループを回避する

-
-
次の例では、あるパターンを持つ文字列を解析してオブジェクトの配列に変換します。

-
-
入力:

-
-
x, -, _ からなる文字列です。

-
-
x-x_
-x---x---x---x---
-x-xxx-xx-x-
-x_x_x___x___x___

-
-
出力ルール:

-
-
'x' は 'on' への切り替えを、'-' (ハイフン) は 'off' への切り替えを表すとし、'_' (アンダースコア) は x の後に続いて 'on' の長さを表すものとします。on と off の切り替わりをオブジェクトの配列で返します。

-
-
[
-  { on: true, length: 1 },   // 一番最初の "x" で on になります。
-  { on: false, length: 1 },  // その次の "-" で off になります。
-  { on: true, length: 2 }    // その次の "x" で on になり、"_" が一つ続いているため、長さは 2 になります。
-  ...
-]
-

-
-
スニペット:

+
仕様書

 
-
var str = 'x-x_';
-var retArr = [];
-str.replace(/(x_*)|(-)/g, function(match, p1, p2) {
-  if (p1) { retArr.push({ on: true, length: p1.length }); }
-  if (p2) { retArr.push({ on: false, length: 1 }); }
-});
+{{Specifications}}
 
-console.log(retArr);
-

-
-
このスニペットは for を使わずに、上記の入出力ルールを満たす 3 オブジェクトからなる配列を生成します。

-
-
仕様

-
-
    
-

-
-
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書策定状況コメント
{{SpecName('ES3')}}{{Spec2('ES3')}}初期定義。JavaScript 1.2 で実装される。
{{SpecName('ES5.1', '#sec-15.5.4.11', 'String.prototype.replace')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-string.prototype.replace', 'String.prototype.replace')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-string.prototype.replace', 'String.prototype.replace')}}{{Spec2('ESDraft')}} 

-
-
ブラウザー実装状況

-
-
+
ブラウザーの互換性

 
-
{{Compat("javascript.builtins.String.replace")}}

 
-
Firefox 固有の注記

-
-
    
- 
  • flags は Gecko のみで利用できる非標準の第3引数です : str.replace(regexp|substr, newSubStr|function, flags)
    • 
- 
  • Gecko 27 {{geckoRelease(27)}} 以降、このメソッドは ECMAScript 標準に準拠するために補正されました。replace() がグローバルの正規表現とともに呼び出された場合、{{jsxref("RegExp.lastIndex")}} プロパティが（もし指定されていたなら）0 にリセットされます ({{bug(501739)}})。
    • 
- 
  • Gecko 39 {{geckoRelease(39)}} 以降、flags 引数は非推奨となり、コンソールに警告を投げます ({{bug(1142351)}})。
    • 
- 
  • Gecko 47 {{geckoRelease(47)}} 以降、非標準の flags 引数は非リリース版でサポートされず、もうすぐ完全に削除されます ({{bug(1245801)}}).
    • 
- 
  • Gecko 49 {{geckoRelease(49)}} 以降、非標準の flags 引数はもうサポートされません ({{bug(1108382)}}).
    • 
-

+
{{Compat}}

 
-
関連情報

+
関連情報

 
 
    
- 
  • {{jsxref("String.prototype.match()")}}
    • 
- 
  • {{jsxref("RegExp.prototype.exec()")}}
    • 
- 
  • {{jsxref("RegExp.prototype.test()")}}
    • 
+  
  • {{jsxref("String.prototype.replaceAll", "String.prototype.replaceAll()")}}
    • 
+  
  • {{jsxref("String.prototype.match", "String.prototype.match()")}}
    • 
+  
  • {{jsxref("RegExp.prototype.exec", "RegExp.prototype.exec()")}}
    • 
+  
  • {{jsxref("RegExp.prototype.test", "RegExp.prototype.test()")}}
    • 
 

-- 
cgit v1.2.3-54-g00ecf