语法高亮,滚动条美化,设置页面调整

This commit is contained in:
fofolee
2019-04-19 02:41:09 +08:00
parent 1e8f76c000
commit 359d29ee0b
1590 changed files with 12328 additions and 11441 deletions

View File

@@ -4,7 +4,7 @@
<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 class="syntaxbox"><var>str</var>.matchAll(<var>regexp</var>)</pre>
<pre><code class="language-javascript"><var>str</var>.matchAll(<var>regexp</var>)</code></pre>
<h3 id="参数">参数</h3>
<dl>
<dt><code>regexp</code></dt>
@@ -15,7 +15,7 @@
<h2 id="例子">例子</h2>
<h3 id="Regexp.exec()_和_matchAll()">Regexp.exec() 和 matchAll()</h3>
<p><code>matchAll</code> 出现之前通过在循环中调用regexp.exec来获取所有匹配项信息regexp需使用/g标志</p>
<pre class="brush: js">const regexp = RegExp('foo*','g');
<pre><code class="language-javascript">const regexp = RegExp('foo*','g');
const str = 'table football, foosball';
while ((matches = regexp.exec(str)) !== null) {
@@ -23,10 +23,10 @@ while ((matches = regexp.exec(str)) !== null) {
  // expected output: "Found foo. Next starts at 9."
  // expected output: "Found foo. Next starts at 19."
}
</pre>
</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 class="brush: js">const regexp = RegExp('foo*','g');
<pre><code class="language-javascript">const regexp = RegExp('foo*','g');
const str = 'table football, foosball';
let matches = str.matchAll(regexp);
@@ -42,22 +42,22 @@ matches = str.matchAll(regexp);
Array.from(matches, m =&gt; m[0]);
// Array [ "foo", "foo" ]
</pre>
</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 class="brush: js">var regexp = /t(e)(st(\d?))/g;
<pre><code class="language-javascript">var regexp = /t(e)(st(\d?))/g;
var str = 'test1test2';
str.match(regexp);
// Array ['test1', 'test2']</pre>
// Array ['test1', 'test2']</code></pre>
<p>使用 <code>matchAll</code> 可以通过如下方式获取分组捕获:</p>
<pre class="brush: js">let array = [...str.matchAll(regexp)];
<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]
</pre>
</code></pre>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>