JS正则表达式学习笔记2

Ajian 发布于2019-08-26 10:12 / 2160人阅读

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

第二阶段

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

这部分学习的内容包括：

分组

断言

匹配模式（贪婪和懒惰）

分组

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

// 匹配字母和数字连续出现三次的字符
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]?dd?).){3}2[0-4]d|25[0-5]|[0-1]?dd?/;
// 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的位置

DEMO

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

// ?<=exp
let reg = /(?<=re)w+/; 
// 匹配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

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

练习题

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

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

匹配正确的电话

匹配正确的邮件

匹配IP地址(IPV4)

匹配URL

匹配身份证号码（身份证有18位，最后一位可以是字符X）

匹配整数

匹配小数

匹配中文

匹配xxxx-xx-xx格式的日期（或者xxxx/xx/xx）

去掉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"
];

获取 url 中的参数

const _url = "http://img.host.com/images/fds.jpg?name=mmcai&age=28"

字符串中小写数值替换为大写

//给定字符串
const str = "958317640";
//期望结果
const newStr = "九五八三一七六四零"

把数字用科学计数法表达10000000000 变为10.000.000.000

给一个连字符串例如：get-element-by-id转化成驼峰形式

分割数字每三个以一个逗号划分

匹配固定电话000-12345678

匹配以下字符串当中的数值字符，并输出数组

//原字符串
const str = "d3gfhf72gh254bhku289fgdhdy675gfh"

// 期望得到的结果
const result = [3,72,254,289,675];

校验密码——只能输入6-20位字母、数字、下划线

匹配汉字

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

参考资料：

http://deerchao.net/tutorials...

https://www.imooc.com/video/1...

云服务器 GPU云服务器座机正则表达式 js js域名正则表达式 js类型正则表达式 js网址正则表达式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105776.html

js正则表达式学习笔记

摘要：说来惭愧，做前端快三年对于正则表达式的应用还是很浅薄，大家都知道正则的速度基本上是最快的，但就是懒得去记那些语法和规则，这次项目中多次用到了需要匹配替换的动作，终于下定决心去研究一下了。说来惭愧，做前端快三年对于正则表达式的应用还是很浅薄，大家都知道正则的速度基本上是最快的，但就是懒得去记那些语法和规则，这次项目中多次用到了需要匹配替换的动作，终于下定决心去研究一下了。实例化正则对...

Towers 2019-08-20 15:28 评论0 收藏0
js正则表达式学习笔记

摘要：分组小括号功能较多有三种功能，作用一，把单独的项组合成子表达式。作用三，允许后面引用前面的表达式。如果这时的正则表达式是一个非全局的，那么和正则表达式方法拿到的结果相同。，也可以接受一个正则表达式作为参数。正则表达式创建字面量创建，a = /abc/gim;构造函数创建，a = new RegExp(abc,gim)正则表达式中的特殊字符，[...] 方括号中的任意字符[^...] ...

superPershing 2019-08-23 12:48 评论0 收藏0
JS正则表达式学习笔记1

摘要：正则表达式作为前端学习的一个知识点，是每个合格的前端开发都应该掌握它的用法。元字符一般情况下，正则表达式的一个字符对应字符串的一个字符。正则表达式作为前端学习的一个知识点，是每个合格的前端开发都应该掌握它的用法。正则表达式的学习确实不难，语法和应用也非常简单，能够快速入门，很轻松的就能写出简单的表达式来对字符串执行某些操作。网上也有标题党说一杯咖啡的时间就能学会。能学会吗？能！但要真...

wangdai 2019-08-26 10:12 评论0 收藏0