从最简单常用的正则开始说起

正则？怎么写？

1、定义

我们先看一下MDN里面对他的定义：正则表达式是用于匹配字符串中字符组合的模式。

通俗的话将是用来匹配一段文本字符串里面的我们需要的内容。

用处：

• 我们或者用来判断是否字符串是否包含某一段特定的字符串。例如：判断“1111111111111122”这段字符串里面是否有‘3’这个数字。
• 又或者获取字符串里面我们想要的内容。比如我们经常可以听到的爬虫。我们将一个网页的html代码爬了下来。想要获取里面的图片链接后将图片下下来。我们就可以写一段图片链接的正则将图片链接获取到。

2、使用

上面说了点概念呢的内容：我们开始将实际我们应用的到的正则怎么写。先看一个简单的。

手机号码

/^1\d{10}$/

解释：

• 两侧的 / 是javascript对于正则的直接写法，也可以使用构造函数进行书写：new RegExp("^1\d{10}$") 同样的效果。
• ^1代表的的意思是以1开头（手机号码）。^这个符号作为正则中很常见的符号，匹配后面的字符作为匹配模板的开始，简单的意思可以看例子^1意思是以1 为开头的字符，我们常常把他和美元符号$（匹配字符的结束）一起记容易记。
• \d 的意思是匹配数字
• {10} 的意思是匹配这个{10}前面的字符10次，{n}这里的n是次数。\d与${10}搭配起来的意思是是匹配10个数字
• $ 匹配字符的结束
• 现在通读整个正则的意思是匹配一个1为开通（^1）10个数字结尾（\d${10}）的字符串。所以就匹配出手机号码了（ps: 由于手机号码的段号经常改变，笔者一般都是匹配1开头，长度为11的数字，容错性有保障）。
• 完。

Http链接

 /^http(s?):\/\//

解释：匹配以http://或https://开头的字符串。也可以直接String.startsWith('http')来判断是否为网络链接.

从Httpl链接上面取参数

假设参数名为params则

/(^|[&?])params=([^#&/]*)([&/]|$)/

使用js获取参数名：

/** 获得地址栏上面的参数 */
function GetQueryString(name) {
  const reg = new RegExp('[&?]' + name + '=([^#&/]*)[&/]')
  const r = url.match(reg)
  if (r != null) return r[1]
  return ''
}

图片链接

/<img[^>]* src=["']([^"']+)["'][^>]*>/g

解释：

• 作用：捕获富文本里面的图片tag里面的图片链接。
• 项目数据库迁移有时候要替换富文本里面的图片链接，这个时候可以捕获img里面的src属性来进行替换。
• [^>]*，这里的意思，匹配0~多个不是”>“的字符。因为img与src可能插入其他属性，类似class，style等属性。
• ["']，富文本的图片链接可能使用的是双引号也有可能单引号，所以要做一下兼容。
• 使用: 1、查找：str.matchAll(regex) => 查询迭代器，可用for...of展开。
• tips: 假如要捕获alt的值可以同理如下的正则：

   /<img[^>]* src=["']([^"']+)["'][^>]* alt=["']([^"']+)["'][^>]*>/g