前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版
  • JavaScript Part 1

    • Ajax总结篇
    • Canvas 绘制八大行星
    • DOM编程之API学习总结篇
    • JavaScript事件机制
    • JavaScript代码片段100个
    • JavaScript作用域分析总结
    • JavaScript原型链回顾
    • JavaScript及jQuery中的各种宽高属性图解
    • JavaScript工程项目的一系列最佳实践
    • JavaScript常用API合集
    • JavaScript数组、字符串、对象常用方法
    • JavaScript数组方法总结篇
    • JavaScript深浅拷贝
    • JavaScript运动框架之速度时间版本
    • JavaScript运行机制Event Loop
    • JavaScript防抖节流原理
    • Javascript中的复制粘贴功能
    • Javascript数组详解
    • OOP之原型与原型链
    • Object.defineProperty详解
    • V8源码浅析JS数组常见方法
    • await 在 forEach 中不生效解决方案
    • iframe+表单跨域提交POST请求
    • javascript笔记总结篇
    • 业务中处理数据结构常用的JS方法
    • 作用域
    • 你真的掌握变量和类型了吗
    • 前后端分离之数据Mock
    • 原型与原型链
    • 原生JS补给(上)
    • 如何写出一个惊艳面试官的深拷贝
    • 带你填一些JS容易出错的坑
    • 彻底弄懂 JavaScript 执行机制
    • 执行上下文 执行栈
    • 正则回顾总结
    • 正则基础知识
      • 正则基础知识
        • 第一章:基本概念
        • 第二章:创建正则表达式
          • 1.使用new来创建
          • 2.使用字面量
        • 第三章:正则表达式的测试
          • 1.test( )
          • 2.exec( )
        • 第四章:正则表达式的规则
          • 1.[ ]
          • 2. ^
          • 3. $
          • 4. .
          • 5. |
          • 6. ?
          • 7. *
          • 8. +
          • 9. {n}
          • 10. {n,}
          • 11. {n,m}
          • 第五章:基本的正则表达式验证
          • 第六章:方法
            • 1.search( )
            • 2.match( )
            • 3.replace( )
            • 4.split( )
    • 正则完整篇
    • 正则表达式
    • 浅析Promise原理
    • 浅谈JavaScript中的异步处理
    • 深拷贝 vs 浅拷贝
    • 聊一聊typeof instanceof 实现原理.
    • 聊一聊闭包
    • 高阶函数map reduce filter
  • JavaScript Part 2

  • CSS

  • HTML

  • Jquery

  • ES6

  • 小程序

  • Vue

  • React

  • 深入React

  • React Native

  • NodeJS

  • Angular

  • TypeScript

  • Webpack

  • 浏览器

  • 移动端

  • 前端工程化

  • Electron

  • HTTP

  • Nginx

  • Linux

  • 数据结构与算法

  • LeetCode算法题

  • 综合

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

正则基础知识|博客系列

# 正则基础知识

# 第一章:基本概念

概念:

正则表达式(regular expression)是一个描述字符模式的对象,ECMAScript的RegExp 类表示正则表达式,

而String和RegExp都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数。

正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具。

作用:

  1. 提高用户体验
  2. 减轻服务器的压力

# 第二章:创建正则表达式

# 1.使用new来创建

 var exp = new RegExp('box' , 'gi' );
@前端进阶之旅: 代码已经复制到剪贴板

第一个参数是字符串;

第二个参数可选模式修饰符

参数 含义
g 全局匹配
i 忽略大小写
m 多行匹配

# 2.使用字面量

var exp = /box/gi;
@前端进阶之旅: 代码已经复制到剪贴板

直接用2个 / ;

在俩个斜杠后加上模式修饰符;

俩种创建方式比较:

1.使用字面量方式创建用的更加广泛;

2.当要匹配的内容是变量时,只能使用new来创建.

# 第三章:正则表达式的测试

# 1.test( )

正则表达式对象.test(字符串)

  • 参数:要匹配的字符串
  • 返回值:匹配成功返回true,失败返回false
