2019-04-21 11:50:48 +08:00

137 lines
14 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<article id="wikiArticle">
<div></div>
<p> <strong><code>[@@replace]()</code></strong> 方法会在一个字符串中用给定的替换器,替换所有符合正则模式的匹配项,并返回替换后的新字符串结果。用来替换的参数可以是一个字符串或是一个针对每次匹配的回调函数。</p>
<p><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/regexp-prototype-@@replace.html" width="100%"></iframe></p>
<h2 id="语法">语法</h2>
<pre><code class="language-javascript"><var>regexp</var>[Symbol.replace](str, <var>newSubStr</var>|<var>function</var>)</code></pre>
<h3 id="参数">参数</h3>
<dl>
<dt><code>str</code></dt>
<dd>正则替换的目标字符串。</dd>
<dt><code>newSubStr (replacement)</code></dt>
<dd>类型为 <a href="Reference/String" title="此页面仍未被本地化, 期待您的翻译!"><code>String</code></a> 的替换器。支持大多数特殊的替换匹配模式; 见<a href="Reference/Global_Objects/String/replace" title="replace() 方法返回一个由替换值replacement替换一些或所有匹配的模式pattern后的新字符串。模式可以是一个字符串或者一个正则表达式替换值可以是一个字符串或者一个每次匹配都要调用的函数。"><code>String.prototype.replace()</code></a>页的<a href="Reference/Global_Objects/String/replace#Specifying_a_string_as_a_parameter" title="replace() 方法返回一个由替换值replacement替换一些或所有匹配的模式pattern后的新字符串。模式可以是一个字符串或者一个正则表达式替换值可以是一个字符串或者一个每次匹配都要调用的函数。">Specifying a string as a parameter</a>部分。</dd>
<dt><code>function (replacement)</code></dt>
<dd>生成新的子字符串的回调函数替换器。作用于该函数的参数的详细描述见<a href="Reference/Global_Objects/String/replace" title="replace() 方法返回一个由替换值replacement替换一些或所有匹配的模式pattern后的新字符串。模式可以是一个字符串或者一个正则表达式替换值可以是一个字符串或者一个每次匹配都要调用的函数。"><code>String.prototype.replace()</code></a>页的  <a href="Reference/Global_Objects/String/replace#Specifying_a_function_as_a_parameter" title="replace() 方法返回一个由替换值replacement替换一些或所有匹配的模式pattern后的新字符串。模式可以是一个字符串或者一个正则表达式替换值可以是一个字符串或者一个每次匹配都要调用的函数。">Specifying a function as a parameter</a> 部分。</dd>
</dl>
<h3 id="返回值">返回值</h3>
<p>用替换器替换相应匹配项后的新字符串。</p>
<h2 id="描述">描述</h2>
<p>如果匹配模式也是<a href="Reference/RegExp" title="此页面仍未被本地化, 期待您的翻译!"><code>RegExp</code></a>对象,这个方法在 <a href="Reference/Global_Objects/String/replace" title="replace() 方法返回一个由替换值replacement替换一些或所有匹配的模式pattern后的新字符串。模式可以是一个字符串或者一个正则表达式替换值可以是一个字符串或者一个每次匹配都要调用的函数。"><code>String.prototype.replace()</code></a> 的内部调用。例如,下面的两个方法返回相同结果。</p>
<pre><code class="language-javascript">'abc'.replace(/a/, 'A');
/a/[Symbol.replace]('abc', 'A');</code></pre>
<p>该方法是为了在RegExp子类中自定义匹配的替换模式。</p>
<p>如果匹配模式不是一个<a href="Reference/RegExp" title="此页面仍未被本地化, 期待您的翻译!"><code>RegExp</code></a> 对象, <a href="Reference/Global_Objects/String/replace" title="replace() 方法返回一个由替换值replacement替换一些或所有匹配的模式pattern后的新字符串。模式可以是一个字符串或者一个正则表达式替换值可以是一个字符串或者一个每次匹配都要调用的函数。"><code>String.prototype.replace()</code></a> 就不会调用该方法,也不会创建一个 <a href="Reference/RegExp" title="此页面仍未被本地化, 期待您的翻译!"><code>RegExp</code></a>对象。</p>
<h2 id="示例">示例</h2>
<h3 id="直接调用">直接调用</h3>
<p>这个方法基本可以和 <a href="Reference/Global_Objects/String/replace" title="replace() 方法返回一个由替换值replacement替换一些或所有匹配的模式pattern后的新字符串。模式可以是一个字符串或者一个正则表达式替换值可以是一个字符串或者一个每次匹配都要调用的函数。"><code>String.prototype.replace()</code></a> 一样使用, 不同之处是 <code>this</code> 和参数顺序。</p>
<pre><code class="language-javascript">var re = /-/g;
var str = '2016-01-01';
var newstr = re[Symbol.replace](str, '.');
console.log(newstr); // 2016.01.01
</code></pre>
<h3 id="在子类中使用replace">在子类中使用@@replace</h3>
<p><a href="Reference/RegExp" title="此页面仍未被本地化, 期待您的翻译!"><code>RegExp</code></a> 的子类可以覆写 <code>[@@replace]()</code>方法来修改默认行为。</p>
<pre><code class="language-javascript">class MyRegExp extends RegExp {
constructor(pattern, flags, count) {
super(pattern, flags);
this.count = count;
}
[Symbol.replace](str, replacement) {
// Perform @@replace |count| times.
var result = str;
for (var i = 0; i &lt; this.count; i++) {
result = RegExp.prototype[Symbol.replace].call(this, result, replacement);
}
return result;
}
}
var re = new MyRegExp('\\d', '', 3);
var str = '01234567';
var newstr = str.replace(re, '#'); // String.prototype.replace calls re[@@replace].
console.log(newstr); // ###34567</code></pre>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
<tr>
<td><a class="external" href="https://www.ecma-international.org/ecma-262/6.0/#sec-regexp.prototype-@@replace" hreflang="en" lang="en" rel="noopener">ECMAScript 2015 (6th Edition, ECMA-262)<br/><small lang="zh-CN">RegExp.prototype[@@replace]</small></a></td>
<td><span class="spec-Standard">Standard</span></td>
<td>初始定义</td>
</tr>
<tr>
<td><a class="external" href="https://tc39.github.io/ecma262/#sec-regexp.prototype-@@replace" hreflang="en" lang="en" rel="noopener">ECMAScript Latest Draft (ECMA-262)<br/><small lang="zh-CN">RegExp.prototype[@@replace]</small></a></td>
<td><span class="spec-Draft">Draft</span></td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div>
<p></p><div class="bc-data"><a class="bc-github-link external" href="https://github.com/mdn/browser-compat-data" rel="noopener">Update compatibility data on GitHub</a><table class="bc-table bc-table-js"><thead><tr class="bc-platforms"><td></td><th class="bc-platform-desktop" colspan="6"><span>Desktop</span></th><th class="bc-platform-mobile" colspan="7"><span>Mobile</span></th><th class="bc-platform-server" colspan="1"><span>Server</span></th></tr><tr class="bc-browsers"><td></td><th class="bc-browser-chrome"><span class="bc-head-txt-label bc-head-icon-chrome">Chrome</span></th><th class="bc-browser-edge"><span class="bc-head-txt-label bc-head-icon-edge">Edge</span></th><th class="bc-browser-firefox"><span class="bc-head-txt-label bc-head-icon-firefox">Firefox</span></th><th class="bc-browser-ie"><span class="bc-head-txt-label bc-head-icon-ie">Internet Explorer</span></th><th class="bc-browser-opera"><span class="bc-head-txt-label bc-head-icon-opera">Opera</span></th><th class="bc-browser-safari"><span class="bc-head-txt-label bc-head-icon-safari">Safari</span></th><th class="bc-browser-webview_android"><span class="bc-head-txt-label bc-head-icon-webview_android">Android webview</span></th><th class="bc-browser-chrome_android"><span class="bc-head-txt-label bc-head-icon-chrome_android">Chrome for Android</span></th><th class="bc-browser-edge_mobile"><span class="bc-head-txt-label bc-head-icon-edge_mobile">Edge Mobile</span></th><th class="bc-browser-firefox_android"><span class="bc-head-txt-label bc-head-icon-firefox_android">Firefox for Android</span></th><th class="bc-browser-opera_android"><span class="bc-head-txt-label bc-head-icon-opera_android">Opera for Android</span></th><th class="bc-browser-safari_ios"><span class="bc-head-txt-label bc-head-icon-safari_ios">Safari on iOS</span></th><th class="bc-browser-samsunginternet_android"><span class="bc-head-txt-label bc-head-icon-samsunginternet_android">Samsung Internet</span></th><th class="bc-browser-nodejs"><span class="bc-head-txt-label bc-head-icon-nodejs">Node.js</span></th></tr></thead><tbody><tr><th scope="row"><code>@@replace</code></th><td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
49</td><td class="bc-supports-no bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-no only-icon" title="No support">
<span>No support</span>
</abbr>
No</td><td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-edge_mobile"><span class="bc-browser-name">Edge Mobile</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
49</td><td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
Yes</td><td class="bc-supports-yes bc-browser-nodejs"><span class="bc-browser-name">nodejs</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
6.0.0</td></tr></tbody></table><section class="bc-legend" id="sect1"><h3 class="offscreen" id="Legend">Legend</h3><dl><dt><span class="bc-supports-yes bc-supports">
<abbr class="bc-level bc-level-yes only-icon" title="Full support">
<span>Full support</span>
 
