1.1 正则表达式的用途

- · - ·

• 玩转正则表达式
• 文件搜索
• 表单
• 爬虫
• 编译器

无论是前端开发、后端开发、文档工程师、作家、UP 主，只要是需要和文本打交道的，都或多或少可以用到正则表达式。

当然，可以使用正则表达式的大部分场景如果不想用正则表达式也是可以完成相同任务的，但使用正则表达式可以把做同样事情的效率提高几倍甚至几十上百倍。

正则表达式是和文本相关的，那正则表达式究竟可以干什么呢？看下面几个例子。

1.1.1 搜索文件内容

试想一下这样一个场景：你负责的项目出现了问题，你现在需要在一个 1G 的日志文件里面查找用户 IP 和某个场景值，但又不能存在 success 等成功的标记。 你会怎么查找？

1. 把所有用户 IP 所在的行查找出来
2. 在结果里面搜索场景值
3. 搜索 success 等成功标记所在的行查找出来
4. 把带有成功标记的行删除

这样做当然是可以的，但如果使用正则表达式，只需要搜索一次就可以把带有用户 IP、场景值且不带成功标记的行查找出来。

假设 ip 为 100.100.100.100 的用户在场景为/shop/order/payment/的地方出现了错误，可以使用下面的正则表达式搜索日志内容。

^(?!success).*?100\.100\.100\.100.*?\/shop\/order\/payment\/.*?$

这里使用了环视，我们后面会讲到。

1.1.2 校验表单合法性

校验表单合法性是一个非常常见的操作，在任何有用户提交表单的地方都需要在前端和后端校验用户输入数据的合法性。 比如下面这个表单，就是使用正则表达式校验的用户输入。

点击"提交"按钮可以触发表单的校验，若输入的手机号不是以 1 开头的 11 位数字或邮箱不包含@符号，表单会有提示。

实时编辑器

<form onSubmit={(e) => (e.preventDefault(), alert("格式正确"))}> <div> <label form="regexFormDemoPhone">请输入手机号：</label> <input placeholder="请输入手机号" id="regexFormDemoPhone" type="tel" pattern="^1\\d{10}$" required /> </div> <div> <label form="regexFormDemoEmail">请输入邮箱：</label> <input placeholder="请输入邮箱" id="regexFormDemoEmail" type="text" pattern=".*?@.*?" required /> </div> <div> <button type="submit">提交</button> </div> </form>

<form onSubmit={(e) => (e.preventDefault(), alert("格式正确"))}>
  <div>
    <label form="regexFormDemoPhone">请输入手机号：</label>
    <input
      placeholder="请输入手机号"
      id="regexFormDemoPhone"
      type="tel"
      pattern="^1\\d{10}$"
      required
    />
  </div>
  <div>
    <label form="regexFormDemoEmail">请输入邮箱：</label>
    <input
      placeholder="请输入邮箱"
      id="regexFormDemoEmail"
      type="text"
      pattern=".*?@.*?"
      required
    />
  </div>
  <div>
    <button type="submit">提交</button>
  </div>
</form>

结果

Loading...

1.1.3 搜索并替换内容

使用正则表达式搜索替换内容可以不限于搜索替换某个词，而是可以替换符合条件的一行或一段。

比如：有一段从网上下载的代码，里面包含了非常多的注释，你不希望把注释提交到自己的项目里面。使用下面的正则表达式把匹配到的结果替换为空字符串，就可以一键把所有注释去除。

正则表达式替换全局(g)忽略大小写(i)点匹配换行符(s)Unicode(u)分行(m)

