前端 js 经典:正则表达式

简介: 前端 js 经典:正则表达式

1. 作用

正则表达式的作用就是匹配一个字符串

打比方,假如你要判断一个 str 是不是等于 "abc", 可以通过 str == "abc" ? true : false 来判断,匹配返回 true,不匹配返回 false,那如果,要判断是否等于"abc"其中 "abc" 无论哪一个字母是大写都判断为匹配,返回 true,那要怎么处理,不可能写成,str == "abc" || str == "Abc" || str == "aBc" || ... 这样,就很繁琐了,这就需要用到正则表达式,"abc"大小写都匹配通过正则表达式判断为:/^(a|A)(b|B)(c|C)$/, 通过正则的test()方法,就可以满足需求了 /^(a|A)(b|B)(c|C)$/.test(str)

2. 定义

// ^: 以什么开始 $: 以什么结束
/^$/;

3. 方法

// demo
let reg = /^y[a-zA-Z0-9_]*coder$/;
let str = "yqcoder";
 
// 正则的方法
// 满足匹配返回true,否则false
reg.test(str); // true
// 返回匹配正则的值,否则返回null
reg.exec(str); // ['yqcoder', index: 0, input: 'yqcoder', groups: undefined]
 
// 字符串匹配正则方法
// 替换满足正则的字符串
str.replace(reg, "super"); // 'super'
// 返回匹配的值
str.match(reg); // ['yqcoder', index: 0, input: 'yqcoder', groups: undefined]

4. 正则字符

[0-9] or \d: 单个数字

\D : 非数字

\W : 非 0-9a-zA-Z

\S : 非空白字符

. : 非换行符\n 的所有字符

[a-zA-Z0-9_] 或 \w: 包括下划线在内的字母数字

\s: 空白字符(空格 ,制表符\t,换页符\f,换行符\n,回车符\r)

5. 次数

+                 : 至少1次

?                 : 可有可无

*                  : 0-无穷次

{x}               : 指定x次

{min, }         : 至少min次

{0, max}      : 最多max次

{min, max}  : min到max次

6. 需要转义的特殊字符

* . ? + ^ $ | \ / [ ] ( ) { }

7. 操作符

\t 制表符 ('\u0009')

\n 换行符 ('\u000A')

\r 回车符 ('\u000D')

\f 换页符 ('\u000C')

\a 响铃符 ('\u0007')

\e 转义符 ('\u001B')

8. 常用正则

// 正整数:人数,排名
/^\d+$/;
// 正浮点数:金额
/^\d+(\.\d+)?$/;
// 汉字
/^[\u4e00-\u9fa5]{0,}$/;
// 英文和数字
/^[A-Za-z0-9]+$/;
// 邮箱
/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
// 手机
/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
// 网址
/[a-zA-z]+://[^\s]*/
// 电话号码
/^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$/;
// 身份证号(15位、18位数字)
/^\d{15}|\d{18}$/;
// 密码(以字母开头,长度在6~18之间,只能包含字母、数字和下划线)
/^[a-zA-Z]\w{5,17}$/;


目录
相关文章
|
2天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
2天前
|
前端开发 JavaScript 数据处理
前端新手指南:如何解决JavaScript导出CSV文件不完整的问题
【6月更文挑战第4天】在JavaScript中处理CSV文件时,需要特别注意一些特殊字符,例如逗号、双引号、换行符等。这些字符可能会影响CSV文件的解析,导致数据错乱。
12 0
|
2天前
|
JavaScript 前端开发 网络协议
前端JS发起的请求能暂停吗?
在讨论前端JS发起的请求是否能暂停时,需要明确两个概念:什么状态可以被认为是“暂停”?以及什么是JS发起的请求?
57 1
前端JS发起的请求能暂停吗?
|
5天前
|
前端开发 JavaScript 安全
TypeScript作为一种静态类型的JavaScript超集,其强大的类型系统和面向对象编程特性为微前端架构的实现提供了有力的支持
【6月更文挑战第11天】微前端架构借助TypeScript提升开发效率和代码可靠性。 TypeScript提供类型安全,防止微前端间通信出错;智能提示和自动补全加速跨代码库开发;重构支持简化代码更新。通过定义公共接口确保一致性,用TypeScript编写微前端以保证质量。集成到构建流程确保顺利构建打包。在微前端场景中,TypeScript是强有力的语言选择。
23 2
|
10天前
|
Web App开发 资源调度 JavaScript
【保姆级】前端使用node.js基础教程
【6月更文挑战第3天】Node.js 是基于 Chrome V8 引擎的 JavaScript 运行环境,用于服务器端编程。常用命令包括:安装 Node.js,通过 `node -v` 查看版本;使用 npm(Node 包管理器)进行初始化、安装/卸载包、查看版本和更新;运行 `.js` 脚本;使用 `node inspect` 调试;借助 nodemon 实现自动重启;通过 `npm list` 管理包;
5 0
|
13天前
|
前端开发 JavaScript API
Vue.js:渐进式JavaScript框架-前端开发
Vue.js:渐进式JavaScript框架-前端开发
21 3
|
19天前
|
缓存 前端开发 JavaScript
基于JavaScript的前端性能优化技术探讨
基于JavaScript的前端性能优化技术探讨
29 1
|
22天前
|
JavaScript 前端开发 Java
前端知识点03(JS)
前端知识点概览:了解JS中的this指向,包括全局、函数、new、apply/call/bind及箭头函数的规则。理解script的async和defer属性对脚本加载和执行的影响。探讨setTimeout和setInterval的用法及其在性能上的考量。ES6与ES5的区别在于新语法特性,如let/const、箭头函数、模板字符串、模块化、类和继承等。此外,ES6还引入了Symbol、解构赋值、默认参数、Map/Set和Generator等功能。别忘了点赞和支持作者哦!
24 1
|
22天前
|
JavaScript 前端开发
前端面试02(JS)
本文是前端面试系列的第二篇,主要涵盖了JavaScript的基础知识,包括JS的组成(ECMAScript、DOM、BOM)、内置对象(如String、Array、Math、Date等)、数组操作方法、数据类型检测方法(typeof、instanceof、constructor、Object.prototype.toString.call)、闭包的概念及其特点、前端内存泄漏的原因和类型、事件委托的优势、基本数据类型与引用数据类型的差异、原型链的工作原理以及JS实现继承的多种方式(原型链、构造函数、组合继承等)。文章结尾鼓励读者点赞和支持作者。
12 1
|
23天前
|
JavaScript 前端开发 NoSQL
构建基于Node.js的全栈应用:从前端到后端的完整指南
【5月更文挑战第24天】本文是关于使用Node.js构建全栈应用的指南,涵盖前端(React或Vue)、后端(Node.js + Express)和数据库(MongoDB)的选型与实现。文章介绍了项目结构、前端组件化开发、后端API接口编写、前后端联调及部署上线的注意事项,帮助读者掌握全栈开发流程。