</abbr></span></dt><dd>Full support</dd><dt><span class="bc-supports-no bc-supports">
<abbr class="bc-level bc-level-no only-icon" title="No support">
<span>No support</span>
 
</abbr></span></dt><dd>No support</dd></dl></section></div><p></p>
</div>
<h2 id="另见">另见</h2>
<ul>
<li><a href="Reference/Global_Objects/String/replace" title="replace() 方法返回一个由替换值replacement替换一些或所有匹配的模式pattern后的新字符串。模式可以是一个字符串或者一个正则表达式替换值可以是一个字符串或者一个每次匹配都要调用的函数。"><code>String.prototype.replace()</code></a></li>
<li><a href="Reference/Global_Objects/RegExp/@@match" title="对正则表达式匹配字符串时,[@@match]()方法用于获取匹配结果。"><code>RegExp.prototype[@@match]()</code></a></li>
<li><a href="Reference/Global_Objects/RegExp/@@search" title="[@@search]() 方法执行了一个在给定字符串中的一个搜索以取得匹配正则模式的项。"><code>RegExp.prototype[@@search]()</code></a></li>
<li><a href="Reference/Global_Objects/RegExp/@@split" title="[@@split]() 方法切割 String 对象为一个其子字符串的数组 。"><code>RegExp.prototype[@@split]()</code></a></li>
<li><a href="Reference/Global_Objects/RegExp/exec" title="exec() 方法在一个指定字符串中执行一个搜索匹配。返回一个结果数组或 null。"><code>RegExp.prototype.exec()</code></a></li>
<li><a href="Reference/Global_Objects/RegExp/test" title="test() 方法执行一个检索,用来查看正则表达式与指定的字符串是否匹配。返回 true 或 false。"><code>RegExp.prototype.test()</code></a></li>
</ul>
</article>