JS正则表达式

📖前言

JS正则表达式作为一种强大的字符串处理工具,它可以匹配特定的字符串模式,并进行相关的操作,如查找、替换、截取等。对于正则表达式我们不可能去死记硬背所有的,但是我们需要学习概念和语法,做到能够看懂正则表达式和编写简单的正则表达式实现字符的查找和检测即可。本文主要是简要概括JS正则表达式的基本知识点,希望能够对你们有所帮助,如果有什么需要改进的地方还请各位大佬指出🤞

🤺作者简介:前端新人小白

🏡博客首页:我的学习笔记

🧗‍♀️近期目标:深入学习三剑客


目录

⛳正则表达式

⛳应用场景

⛳语法

1.定义规则

2.查找 

3.替换

4.元字符

边界符 

量词

字符类 

5.修饰符


⛳正则表达式

用于匹配字符串中字符组合的模式。在JavaScript中 ,正则表达式也是对象。

通常用来查找、替换那些符合正则表达式的文本,许多语言都支持正则表达式。

⛳应用场景

1.表单验证(匹配

2.过滤敏感词(替换

3.字符串中提取我们想要的部分(提取

  var str = "内容!!!!截取字符串";
  str = str.match(/(\S*)截取字符串/)[1];
  alert(str); //内容!!!!

⛳语法

1.定义规则

const 变量名 = /表达式/

/  /是正则表达式字面量

2.查找 

判断是否符合规则的字符串:

1.test()方法 用来查看正则表达式于指定的字符串是否匹配,返回的是布尔型

//要检测的字符串
const str = '这里面是否有JavaScript'
//1.定义正则表达式,检测规则
const reg = /JavaScript/
//2.检测方法
console.log(reg.test(str)) //true 

2.exex()方法 在一个指定字符串中执行一个搜索匹配

//要检测的字符串
const str = '这里面是否有JavaScript'
//1.定义正则表达式,检测规则
const reg = /JavaScript/
//2.检测方法
console.log(reg.exec(str)) //返回数组

与test()方法不同的是返回结果

如果匹配成功,exec()方法返回的是一个数组,否则返回null

3.替换

//要监测的字符串
const str = '这里面是否有JavaScript'
//替换
str.replace(/JavaScript/,'前端') //true 

4.元字符

是一些具有特殊含义的字符,可以极大提高灵活性和强大的匹配功能

比如,英语36个字符用元字符表达:[a-z]

元字符分类

  • 边界符:表示位置,开头和结尾
  • 量词:表示重复次数
  • 字符类:比如 \d 表示0~9

下面为元字符分类👇👇👇

边界符 

用来提示字符所处的位置,主要有以下两个字符

边界符号说明
^

表示匹配行首的文本(以谁开始)

$表示匹配行尾的文本(以谁结束)

如果^和$在一起,表示必须是精确匹配。

//^ 开头
console.log(/^前端/.test('学好前端')) //false
console.log(/^前端/.test('前端要学好')) //true

//$ 结尾
console.log(/^前端$/.test('前端要学好')) //false
console.log(/^前端$/.test('前端前端')) //false
console.log(/^前端$/.test('前端')) //true

量词

设定某个模式出现的次数

量词说明
*重复零次或跟多次
+重复一次或更多次
重复零次或一次
{n}重复n次
{n,}重复n次或更多次
{n,m}重复n到m次

 以*为🌰,其他类似:

// 量词 * 类似 >=0 次
console.log(/^前$/.test('前')) //true
console.log(/^前*$/.test('')) //true
console.log(/^前*$/.test('前')) //true
console.log(/^前*$/.test('前前')) //true
console.log(/^前*$/.test('前端要学好')) //false

字符类 

(1)[ ]匹配字符集合

只要中括号里面的任意字符出现都返回为true

比如:

  • [a-z] 表示a到z 26个英文字母都可以
  • [a-zA-Z] 表示大小写都可以
  • [0-9] 表示0~9的数字都可以
console.log(/[abc]/.test('andy'))  // true
console.log(/[abc]/.test('baby'))  // true
console.log(/[abc]/.test('cry'))  // true
console.log(/[abc]/.test('die'))  // false

[ ]里面加上^取反符号

console.log(/[^abc]/.test('abc'))  // false
console.log(/[^abc]/.test('derf'))  // true

(2) . (点)代表匹配除换行符之外的任何单个字符(了解)

(3)预定义

指的是某些常见模式的简写模式

预定类说明
\d

匹配0-9之间的任一数字,相当于[0-9]

\D匹配0-9以外的字符,相当于[0-9]
\w匹配任意的字母、数字和下划线,相当于[A-Za-z0-9]
\W除所有字母、数字和下划线以外的字符,相当于[^A-Za-z0-9]
\s匹配空格(包括换行符、制表符、空格符等),相当于[\t\r\n\v\f]
\S匹配非空格的字符,相当于[^\t\r\n\v\f]

5.修饰符

约束正则执行的某些细节行为,如是否区分大小写、是否支持多行匹配等。

语法:

  • i是单词ignore的缩写,正则匹配时字母不区分大小写
  • g是单词global的缩写,匹配所有满足正则表达式的结果
console.log(/a/i.test('/a'))  // true
console.log(/a/i.test('/A'))  // true
  const str = 'java是一门编程语言,学完JAVA工资很高'
  const re = str.replace(/java|JAVA/, '前端')
  const res = str.replace(/java|JAVA/g, '前端')
  console.log(re)   //前端是一门编程语言,学完JAVA工资很高
  console.log(res)  //前端是一门编程语言,学完前端工资很高

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值