例1:
var exp = /Box/i;
var str = 'box' ;
alert(exp.test(str));
=>   true     忽略大小写 ;
@前端进阶之旅: 代码已经复制到剪贴板
例2:
var exp = /abc/g;
var str = 'abcab';
var res = exp.test(str);
console.log(res);
console.log(exp.test(str));
console.log(exp.test(str));
=>	 true		//从第一个开始匹配,匹配到了abc 返回true;	 
=>	 false		//由于开启了全局匹配,所以从上次匹配之后的位置开始匹配(也就是从第二个a开始);	若没有g 则每次都会从头开始匹配
=>	 true		//由于上次匹配是false并且已经将字符串str查找完了,所以又从头开始匹配
@前端进阶之旅: 代码已经复制到剪贴板

注:

开启了全局匹配g后,正则表达式内部有一个lastIndex的属性,用以记录下次开始查找的下标,保证其每次从lastIndex的位置开始查找
例3:
var exp = /abc/g;					//同一正则表达式匹配不同字符串
var str1 = 'abc';
var str2 = 'abcab';
console.log(exp.test(str1));
console.log(exp.test(str2));
=> 	 true;				//从str1的0位开始匹配,匹配到了abc,返回true,	此时lastIndex为3
=>	 false;				//从str2中lastIndex的位置开始匹配,也就是从第二个a开始
@前端进阶之旅: 代码已经复制到剪贴板
例4:
var exp1 = /abc/g;					//不同正则表达式匹配同一字符串
var exp2 = /abc/g;
var str = 'abc';
console.log(exp1.test(str));
console.log(exp2.test(str));
=> 	 true;				//从str1的0位开始匹配,匹配到了abc,返回true
=>	 true;				//从str1的0位开始匹配,返回true
@前端进阶之旅: 代码已经复制到剪贴板

# 2.exec( )

exec(字符串):该方法为专门为捕获组而设计的

  • 参数:要匹配的字符串
  • 返回值:返回的是一个数组。如果不匹配则返回null

关于返回值数组的说明:

  • 它确实是Array的实例。
  • 但是这个数组有两个额外的属性:index和 input
  • index:表示匹配的字符串在源字符串中的索引
  • input:表示匹配的源字符串。
  • 数组的第一项是与整个模式匹配的字符串,其他项是与模式中捕获组匹配的字符串
  • 如果没有捕获组,则数组中只有第一项。关于捕获组的概念以后再说
例1:
		var exp = /abc/gi;
        var str = "aaabcccdabcAbcAdaBc";
        var strNew = "";
        while (strNew=exp.exec(str)){			//使用while循环,将所有匹配到字符串输出来
            console.log(strNew[0])				//由于返回的是一个带有很多属性的数组,所以我们只要数组中的字符串,也就是索引为0.
        }
@前端进阶之旅: 代码已经复制到剪贴板

# 第四章:正则表达式的规则

字符类:单个字母数字下划线
.									//匹配除换行符外的任意字符(当点放在[]中是,没有特殊意义)
var exp = /\d/g;					// [0-9]
var exp = /\D/g;					//[^0-9]
var exp = /\w/g;					//[a-zA-Z0-9_];
var exp = /\W/g;					//[^a-zA-Z0-9_];
@前端进阶之旅: 代码已经复制到剪贴板
字符类:空白字符
\0                             匹配null 字符
\b                             匹配退格字符
\n                             匹配换行符
\r                             匹配回车字符
\t                             匹配制表符
\s                             匹配空白字符、空格、制表符和换行符
\S                             匹配非空白字符
@前端进阶之旅: 代码已经复制到剪贴板
元字符/元符号                    匹配情况
^                             行首匹配
$                             行尾匹配
@前端进阶之旅: 代码已经复制到剪贴板
字符类:重复字符
元字符/元符号                                匹配情况
?  例如(x?)                            匹配0个或1 个x
*  例如(x*)                            匹配0个或任意多个x
+  例如(x+)                            匹配至少一个x
(xyz)+                                     匹配至少一个(xyz)
{m,n} 例如x{m,n}  n>=次数>=m            匹配最少m个、最多n个x
{n}                                        匹配前一项n次     
{n,}                                    匹配前一项n次,或者多次
@前端进阶之旅: 代码已经复制到剪贴板

