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

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

@@ -5,7 +5,7 @@
<div><iframe class="interactive interactive-js" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/string-replace.html" width="100%"></iframe></div>
<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"><code><var>str</var>.replace(<var>regexp</var>|<var>substr</var>, <var>newSubStr</var>|<var>function</var>)</code></pre>
<pre><code class="language-javascript"><code><var>str</var>.replace(<var>regexp</var>|<var>substr</var>, <var>newSubStr</var>|<var>function</var>)</code></code></pre>
<h3 id="参数">参数</h3>
<dl>
<dt><code>regexp </code>(pattern)</dt>
@@ -93,56 +93,56 @@
</table>
<p>(精确的参数个数依赖于 <code>replace()</code> 的第一个参数是否是一个正则表达式(<a href="Reference/RegExp" title="此页面仍未被本地化, 期待您的翻译!"><code>RegExp</code></a>)对象,以及这个正则表达式中指定了多少个括号子串。)</p>
<p>下面的例子将会使 <code>newString</code> 变成 <code>'abc - 12345 - #$*%'</code></p>
<pre class="brush: js">function replacer(match, p1, p2, p3, offset, string) {
<pre><code class="language-javascript">function replacer(match, p1, p2, p3, offset, string) {
// p1 is nondigits, p2 digits, and p3 non-alphanumerics
return [p1, p2, p3].join(' - ');
}
var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
console.log(newString); // abc - 12345 - #$*%
</pre>
</code></pre>
<h2 id="Examples" name="Examples">示例</h2>
<h3 id="在_replace()_中使用正则表达式"><code>replace()</code> 中使用正则表达式</h3>
<p>在下面的例子中,<code>replace()</code> 中使用了正则表达式及忽略大小写标示。</p>
<pre class="brush: js">var str = 'Twas the night before Xmas...';
<pre><code class="language-javascript">var str = 'Twas the night before Xmas...';
var newstr = str.replace(/xmas/i, 'Christmas');
console.log(newstr); // Twas the night before Christmas...
</pre>
</code></pre>
<h3 id="在_replace()_中使用_global_和_ignore_选项"><code>replace()</code> 中使用 <code>global</code><code>ignore</code> 选项</h3>
<p>下面的例子中,正则表达式包含有全局替换(g)和忽略大小写(i)的选项,这使得replace方法用'oranges'替换掉了所有出现的"apples".</p>
<pre class="brush: js">var re = /apples/gi;
<pre><code class="language-javascript">var re = /apples/gi;
var str = "Apples are round, and apples are juicy.";
var newstr = str.replace(re, "oranges");
// oranges are round, and oranges are juicy.
console.log(newstr);
</pre>
</code></pre>
<h3 id="交换字符串中的两个单词">交换字符串中的两个单词</h3>
<p>下面的例子演示了如何交换一个字符串中两个单词的位置,这个脚本使用$1 和 $2 代替替换文本。</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");
// Smith, John
console.log(newstr);
</pre>
</code></pre>
<h3 id="使用行内函数来修改匹配到的字符。">使用行内函数来修改匹配到的字符。</h3>
<p>在这个例子中,所有出现的大写字母转换为小写,并且在匹配位置前加一个连字符。重要的是,在返回一个替换了的字符串前需要在匹配元素前需要进行添加操作。</p>
<p>在返回前,替换函数允许匹配片段作为参数,并且将它和连字符进行连接作为新的片段。</p>
<pre class="brush: js">function styleHyphenFormat(propertyName) {
<pre><code class="language-javascript">function styleHyphenFormat(propertyName) {
function upperToHyphenLower(match) {
return '-' + match.toLowerCase();
}
return propertyName.replace(/[A-Z]/g, upperToHyphenLower);
}
</pre>
</code></pre>
<p>运行 <code style="font-size: 1rem; letter-spacing: -0.00278rem;">styleHyphenFormat('borderTop')</code><code style="font-size: 1rem; letter-spacing: -0.00278rem;"></code><span style="background-color: #ffffff; font-family: Arial,x-locale-body,sans-serif; font-size: 1rem; letter-spacing: -0.00278rem;"></span><span style="background-color: #ffffff; font-family: Arial,x-locale-body,sans-serif; font-size: 1rem; letter-spacing: -0.00278rem;">返回 'border-top'。</span></p>
<p>因为我们想在最终的替换中进一步转变匹配结果,所以我们必须使用一个函数。这迫使我们在使用<a href="Reference/Global_Objects/String/toLowerCase" title="toLowerCase() 会将调用该方法的字符串值转为小写形式,并返回。"><code>toLowerCase()</code></a>方法前进行评估。如果我们尝试不用一个函数进行匹配,那么使用<a href="Reference/Global_Objects/String/toLowerCase" title="toLowerCase() 会将调用该方法的字符串值转为小写形式,并返回。"><code>toLowerCase()</code></a> 方法将不会有效。</p>
<pre class="brush: js">var newString = propertyName.replace(/[A-Z]/g, '-' + '$&amp;'.toLowerCase()); // won't work
</pre>
<pre><code class="language-javascript">var newString = propertyName.replace(/[A-Z]/g, '-' + '$&amp;'.toLowerCase()); // won't work
</code></pre>
<p>这是因为 <code>'$&amp;'.toLowerCase()</code> 会先被解析成字符串字面量(这会导致相同的'$&amp;')而不是当作一个模式。</p>
<h3 id="将华氏温度转换为对等的摄氏温度">将华氏温度转换为对等的摄氏温度</h3>
<p>下面的例子演示如何将华氏温度转换为对等的摄氏温度。华氏温度用一个数字加一个"F"来表示,这个函数将返回一个数字加"C"来表示的摄氏温度。例如,如果输入是 212F这个函数将返回 100C。如果输入的数字是 0F这个方法将返回 "-17.77777777777778C"。</p>
<p>正则表达式test检查任何数字是否以 F 结尾。华氏温度通过第二个参数p1进入函数。这个函数基于华氏温度作为字符串传递给f2c函数设置成摄氏温度。然后f2c()返回摄氏温度。这个函数与Perl的 s///e 标志相似。</p>
<pre class="brush: js">function f2c(x)
<pre><code class="language-javascript">function f2c(x)
{
function convert(str, p1, offset, s)
{
@@ -152,7 +152,7 @@ console.log(newstr);
var test = /(\d+(?:\.\d*)?)F\b/g;
return s.replace(test, convert);
}
</pre>
</code></pre>
<h3 id="使用行内函数和正则来避免循环">使用行内函数和正则来避免循环</h3>
<p>下例把某种模式的字符串转换为一个对象数组(其元素为对象)。</p>
<p><strong>输入:</strong><br/>
@@ -164,24 +164,24 @@ console.log(newstr);
-xxx-xx-x-
_x_x___x___x___
</pre>
</code></pre>
<p><strong>输出:</strong></p>
<p>一个数组对象。'x' 产生一个 'on' 状态,'-'(连接符)产生一个 'off' 状态,而 '_' (下划线)表示 'on' 状态的长度。</p>
<pre class="brush: js">[
<pre><code class="language-javascript">[
{ on: true, length: 1 },
{ on: false, length: 1 },
{ on: true, length: 2 }
...
]</pre>
]</code></pre>
<p>代码片段:</p>
<pre class="brush: js">var str = 'x-x_';
<pre><code class="language-javascript">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 }); }
});
console.log(retArr);</pre>
console.log(retArr);</code></pre>
<p>该代码片段生成了一个数组,包含三个期望格式的对象,避免了使用 for 循环语句。</p>
<h2 id="规范">规范</h2>
<table class="standard-table">