正则表达式是什么，有哪些应用场景？

<h2>一、是什么</h2>
<p>正则表达式是一种用来匹配字符串的强有力的武器</p>
<p>它的设计思想是用一种描述性的语言定义一个规则，凡是符合规则的字符串，我们就认为它“匹配”了，否则，该字符串就是不合法的</p>
<p>在 <code>JavaScript</code>中，正则表达式也是对象，构建正则表达式有两种方式：</p>
<ol>
<li>字面量创建，其由包含在斜杠之间的模式组成</li>
</ol>
<pre><code class="language-js">const re = /\d+/g;</code></pre>
<ol start="2">
<li>调用<code>RegExp</code>对象的构造函数</li>
</ol>
<pre><code class="language-js">const re = new RegExp("\\d+","g");

// 交换名字和姓氏
console.log(str.replace(/(john) (smith)/i, '$2, $1')) // Smith, John</code></pre>
<h2>三、匹配方法</h2>
<p>正则表达式常被用于某些方法，我们可以分成两类：</p>
<ul>
<li>字符串（str）方法：<code>match</code>、<code>matchAll</code>、<code>search</code>、<code>replace</code>、<code>split</code></li>
<li>正则对象下（regexp）的方法：<code>test</code>、<code>exec</code></li>
</ul>
<table>
<thead>
<tr>
<th style="text-align: left;">方法</th>
<th style="text-align: left;">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">exec</td>
<td style="text-align: left;">一个在字符串中执行查找匹配的RegExp方法，它返回一个数组（未匹配到则返回 null）。</td>
</tr>
<tr>
<td style="text-align: left;">test</td>
<td style="text-align: left;">一个在字符串中测试是否匹配的RegExp方法，它返回 true 或 false。</td>
</tr>
<tr>
<td style="text-align: left;">match</td>
<td style="text-align: left;">一个在字符串中执行查找匹配的String方法，它返回一个数组，在未匹配到时会返回 null。</td>
</tr>
<tr>
<td style="text-align: left;">matchAll</td>
<td style="text-align: left;">一个在字符串中执行查找所有匹配的String方法，它返回一个迭代器（iterator）。</td>
</tr>
<tr>
<td style="text-align: left;">search</td>
<td style="text-align: left;">一个在字符串中测试匹配的String方法，它返回匹配到的位置索引，或者在失败时返回-1。</td>
</tr>
<tr>
<td style="text-align: left;">replace</td>
<td style="text-align: left;">一个在字符串中执行查找匹配的String方法，并且使用替换字符串替换掉匹配到的子字符串。</td>
</tr>
<tr>
<td style="text-align: left;">split</td>
<td style="text-align: left;">一个使用正则表达式或者一个固定字符串分隔一个字符串，并将分隔后的子字符串存储到数组中的 <code>String</code> 方法。</td>
</tr>
</tbody>
</table>
<h3>str.match(regexp)</h3>
<p><code>str.match(regexp)</code> 方法在字符串 <code>str</code> 中找到匹配 <code>regexp</code> 的字符</p>
<p>如果 <code>regexp</code> 不带有 <code>g</code> 标记，则它以数组的形式返回第一个匹配项，其中包含分组和属性 <code>index</code>（匹配项的位置）、<code>input</code>（输入字符串，等于 <code>str</code>）</p>
<pre><code class="language-js">let str = "I love JavaScript";

let result = str.match(/Java(Script)/);

console.log( result[0] );     // JavaScript（完全匹配）
console.log( result[1] );     // Script（第一个分组）
console.log( result.length ); // 2

// 其他信息：
console.log( result.index );  // 7（匹配位置）
console.log( result.input );  // I love JavaScript（源字符串）</code></pre>
<p>如果 <code>regexp</code> 带有 <code>g</code> 标记，则它将所有匹配项的数组作为字符串返回，而不包含分组和其他详细信息</p>
<pre><code class="language-js">let str = "I love JavaScript";

let result = str.match(/Java(Script)/g);

console.log( result[0] ); // JavaScript
console.log( result.length ); // 1</code></pre>
<p>如果没有匹配项，则无论是否带有标记 <code>g</code> ，都将返回 <code>null</code></p>
<pre><code class="language-js">let str = "I love JavaScript";

let result = str.match(/HTML/);

console.log(result); // null</code></pre>
<h3>str.matchAll(regexp)</h3>
<p>返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器</p>
<pre><code class="language-js">const regexp = /t(e)(st(\d?))/g;
const str = 'test1test2';

const array = [...str.matchAll(regexp)];

console.log(array[0]);
// expected output: Array ["test1", "e", "st1", "1"]

console.log(array[1]);
// expected output: Array ["test2", "e", "st2", "2"]</code></pre>
<h3>str.search(regexp)</h3>
<p>返回第一个匹配项的位置，如果未找到，则返回 <code>-1</code></p>
<pre><code class="language-js">let str = "A drop of ink may make a million think";