# 1.[ ]

匹配[ ]内的任意一个字符

var exp = /[abc]/gi;				// []内代表匹配其中的一个字符: a 或 b 或 c
@前端进阶之旅: 代码已经复制到剪贴板
var exp = /[a-zA-Z0-9_$]/g;			//匹配26个大小写字母,0-9数字,下划线_  美元符$ 中的任意一个;
@前端进阶之旅: 代码已经复制到剪贴板
var exp = /[^a-zA-Z]/g				//匹配任意不在括号中的字符集中的字符;
@前端进阶之旅: 代码已经复制到剪贴板

[ ]也可以配合? * + {} 来使用; 如[a-z]+ 匹配至少一个[a-z]范围内的任意一个;

# 2. ^

俩种用法:

1.放在[ ] 内 表示非

var exp = /[^a-zA-Z]/g				//匹配任意不在括号中的字符集中的字符;
@前端进阶之旅: 代码已经复制到剪贴板

2.放在[ ] 外,表示行首匹配

var exp = /^\d/g;					//规定行首必须是数字		
var str = '123qq';					
console.log(exp.test(str));			//行首为数字1,返回true;  
console.log(exp.lastIndex);			//此时lastIndex 为1
console.log(exp.test(str));			//从下标为1的位置开始匹配,虽然下标为1的位置是数字,但却不是行首,返回false;
@前端进阶之旅: 代码已经复制到剪贴板

# 3. $

表示行尾匹配,用法与^ 相近

^ 和 $ 合用

var exp = /^\d\d$/g;				//规定行首和行尾必须是数字
var str = '12';
var str2 = '123';
        console.log(exp.test(str));		// true
        console.log(exp.lastIndex);		// 2
        console.log(exp.test(str));		//false
        console.log(exp.lastIndex);		//0
        console.log(exp.test(str));		//true
        console.log(exp.test(str2));	//false		//exp中规定了行首行尾为数字,中间无内容
@前端进阶之旅: 代码已经复制到剪贴板

# 4. .

匹配除换行符外的任意字符(当点放在[ ]中是,没有特殊意义)

var exp = /./g;
var str = 'a';
console.log(exp.test(str));
=>    true
@前端进阶之旅: 代码已经复制到剪贴板

若想匹配它本身.

var exp = /\./g;
@前端进阶之旅: 代码已经复制到剪贴板

# 5. |

择一匹配(管道符号) 表示或

var exp = /a|b/g;
var str = 'a';
console.log(exp.test(str));
=>    true
@前端进阶之旅: 代码已经复制到剪贴板

数量词的匹配:默认都是贪婪匹配

# 6. ?

匹配0个或者1个

# 7. *

匹配0个或者多个

var exp = /a*/g;
var str = 'aaaaa';
	console.log(exp.test(str));			//true
	console.log(exp.test(str));			//true
@前端进阶之旅: 代码已经复制到剪贴板

# 8. +

匹配1个或多个

var exp = /a+/g;
var str = 'aaaaa';
	console.log(exp.test(str));			//true
	console.log(exp.test(str));			//false
@前端进阶之旅: 代码已经复制到剪贴板

# 9. {n}

匹配n个,只能是n个

# 10. {n,}

匹配至少n个

# 11. {n,m}

匹配至少n个,最多m个

# 第五章:基本的正则表达式验证

写一个正在表达式,判断手机号是否合法
var exp = /1[34578]\d{9}$/g;
var str = '13979318939';
	console.log(exp.test(str));
=> true
写一个正在表达式,判断邮箱是否合法
var exp = /^\w{3,15}@[\w-]+\.(com|cn|net|org|edu|com\.cn)$/gi;
var str = '133_d@cn.com.cn';
    console.log(exp.exec(str)[0]);
=>  133_d@cn.com.cn   
写一个正则表达式,判断图片的地址是否合法
var exp = /^(http|https):\/\/.+\.(jpg|jpeg|gif|png)$/gi;
var str = 'http://3323498dsfledf.png';
	console.log(exp.exec(str)[0]);