(// .*)|(/\*(\s|.)*?\*/)

源文本纯文本JavascriptJavascript+ReactTypescriptTypescript+ReactHTMLXMLCSSMarkdownJSON正则表达式

// Hash计算工具
export const Hash = {
	/**
	 * 计算文本的SM3
	 * @param input 要计算SM3的文本
	 * @returns 16进制SM3值文本
	 */
	async sm3(input: string): Promise<string> {
		// 动态加载sm3计算库，在不使用时不加载
		const func = (await import("sm3")).default;
		return func(input);
	},
};

要替换为

结果 (1)在工具中查看

export const Hash = {
	
	async sm3(input: string): Promise<string> {
		
		const func = (await import("sm3")).default;
		return func(input);
	},
};

1.1.4 网络爬虫

网络爬虫其实并不是完全使用正则表达式，更多是使用 dom 解析。这里只讨论使用正则表达式的场景

网络爬虫其实也是搜索文件内容。爬虫程序从需要爬取的网站上把 html 下载下来，然后使用正则表达式分析截取需要的内容。下面是一个使用正则表达式匹配出 html 中所有 a 标签的例子。

正则表达式替换全局(g)忽略大小写(i)点匹配换行符(s)Unicode(u)分行(m)

<a.*?href=['"](?<link>.*?)['"]>(?<content>.*?)</a>

匹配文本 (12)在工具中查看

<div>
    <ul class="cool-row" monkey="row0">
        <!-- 各种视频 -->
        <li class="site-item first"><a href="http://v.hao123.baidu.com/">视频</a></li>
        <li class="site-item">
            <div class="inline-block-wrapper"><a class="sitelink icon-site" href="https://haokan.baidu.com/"
                    data-title="好看视频">好看视频</a></div>
        </li>
        <li class="site-item">
            <div class="inline-block-wrapper"><a class="sitelink icon-site" href="http://www.iqiyi.com/"
                    data-title="爱奇艺高清">爱奇艺高清</a></div>
        </li>
        <li class="site-item">
            <div class="inline-block-wrapper"><a class="sitelink icon-site" href="http://v.qq.com/"
                    data-title="腾讯视频">腾讯视频</a></div>
        </li>
        <li class="site-item">
            <div class="inline-block-wrapper"><a class="sitelink icon-site" href="https://live.baidu.com/?source=hao123"
                    data-title="百度直播">百度直播</a></div>
        </li>
        <li class="site-item">
            <div class="inline-block-wrapper"><a class="sitelink icon-site" href="http://www.youku.com/"
                    data-title="优酷网">优酷网</a></div>
        </li>
        <li class="site-item">
            <div class="inline-block-wrapper"><a class="sitelink icon-site" href="http://www.mgtv.com/"
                    data-title="芒果TV">芒果TV</a></div>
        </li>
        <li class="site-item">
            <div class="inline-block-wrapper"><a class="sitelink icon-site" href="http://v.baidu.com/"
                    data-title="百度视频">百度视频</a></div>
        </li>
        <li class="site-item">
            <div class="inline-block-wrapper"><a class="sitelink icon-site" href="https://tv.sohu.com/"
                    data-title="搜狐视频">搜狐视频</a></div>
        </li>
        <li class="site-item">
            <div class="inline-block-wrapper"><a class="sitelink icon-site" href="http://v.hao123.baidu.com/dianying"
                    data-title="最新影视">最新影视</a></div>
        </li>
        <li class="site-item">
            <div class="inline-block-wrapper"><a class="sitelink icon-site" href="https://quanmin.baidu.com/"
                    data-title="全民小视频">全民小视频</a></div>
        </li>
        <li class="site-item last" monkey="more"><a href="http://v.hao123.baidu.com/">更多>></a></li>
    </ul>
</div>

1.1.5 编译器词法解析

计算机是怎么知道你写的代码是什么意思的？靠的就是编译器或解释器把我们写的代码翻译成 CPU 能懂的二进制码。这样程序才能在 cpu 里面执行。

编译器或解释器又是怎么把代码翻译成二进制码的呢？

图1.1.1

编译流程

这就要靠词法分析了。大部分词法分析是使用正则表达式的功劳。编译器加载代码以后词法分析器根据特定的规则把使用正则表达式把代码里面的关键字、标识符、特殊符号等提取出来。

提取出关键字、标识符、特殊符号等以后会交给语法分析器，然后再进行语义分析，生成中间代码，生成目标代码，汇编为机器中语言，这样 CPU 才能"理解"我的的代码。

---

下一节我们将了解如果在各个文本工具和编程语言里面使用正则表达式。