前端正则入门

本篇文章的主要目的是帮助入门正则,可以在碰到一些简单的正则场景时不必要再翻百度去找合适的正则,本文是基于菜鸟教程大纲的提炼和整理,有不理解的可以在菜鸟教程找到对应的详解奥,https://www.runoob.com/regexp/regexp-syntax.html gogogo ~~~

一、正则的基本概念、用途、适用场景

   正则是一个**公式**(直接的表现形式就是公式),这个公式可以适用在各种编程语言和文本处理工具中,如 JavaScript、Python、Java、Perl 等;它可以实现文本的**查找、替换、验证、提取**等功能。

二、正则中涉及到的元素(专业术语应该叫模式)

  • 字面值字符,只要包括大小写字母、数字(0-9)、空格等
  • 特殊字符:例如点号(.)、星号(*)、加号(+)、问号(?)、方括号([])、大括号({})等
  • 字符集:以[]包括起来的一组字符串集合
  • 元字符:例如\d,\w,\s等,用于匹配特定类型的字符
  • 量词:{1}{2,},{n,m}用于指定匹配的次数或范围
  • 边界符号:^、$、\b,\B,用于匹配字符串的开头、结尾、单词的边界

三、基本语法介绍

字符匹配

  • 普通字符:直接匹配所需字符。 /abc/ – 匹配字符串abc
  • 元字符:具有特殊含义的字符,如.、*、+、?、\等。 /+/ – 匹配符号+,
  • 字符类:用方括号[]表示,匹配方括号中的任意一个字符。/[abc]/ – 匹配abc中任意一个
  • 转义字符:用反斜线\跟在字符后面,表示匹配字符本身。
  • 预定义字符类:如\d(匹配数字)、\w(匹配字母数字下划线)等
// 声明正则语句 -- 匹配字符串hello
let reg = /hello/
let testStr1 = 'hello'
let testStr2 = 'word'
res.test(testStr1) // true
res.test(testStr2) // false

上述代码块我们先声明了一条正则语句(/hello/ ),用于匹配字符串hello,然后定义了两个字符串hello和word,然后使用正则语句的test方法,对两个字符串进行校验,发现testStr1的检测结果是true,testStr2的检测结果是false

reg.test(str) 是 JavaScript 中用于测试正则表达式是否匹配字符串的方法,该方法返回一个布尔值,如果字符串 str 中存在与正则表达式 reg 匹配的内容,则返回 true,否则返回 false。

重复匹配

  • *:匹配前一个元素零次或多次。
  • +:匹配前一个元素一次或多次。
  • ?:匹配前一个元素零次或一次。
  • {n}:匹配前一个元素恰好n次。
  • {n,}:匹配前一个元素至少n次。
  • {n,m}:匹配前一个元素至少n次,最多m次
// 匹配前一个元素零次或多次
let reg = /0+/
let testNum = 1000
// 匹配前一个元素3次
let reg = /0{3}/
let testNum = 1000

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

边界匹配

  • ^:匹配字符串的开头。
  • $:匹配字符串的结尾。
  • \b:匹配单词边界。
  • \B:匹配非单词边界。
let reg = /^abc$/
在使用\b去匹配单词的时候要注意,\b可以放在单词的前边或者后边,或者都加,但是是强匹配单词,要确保单词的前后是有空格作为单词的分界线才会匹配到,例如\bword\b,可以匹配字符串'hello word'中的word,但是匹配不到‘helloword’中的word,因为后者没有空格等可以区别单独单词的分割符。

分组和捕获

  • (abc):将 abc 作为一个整体进行匹配。
  • (abc|def):匹配 abc 或 def。
  • \1, \2:引用第一个和第二个捕获组的内容。
// 分组的使用
let str = 'https://www.baidu.com'
let reg = /([a-z]{5})/
以上正则将可以匹配到https和baidu两个符合条件的字符串
// 捕获的使用
const text = "Today is 2023-06-29";
const replacedText = text.replace(/(\d{4})-(\d{2})-(\d{2})/, "$2/$3/$1");
console.log(replacedText); // 输出:Today is 06/29/2023
通过正则提供的replace方法,可以使用分组捕获字符串中的2023、06、29三个字符串、然后使用$1、$2、$3分别代替,最后进行重组

