mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-12-15 23:37:25 +08:00
语法高亮,滚动条美化,设置页面调整
This commit is contained in:
@@ -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, '-' + '$&'.toLowerCase()); // won't work
|
||||
</pre>
|
||||
<pre><code class="language-javascript">var newString = propertyName.replace(/[A-Z]/g, '-' + '$&'.toLowerCase()); // won't work
|
||||
</code></pre>
|
||||
<p>这是因为 <code>'$&'.toLowerCase()</code> 会先被解析成字符串字面量(这会导致相同的'$&')而不是当作一个模式。</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">
|
||||
|
||||
Reference in New Issue
Block a user