=>  http://3323498dsfledf.png
写一个正则表达式,爬取一堆字符串中的所有图片地址
var exp = /http:\/\/[^:]+\.(jpg|jpeg|gif|png)/gi;
写一个正则表达式,将字符串中的重复去掉
var exp = /(.)\1+/gi;
var str = "aabbccdd";	
	console.log(str.replace(exp,'$1'));
=>  abc  
@前端进阶之旅: 代码已经复制到剪贴板

# 第六章:方法

# 1.search( )

str.search(exp);

检索与正则表达式相匹配的第一个匹配项的索引。

返回值: 索引 ,没有返回-1;

注:search( )不支持全局,每次调用总是从0开始查找.加不加g都一样

# 2.match( )

str.match(exp);

把满足正则表达式的所有字符串一起返回

返回值: 数组 ,没有返回null;

← 正则回顾总结正则完整篇 →

fe
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片NEW
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 业务场景题真实业务问题与追问
  • 查漏补缺常见问题解析
  • AI 模拟面试NEW模拟真实面试 + 报告
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
    • AI 定制路线NEW按你的简历现排
    • AI 知识地图NEW串起全站知识点
  • 动态
    • AI 热点NEWAI 每日动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
AI 助手NEW
旧版
  • JavaScript Part 1

    • Ajax总结篇
    • Canvas 绘制八大行星
    • DOM编程之API学习总结篇
    • JavaScript事件机制
    • JavaScript代码片段100个
    • JavaScript作用域分析总结
    • JavaScript原型链回顾
    • JavaScript及jQuery中的各种宽高属性图解
    • JavaScript工程项目的一系列最佳实践
    • JavaScript常用API合集
    • JavaScript数组、字符串、对象常用方法
    • JavaScript数组方法总结篇
    • JavaScript深浅拷贝
    • JavaScript运动框架之速度时间版本
    • JavaScript运行机制Event Loop
    • JavaScript防抖节流原理
    • Javascript中的复制粘贴功能
    • Javascript数组详解
    • OOP之原型与原型链
    • Object.defineProperty详解
    • V8源码浅析JS数组常见方法
    • await 在 forEach 中不生效解决方案
    • iframe+表单跨域提交POST请求
    • javascript笔记总结篇
    • 业务中处理数据结构常用的JS方法
    • 作用域
    • 你真的掌握变量和类型了吗
    • 前后端分离之数据Mock
    • 原型与原型链
    • 原生JS补给(上)
    • 如何写出一个惊艳面试官的深拷贝
    • 带你填一些JS容易出错的坑
    • 彻底弄懂 JavaScript 执行机制
    • 执行上下文 执行栈
    • 正则回顾总结
    • 正则基础知识
      • 正则基础知识
        • 第一章:基本概念
        • 第二章:创建正则表达式
          • 1.使用new来创建
          • 2.使用字面量
        • 第三章:正则表达式的测试
          • 1.test( )
          • 2.exec( )
        • 第四章:正则表达式的规则
          • 1.[ ]
          • 2. ^
          • 3. $
          • 4. .
          • 5. |
          • 6. ?
          • 7. *
          • 8. +
          • 9. {n}
          • 10. {n,}
          • 11. {n,m}
          • 第五章:基本的正则表达式验证
          • 第六章:方法
            • 1.search( )
            • 2.match( )
            • 3.replace( )
            • 4.split( )
    • 正则完整篇
    • 正则表达式
    • 浅析Promise原理
    • 浅谈JavaScript中的异步处理
    • 深拷贝 vs 浅拷贝
    • 聊一聊typeof instanceof 实现原理.
    • 聊一聊闭包
    • 高阶函数map reduce filter
  • JavaScript Part 2

  • CSS

  • HTML

  • Jquery

  • ES6

  • 小程序

  • Vue

  • React

  • 深入React

  • React Native

  • NodeJS

  • Angular

  • TypeScript

  • Webpack

  • 浏览器

  • 移动端

  • 前端工程化

  • Electron

  • HTTP

  • Nginx

  • Linux

  • 数据结构与算法

  • LeetCode算法题

  • 综合