乐趣区

JS正则表达式学习笔记2

jiezi

第二阶段

该部分内容是学习正则的第二篇内容，点击第一部分查看第一部分的内容。

这部分学习的内容包括：

  1. 分组
  2. 断言
  3. 匹配模式（贪婪和懒惰）

分组

我们可以通过量词匹配一个字符多次，但是如果我们想要匹配多个字符多次，就需要用到分组，比如下面一个例子

// 匹配字母和数字连续出现三次的字符
let str = "a1b2c3d4";
let reg = /([a-z]\d){3}/

str.replace(reg,"x");

// 通过分组重新排列字符
let str = "2019-09-10";
let reg = /^(\d{4})-(\d{2})-(\d{2})/
str.replace(reg,"$2/$3/$1")
// result "09/10/2019"

// 匹配 IP v4 的地址
let reg = /^((2[0-4]\d|25[0-5]|[0-1]?\d\d?)\.){3}2[0-4]\d|25[0-5]|[0-1]?\d\d?/;
// IP 地址的格式是 xxx.xxx.xxx.xxx 3 个数字一个点的四位字符，匹配 3 次，加上三位字符，组合就是 ip 地址
// 我们通过分组，把分组内容匹配三次

// 可以在正则中通过反向引用匹配分组的内容
let reg = /(\w{3}) is \1/;  

reg.test('kid is kid') // true
reg.test('dik is dik') // true
reg.test('kid is dik') // false
reg.test('dik is kid') // false

//\1 反向引用的内容和分组内容是一样的

特点

  • 用 () 括起来的匹配正则
  • 1 表示反向引用，引用第一个子表达式的内容
  • 2 表示反向引用，引用第二个子表达式的内容
  • $0 匹配整个字符串
  • $1 匹配到的第一个分组的内容
  • $2 匹配到的第二个分组的内容

断言

断言有点像 ^ $ b 那样用于指定一个位置，这个位置应该满足一定的条件（即断言）。通常使用断言用来查找某些内容之前或之后的东西（不包括他们本身）；

代码 说明
?=exp 匹配 exp 前面的位置
?<=exp 匹配 exp 后面的位置
?!exp 匹配后面跟的不是 exp 的位置
?<!exp 匹配前面不是 exp 的位置

DEMO

// ?=exp
let reg = /\b\w+(?=ing\b)/
let str = I'm singing while you're dancing.
// 匹配以 ing 结尾单词的前面部分

// ?<=exp
let reg = /(?<=\bre)\w+\b/; 
// 匹配 re 开头单词的后半部分
let str = reading a book;

匹配模式

  • 贪婪模式
  • 懒惰模式

当正则表达式中包含能接受重复的限定词时，通常的行为是匹配 尽可能多 的字符。比如以下：

let reg = /a*b/;
let str = "aabab";
let result = str.replace(reg,"X");
// 以上 str 字符串会被全部替换为一个字符 X。这被称为贪婪匹配模式
// result = "X";

但有时候，我们希望匹配尽可能少的字符。只需要在量词限定符的后面再加上一个问号? 就行。

let reg = /a*?b/;
let str = "aabab";
let result = str.replace(reg,"X");
// 以上 str 字符串会被全部替换为一个字符 X。这被称为贪婪匹配模式
// result = "Xab";
代码 说明
*? row 1 col 2
+? row 2 col 2
?? row 2 col 2
{n,m}? row 2 col 2
+? row 2 col 2
+? row 2 col 2

多思考，多练习，然后校验结果，反复这个过程，在这个过程当中就会一点一点的进步的。

练习题

首先下载一个正则表达式测试工具：地址

我们的练习都可以使用这个工具来进行测试；

  1. 匹配正确的电话
  2. 匹配正确的邮件
  3. 匹配 IP 地址(IPV4)
  4. 匹配 URL
  5. 匹配身份证号码（身份证有 18 位，最后一位可以是字符 X）
  6. 匹配整数
  7. 匹配小数
  8. 匹配中文
  9. 匹配 xxxx-xx-xx 格式的日期（或者 xxxx/xx/xx）
  10. 去掉 http 协议的 jpg 文件的协议头
var imgs = [
      'http://img.host.com/images/fds.jpg',
    'https://img.host.com/images/fjlj.jpg',
    'http://img.host.com/images/djalsdf.png',
    'https://img.host.com/images/adsjfl.png',
    'http://img.host.com/image/jasdlf.jpg'
];
  1. 获取 url 中的参数
const _url = "http://img.host.com/images/fds.jpg?name=mmcai&age=28"
  1. 字符串中小写数值替换为大写
// 给定字符串
const str = '958317640';
// 期望结果
const newStr = "九五八三一七六四零"
  1. 把数字用科学计数法表达 10000000000 变为 10.000.000.000
  2. 给一个连字符串例如：get-element-by-id 转化成驼峰形式
  3. 分割数字每三个以一个逗号划分
  4. 匹配固定电话 000-12345678
  5. 匹配以下字符串当中的数值字符，并输出数组
// 原字符串
const str = "d3gfhf72gh254bhku289fgdhdy675gfh"

// 期望得到的结果
const result = [3,72,254,289,675];
  1. 校验密码——只能输入 6 -20 位字母、数字、下划线
  2. 匹配汉字

练习答案晚点给出，大家写完也可以百度查找哈，但结果不一定唯一，可以有好几种写法的，只要通过正则校验工具校验通过达到结果就可以哦~。

参考资料：

  • http://deerchao.net/tutorials…
  • https://www.imooc.com/video/1…
退出移动版