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

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

@@ -6,10 +6,10 @@
<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="Syntax" name="Syntax">语法</h2>
<p>字面量, 构造函数和工厂符号都是可以的:</p>
<pre class="syntaxbox">/<em>pattern</em>/<em>flags</em>
<pre><code class="language-javascript">/<em>pattern</em>/<em>flags</em>
<em>new </em>RegExp(<em>pattern</em> <em>[, flags]</em>)
RegExp(<em>pattern</em> <em>[, flags]</em>)
</pre>
</code></pre>
<h3 id="Parameters" name="Parameters">参数</h3>
<dl>
<dt><code>pattern</code></dt>
@@ -33,15 +33,15 @@ RegExp(<em>pattern</em> <em>[, flags]</em>)
</dl>
<h2 id="Description" name="Description">描述</h2>
<p>有两种方法来创建一个RegExp对象一是字面量、二是构造函数。要指示字符串字面量的参数不使用引号而构造函数的参数使用引号。因此以下表达式创建相同的正则表达式</p>
<pre class="brush: js" style="font-size: 14px;">/ab+c/i;
<pre><code class="language-js" style="font-size: 14px;">/ab+c/i;
new RegExp('ab+c', 'i');
new RegExp(/ab+c/, 'i');</pre>
new RegExp(/ab+c/, 'i');</code></pre>
<p>当表达式被赋值时字面量形式提供正则表达式的编译compilation状态当正则表达式保持为常量时使用字面量。例如当你在循环中使用字面量构造一个正则表达式时正则表达式不会在每一次迭代中都被重新编译recompiled</p>
<p>而正则表达式对象的构造函数,如 <code>new RegExp('ab+c')</code> 提供了正则表达式运行时编译runtime compilation。如果你知道正则表达式模式将会改变或者你事先不知道什么模式而是从另一个来源获取如用户输入这些情况都可以使用构造函数。</p>
<p>从ECMAScript 6开始当第一个参数为正则表达式而第二个标志参数存在时new RegExp(/ab+c/, 'i')不再抛出<a href="Reference/Global_Objects/TypeError" title="TypeError类型错误 对象用来表示值的类型非预期类型时发生的错误。"><code>TypeError</code></a> (“当从其他正则表达式进行构造时不支持标志”)的异常,取而代之,将使用这些参数创建一个新的正则表达式。</p>
<p>当使用构造函数创造正则对象时,需要常规的字符转义规则(在前面加反斜杠 \)。比如,以下是等价的:</p>
<pre class="brush: js">var re = new RegExp("\\w+");
var re = /\w+/;</pre>
<pre><code class="language-javascript">var re = new RegExp("\\w+");
var re = /\w+/;</code></pre>
<h2 id="Special_characters_in_regular_expressions" name="Special_characters_in_regular_expressions">正则表达式中特殊字符的含义</h2>
<ul>
<li><a href="https://developer.mozilla.orgReference/Global_Objects/RegExp#character-classes">字符类别Character Classes</a></li>
@@ -450,20 +450,20 @@ var re = /\w+/;</pre>
<h2 id="例子">例子</h2>
<h3 id="Example:_Using_a_regular_expression_to_change_data_format" name="Example:_Using_a_regular_expression_to_change_data_format">例子:使用正则改变数据结构</h3>
<p>下例使用 <a href="Reference/Global_Objects/String/replace" title="replace() 方法返回一个由替换值replacement替换一些或所有匹配的模式pattern后的新字符串。模式可以是一个字符串或者一个正则表达式替换值可以是一个字符串或者一个每次匹配都要调用的函数。"><code>replace</code></a> 方法 (继承自 <a href="Reference/Global_Objects/String" title="String 全局对象是一个用于字符串或一个字符序列的构造函数。"><code>String</code></a>)去匹配姓名 <em>first last </em>输出新的格式 <em>last</em>, <em>first</em>。脚本中使用 <code>$1 和</code> <code>$2</code> 指明括号里先前的匹配.</p>
<pre class="brush: js">var re = /(\w+)\s(\w+)/;
<pre><code class="language-javascript">var re = /(\w+)\s(\w+)/;
var str = "John Smith";
var newstr = str.replace(re, "$2, $1");
print(newstr);</pre>
print(newstr);</code></pre>
<p>显示 "Smith, John".</p>
<h3 id="例子:在多行中使用正则表达式" style="line-height: 24px;">例子:在多行中使用正则表达式</h3>
<pre class="brush: js">var s = "Please yes\nmake my day!";
<pre><code class="language-javascript">var s = "Please yes\nmake my day!";
s.match(/yes.*day/);
// Returns null
s.match(/yes[^]*day/);
// Returns 'yes\nmake my day'</pre>
// Returns 'yes\nmake my day'</code></pre>
<h3 id="Example:_Using_a_regular_expression_with_the_sticky_flag" name="Example:_Using_a_regular_expression_with_the_sticky_flag">例子: 使用带有 ”sticky“ 标志的正则表达式</h3>
<p>该例展示了,如何在正则表达式上使用 sticky 标志,用来匹配多行输入的单独行。</p>
<pre class="brush: js">var text = "First line\nsecond line";
<pre><code class="language-javascript">var text = "First line\nsecond line";
var regex = /(\S+) line\n?/y;
var match = regex.exec(text);
@@ -475,15 +475,15 @@ print(match2[1]); // prints "Second"
print(regex.lastIndex); // prints "22"
var match3 = regex.exec(text);
print(match3 === null); // prints "true"</pre>
print(match3 === null); // prints "true"</code></pre>
<p>可以使用 <code>try { … } catch { … }</code> 来测试运行时run-time是否支持 <code>sticky</code> 标志。这种情况下,必须使用 <code>eval(…)</code> 表达式或 <code>RegExp(<var>regex-string</var>, <var>flags-string</var>)</code> 语法(这是由于 <code>/<var>regex</var>/<var>flags</var></code> 表示法将会在编译时刻被处理,因此在 <code>catch</code> 语句块处理异常前就会抛出一个异常。例如:</p>
<pre class="brush: js">var supports_sticky;
<pre><code class="language-javascript">var supports_sticky;
try { RegExp('','y'); supports_sticky = true; }
catch(e) { supports_sticky = false; }
alert(supports_sticky); // alerts "false" in Firefox 2, "true" in Firefox 3+</pre>
alert(supports_sticky); // alerts "false" in Firefox 2, "true" in Firefox 3+</code></pre>
<h3 id="Browser_Compatibility" name="Browser_Compatibility">例子:使用正则表达式和 Unicode 字符</h3>
<p>正如上面表格提到的,<code>\w</code> 或 <code>\W</code> 只会匹配基本的 ASCII 字符;如 'a' 到 'z'、 'A' 到 'Z'、 0 到 9 及 '_'。为了匹配其他语言中的字符如西里尔Cyrillic或 希伯来语Hebrew要使用 <code>\uhhhh</code>"hhhh" 表示以十六进制表示的字符的 Unicode 值。下例展示了怎样从一个单词中分离出 Unicode 字符。</p>
<pre class="brush: js">var text = "Образец text на русском языке";
<pre><code class="language-javascript">var text = "Образец text на русском языке";
var regex = /[\u0400-\u04FF]+/g;
var match = regex.exec(text);
@@ -494,11 +494,11 @@ var match2 = regex.exec(text);
print(match2[1]); // prints "на" [did not print "text"]
print(regex.lastIndex); // prints "15"
// and so on</pre>
// and so on</code></pre>
<p>这里有一个外部资源,用来获取 Unicode 中的不同区块范围:<a class="external" href="http://kourge.net/projects/regexp-unicode-block" rel="noopener" title="http://kourge.net/projects/regexp-unicode-block">Regexp-unicode-block</a></p>
<h3 id="例子从_URL_中提取子域名" style="line-height: 24px;">例子:从 URL 中提取子域名</h3>
<pre class="brush: js">var url = "http://xxx.domain.com";
print(/[^.]+/.exec(url)[0].substr(7)); // prints "xxx"</pre>
<pre><code class="language-javascript">var url = "http://xxx.domain.com";
print(/[^.]+/.exec(url)[0].substr(7)); // prints "xxx"</code></pre>
<h2 id="规范" style="margin-bottom: 20px; line-height: 30px;">规范</h2>
<table class="standard-table">
<tbody>
@@ -611,7 +611,7 @@ print(/[^.]+/.exec(url)[0].substr(7)); // prints "xxx"</pre>
// Firefox 34 or newer
'x'.replace(/x(.)?/g, function(m, group) {
console.log("'group:" + group + "'");
}); // 'group:undefined'</code></pre>
}); // 'group:undefined'</code></code></pre>
<p>Note that due to web compatibility, <code>RegExp.$N</code> will still return an empty string instead of <code>undefined</code> (<a class="external" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1053944" rel="noopener" title="FIXED: RegExp.$N changed behavior since FF 33">bug 1053944</a>).</p>
<h2 id="相关链接_2">相关链接</h2>
<ul>