console.log( str.search( /ink/i ) ); // 10（第一个匹配位置）</code></pre>
<p>这里需要注意的是，<code>search</code> 仅查找第一个匹配项</p>
<h2>str.replace(regexp)</h2>
<p>替换与正则表达式匹配的子串，并返回替换后的字符串。在不设置全局匹配<code>g</code>的时候，只替换第一个匹配成功的字符串片段</p>
<pre><code class="language-js">const reg1=/javascript/i;
const reg2=/javascript/ig;
console.log('hello Javascript Javascript Javascript'.replace(reg1,'js'));
//hello js Javascript Javascript
console.log('hello Javascript Javascript Javascript'.replace(reg2,'js'));
//hello js js js</code></pre>
<h3>str.split(regexp)</h3>
<p>使用正则表达式（或子字符串）作为分隔符来分割字符串</p>
<pre><code class="language-js">console.log('12, 34, 56'.split(/,\s*/)) // 数组 ['12', '34', '56']</code></pre>
<h3>regexp.exec(str)</h3>
<p><code>regexp.exec(str)</code> 方法返回字符串 <code>str</code> 中的 <code>regexp</code> 匹配项，与以前的方法不同，它是在正则表达式而不是字符串上调用的</p>
<p>根据正则表达式是否带有标志 <code>g</code>，它的行为有所不同</p>
<p>如果没有 <code>g</code>，那么 <code>regexp.exec(str)</code> 返回的第一个匹配与 <code>str.match(regexp)</code> 完全相同</p>
<p>如果有标记 <code>g</code>，调用 <code>regexp.exec(str)</code> 会返回第一个匹配项，并将紧随其后的位置保存在属性<code>regexp.lastIndex</code> 中。 下一次同样的调用会从位置 <code>regexp.lastIndex</code> 开始搜索，返回下一个匹配项，并将其后的位置保存在 <code>regexp.lastIndex</code> 中</p>
<pre><code class="language-js">let str = 'More about JavaScript at https://javascript.info';
let regexp = /javascript/ig;

let result;

while (result = regexp.exec(str)) {
  console.log( `Found ${result[0]} at position ${result.index}` );
  // Found JavaScript at position 11
  // Found javascript at position 33
}</code></pre>
<h3>regexp.test(str)</h3>
<p>查找匹配项，然后返回 <code>true/false</code> 表示是否存在</p>
<pre><code class="language-js">let str = "I love JavaScript";

// 这两个测试相同
console.log( /love/i.test(str) ); // true</code></pre>
<h2>四、应用场景</h2>
<p>通过上面的学习，我们对正则表达式有了一定的了解</p>
<p>下面再来看看正则表达式一些案例场景：</p>
<p>验证QQ合法性（5~15位、全是数字、不以0开头）：</p>
<pre><code class="language-js">const reg = /^[1-9][0-9]{4,14}$/
const isvalid = patrn.exec(s)</code></pre>
<p>校验用户账号合法性（只能输入5-20个以字母开头、可带数字、“_”、“.”的字串）：</p>
<pre><code class="language-js">var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
const isvalid = patrn.exec(s)</code></pre>
<p>将<code>url</code>参数解析为对象</p>
<pre><code class="language-js">const protocol = '(?&lt;protocol&gt;https?:)';
const host = '(?&lt;host&gt;(?&lt;hostname&gt;[^/#?:]+)(?::(?&lt;port&gt;\\d+))?)';
const path = '(?&lt;pathname&gt;(?:\\/[^/#?]+)*\\/?)';
const search = '(?&lt;search&gt;(?:\\?[^#]*)?)';
const hash = '(?&lt;hash&gt;(?:#.*)?)';
const reg = new RegExp(`^${protocol}\/\/${host}${path}${search}${hash}$`);
function execURL(url){
    const result = reg.exec(url);
    if(result){
        result.groups.port = result.groups.port || '';
        return result.groups;
    }
    return {
        protocol:'',host:'',hostname:'',port:'',
        pathname:'',search:'',hash:'',
    };
}

console.log(execURL('https://localhost:8080/?a=b#xxxx'));
protocol: "https:"
host: "localhost:8080"
hostname: "localhost"
port: "8080"
pathname: "/"
search: "?a=b"
hash: "#xxxx"</code></pre>
<p>再将上面的<code>search</code>和<code>hash</code>进行解析</p>
<pre><code class="language-js">function execUrlParams(str){
    str = str.replace(/^[#?&amp;]/,'');
    const result = {};
    if(!str){ //如果正则可能配到空字符串，极有可能造成死循环，判断很重要
        return result; 
    }
    const reg = /(?:^|&amp;)([^&amp;=]*)=?([^&amp;]*?)(?=&amp;|$)/y
    let exec = reg.exec(str);
    while(exec){
        result[exec[1]] = exec[2];
        exec = reg.exec(str);
    }
    return result;
}
console.log(execUrlParams('#'));// {}
console.log(execUrlParams('##'));//{'#':''}
console.log(execUrlParams('?q=3606&amp;src=srp')); //{q: "3606", src: "srp"}
console.log(execUrlParams('test=a=b=c&amp;&amp;==&amp;a='));//{test: "a=b=c", "": "=", a: ""}</code></pre>

DreamCoders / CoderGuide

Content Risk Flag

Comments (0)

DreamCoders / CoderGuide .gitee-modal { width: 500px !important; }

Content Risk Flag