修饰符

  • i(ignore):忽略大小写。
  • g(global):全局匹配,不仅返回第一个匹配项。
  • m(multiline):多行匹配,使 ^ 和 $ 可以匹配每一行的开头和结尾。
var str="Google runoob taobao runoob"; 
var n1=str.match(/runoob/);   // 查找第一次匹配项
var n2=str.match(/runoob/g);  // 查找所有匹配项

// 结果:
runoob
runoob,runoob

var str="Google runoob taobao RUNoob"; 
var n1=str.match(/runoob/g);   // 区分大小写
var n2=str.match(/runoob/gi);  // 不区分大小写

// 结果:
runoob
runoob,RUNoob
var str="runoobgoogle\ntaobao\nrunoobweibo";
var n1=str.match(/^runoob/g);   // 匹配一个
var n2=str.match(/^runoob/gm);  // 多行匹配

// 结果:
runoob
runoob,runoob
var str="google\nrunoob\ntaobao";
var st2="googlerunoobtaobao"
// 匹配google字段
var n1=str.match(/google/);   // 结果: google
 // 匹配google及之后的任意一个字符,不包含\n
var n2=str.match(/google./);   // 结果: 无效
// 匹配google及之后的任意一个字符
var n3=str2.match(/google./);    // 结果: googler
// 使用 s,匹配\n
var n4=str.match(/google./s);  // 结果: google

断言

(?=exp):正向肯定查找,匹配exp前面的位置。

话句话说:我要找一个字符串后边带着exp

let str = 'abcde'
let str2 = 'abcf'
let reg = /abc(?=de)/g
let res = str.match(reg)
let res1 = str2.match(reg)
console.log(res) -- abc 
console.log(res1) -- 无回显
(?!exp):正向否定查找,匹配不在exp前面的位置。

换句话说:我要找一个字符串后边不包含exp

例如"Windows(?!95|98|NT|2000)"能匹配"Windows3.1"中的"Windows",但不能匹配"Windows2000"中的"Windows"
(?<=exp):反向肯定查找,匹配exp后面的位置。

例如,“(?<=95|98|NT|2000)Windows"能匹配"2000Windows"中的"Windows”,但不能匹配"3.1Windows"中的"Windows"。

(?<!exp):反向否定查找,匹配不在exp后面的位置。

例如"(?<!95|98|NT|2000)Windows"能匹配"3.1Windows"中的"Windows",但不能匹配"2000Windows"中的"Windows"

四、正则提供的操作函数

exec() 方法

reg.exec(str):执行正则表达式 reg 在字符串 str 上的匹配操作,并返回一个数组或 null。
返回的数组第一个元素是匹配到的字符串,之后的元素是捕获分组匹配到的内容。
示例:const result = /\d+/.exec("123");,result[0] 包含匹配到的 "123"。

match() 方法

str.match(reg):在字符串 str 中查找与正则表达式 reg 匹配的部分,并返回一个数组或 null。
返回的数组包含所有匹配到的内容。
示例:const result = "Hello 123".match(/\d+/g);,result 包含匹配到的所有数字 ["123"]。

search() 方法

str.search(reg):在字符串 str 中搜索与正则表达式 reg 匹配的内容,并返回匹配到的第一个字符的位置。如果没有匹配到,则返回 -1。
示例:const index = "Hello 123".search(/\d+/);,index 是数字 "123" 在字符串中的位置。

replace() 方法:

str.replace(reg, replacement):将字符串 str 中与正则表达式 reg 匹配的内容替换为指定的 replacement。
返回一个替换后的新字符串。
示例:const newStr = "Hello 123".replace(/\d+/, "456");,newStr 是替换后的字符串 "Hello 456"。

有了这些基础,大家在看到一些常规的正则校验的时候直接可以手写一个,就不用去翻翻找找了,结束,overover

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值