mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-06-09 15:34:05 +08:00
133 lines
10 KiB
HTML
133 lines
10 KiB
HTML
<article id="wikiArticle">
|
||
<div></div>
|
||
<p><strong><code>matchAll()</code></strong> 方法返回一个包含所有匹配正则表达式及分组捕获结果的迭代器。</p>
|
||
<p>{{EmbedInteractiveExample("pages/js/string-matchall.html")}}</p>
|
||
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a class="external" href="https://github.com/mdn/interactive-examples" rel="noopener">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
|
||
<h2 id="语法">语法</h2>
|
||
<pre><code class="language-javascript"><var>str</var>.matchAll(<var>regexp</var>)</code></pre>
|
||
<h3 id="参数">参数</h3>
|
||
<dl>
|
||
<dt><code>regexp</code></dt>
|
||
</dl>
|
||
<p> 正则表达式对象。如果所传参数不是一个正则表达式对象，则会隐式地使用 <code>new RegExp(obj)</code> 将其转换为一个 <a href="https://developer.mozilla.orgReference/RegExp" title="此页面仍未被本地化, 期待您的翻译!"><code>RegExp</code></a> 。</p>
|
||
<h3 id="返回值">返回值</h3>
|
||
<p>一个迭代器（不可重用，结果耗尽需要再次调用方法，获取一个新的迭代器）。</p>
|
||
<h2 id="例子">例子</h2>
|
||
<h3 id="Regexp.exec()_和_matchAll()">Regexp.exec() 和 matchAll()</h3>
|
||
<p>在 <code>matchAll</code> 出现之前，通过在循环中调用regexp.exec来获取所有匹配项信息（regexp需使用/g标志：</p>
|
||
<pre><code class="language-javascript">const regexp = RegExp('foo*','g');
|
||
const str = 'table football, foosball';
|
||
|
||
while ((matches = regexp.exec(str)) !== null) {
|
||
console.log(`Found ${matches[0]}. Next starts at ${regexp.lastIndex}.`);
|
||
// expected output: "Found foo. Next starts at 9."
|
||
// expected output: "Found foo. Next starts at 19."
|
||
}
|
||
</code></pre>
|
||
<p> </p>
|
||
<p>如果使用<code>matchAll</code> ，就可以不必使用while循环加exec方式（且正则表达式需使用／g标志）。使用<code>matchAll</code> 会得到一个迭代器的返回值，配合 <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code>, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax">array spread</a>, or <a href="Reference/Global_Objects/Array/from" title="Array.from() 方法从一个类似数组或可迭代对象中创建一个新的数组实例。"><code>Array.from()</code></a> 可以更方便实现功能：</p>
|
||
<pre><code class="language-javascript">const regexp = RegExp('foo*','g');
|
||
const str = 'table football, foosball';
|
||
let matches = str.matchAll(regexp);
|
||
|
||
for (const match of matches) {
|
||
console.log(match);
|
||
}
|
||
// Array [ "foo" ]
|
||
// Array [ "foo" ]
|
||
|
||
// matches iterator is exhausted after the for..of iteration
|
||
// Call matchAll again to create a new iterator
|
||
matches = str.matchAll(regexp);
|
||
|
||
Array.from(matches, m => m[0]);
|
||
// Array [ "foo", "foo" ]
|
||
</code></pre>
|
||
<h3 id="更好地获取分组捕获">更好地获取分组捕获</h3>
|
||
<p><code>matchAll</code> 的另外一个亮点是更好地获取分组捕获。因为当使用<code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match">match()</a></code>和/g标志方式获取匹配信息时，分组捕获会被忽略：</p>
|
||
<pre><code class="language-javascript">var regexp = /t(e)(st(\d?))/g;
|
||
var str = 'test1test2';
|
||
|
||
str.match(regexp);
|
||
// Array ['test1', 'test2']</code></pre>
|
||
<p>使用 <code>matchAll</code> 可以通过如下方式获取分组捕获:</p>
|
||
<pre><code class="language-javascript">let array = [...str.matchAll(regexp)];
|
||
|
||
array[0];
|
||
// ['test1', 'e', 'st1', '1', index: 0, input: 'test1test2', length: 4]
|
||
array[1];
|
||
// ['test2', 'e', 'st2', '2', index: 5, input: 'test1test2', length: 4]
|
||
</code></pre>
|
||
<h2 id="规范">规范</h2>
|
||
<table class="standard-table">
|
||
<tbody>
|
||
<tr>
|
||
<th scope="col">Specification</th>
|
||
<th scope="col">Status</th>
|
||
</tr>
|
||
<tr>
|
||
<td><a class="external" href="https://tc39.github.io/proposal-string-matchall/#sec-string-prototype-matchall" rel="noopener">String.prototype.matchAll</a></td>
|
||
<td>Stage 3</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<h2 id="浏览器兼容性">浏览器兼容性</h2>
|
||
<p class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data" rel="noopener">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
|
||
<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>matchAll</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>
|
||
73</td><td class="bc-supports-no bc-browser-edge"><span class="bc-browser-name">Edge</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-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support">
|
||
<span>Full support</span>
|
||
</abbr>
|
||
67</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>
|
||
60</td><td class="bc-supports-no bc-browser-safari"><span class="bc-browser-name">Safari</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-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>
|
||
73</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>
|
||
73</td><td class="bc-supports-no bc-browser-edge_mobile"><span class="bc-browser-name">Edge Mobile</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-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>
|
||
67</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-no bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</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-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-no bc-browser-nodejs"><span class="bc-browser-name">nodejs</span><abbr class="bc-level-no only-icon" title="No support">
|
||
<span>No support</span>
|
||
</abbr>
|
||
No</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>
|
||
<h2 id="相关链接">相关链接</h2>
|
||
<ul>
|
||
<li><a href="Reference/RegExp" title="此页面仍未被本地化, 期待您的翻译!"><code>RegExp</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> |