十九、正则

最新推荐文章于 2022-06-19 14:21:35 发布

℡想定下来

最新推荐文章于 2022-06-19 14:21:35 发布

阅读量275

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45256247/article/details/107051557

版权

明确需求

明确：在实战工作中，经常需要验证用户输入的数据，最典型的场景登录注册

思考：判断输入框内容是都等于空（也就是用户是否输入非常简单）但是如何判断是否是邮箱手机号呢？

回答：uname != ‘’ 得通过正则
在这里插入图片描述

正则表达式简介

   - 正则表达式（Regular Expression 简称：RegExp）
   - 又成规则表达式，描述了匹配字符串的规则
   - 由我们自己来书写 “规则”，专门用来检测 字符串 是否符合 “规则” 使用的
   - 我们使用一些特殊的字符或者符号定义一个 “规则公式”，然后用我们定义好的 “规则公式” 去检       测字符串是不是合格

简单概括

概念：正则由用普通字符和特殊字符组成的字符串
作用：检测是否符合规定
留心：字符就是英文、数字、下划线， 字符串一堆字符集合

正则表达式的作用

对表单域项目(用户名、密码、邮箱、qq号码、手机等等)进行验证
内容替换、获取（购物车input输入购买商品数量去掉非数字）
网络爬虫（一个网站到另一个网站的页面上去获取对方的相关信息） node

创建正则对象

说明：创建正则表达式的方法有两种，分别叫：隐式创建（字面量）、直接实例化（构造函数）

说明：两种方式的构造函数都是RegExp

1、隐式创建
语法：修饰符 regexp = /正则表达式/可选修饰符

2、直接实例化
语法：修饰符 regexp = new RegExp(“正则表达式”, 可选参数)

3、参数说明

【必须】正则表达式：普通字符串、特殊字符

【可选】修饰符：i 不区分大小写、g 表示多行匹配全局匹配

RegExp对象方法

test

语法：正则对象.test（待校验的数据）
作用：判断数据是否匹配
返回：匹配 -true，不匹配 - false

<script>
// 下述古诗中是否含有“锄禾日当午”？
// “离离原上草，一岁一枯荣。
// 野火烧不尽，春风吹又生。
// 远芳侵古道，晴翠接荒城。
// 又送王孙去，萋萋满别情。”

// 1. 创建正则对象
let regexp = /锄禾日当午/     // 包含指定内容 返回 BOOL
// 2. 判断 result rs
let rs = regexp.test('离离原上草，一岁一枯荣。锄禾日当午，野火烧不尽，春风吹又生。远芳侵古道，晴翠接荒城。又送王孙去，萋萋满别情。')

console.log(rs)
</script>

在这里插入图片描述

exec

语法：正则对象.exec（待校验的数据）
作用：匹配符合条件的数据，举例获取字符串中所有数字
返回：成功 - 数组，失败 - null

// 1. 创建正则对象   g  global
let regexp = /js/g
// 2. 通过exec语法获取数据
// let rs = regexp.exec("js离离原上js草js，一岁一枯荣。野火烧不尽，春风吹又生js。远芳侵古道，js晴翠接荒城。又送王孙去，萋萋满别情。")

let str = "js离离原上js草js，一岁一枯荣。野火烧不尽，春风吹又生js。远芳侵古道，js晴翠接荒城。又送王孙去，萋萋满别情。"

// console.log(regexp.exec(str))  // js   0
// console.log(regexp.exec(str))  // js   6
// console.log(regexp.exec(str))  // js   9
// console.log(regexp.exec(str))  // js   29
// console.log(regexp.exec(str))  // js   38
// console.log(regexp.exec(str))  // 找不到 返回 null


// 发现：上面写麻烦
// 解决：循环
// 明确：不知道循环次数 用 while


// while (成立) {
while (temp = regexp.exec(str)) {  // 成立 5   最后一次 6  null、undefined、false、假   退出
    // 一直成
    console.log(temp)
}

在这里插入图片描述

正则表达式里面的符号

元字符

. ：匹配非换行的任意字符

\ ：转译符号，把有意义的符号转换成没有意义的字符，把没有意义的字符转换成有意义的符号
\s ：匹配空白字符（空格/制表符/…）
\S ：匹配非空白字符
\d ：匹配数字
\D ：匹配非数字
\w ：匹配数字字母下划线
\W ：匹配非数字字母下划线

\S ：匹配非空白字符

var reg = /\s/
var str = 'a b'
var str2 = 'ab'
console.log(reg.test(str)) // true
console.log(reg.test(str2)) // false

\d ：匹配数字

var reg = /\d/
var str = 'abc1'
var str2 = 'abc'
console.log(reg.test(str)) // true
console.log(reg.test(str2)) // false

\w ：匹配数字字母下划线

var reg = /\w/
var str = 'a1'
var str2 = '#@$'
console.log(reg.test(str)) // true
console.log(reg.test(str2)) // false

限定符

* ：前一个内容重复至少 0 次，也就是可以出现 0 ～正无穷 次
+ ：前一个内容重复至少 1 次，也就是可以出现 1 ～正无穷 次
? ：前一个内容重复 0 或者 1 次，也就是可以出现 0 ～ 1 次
{n} ：前一个内容重复 n 次，也就是必须出现 n 次
{n,} ：前一个内容至少出现 n 次，也就是出现 n ～正无穷 次
{n,m} ：前一个内容至少出现 n 次至多出现 m 次，也就是出现 n ～ m 次

* ：前一个内容重复至少 0 次，也就是可以出现 0 ～正无穷 次

// 下面正则表示验证数字出现 0 ～ 正无穷次都可以
var reg = /\d*/
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
console.log(reg.test(str)) // true
console.log(reg.test(str2)) // true
console.log(reg.test(str3)) // true

+ ：前一个内容重复至少 1 次，也就是可以出现 1 ～正无穷 次

// 下面正则表示验证数字出现 1 ～ 正无穷次都可以
var reg = /\d+/
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
console.log(reg.test(str)) // false
console.log(reg.test(str2)) // true
console.log(reg.test(str3)) // true

- ? ：前一个内容重复 0 或者 1 次，也就是可以出现 0 ～ 1 次

// 下面正则表示验证数字出现 0 ~ 1 次都可以
var reg = /\d?/
var str = 'abc'
var str2 = 'abc1'
console.log(reg.test(str)) // true
console.log(reg.test(str2)) // true

{n} ：前一个内容重复 n 次，也就是必须出现 n 次

// 下面正则表示验证数字必须出现 3 次
var reg = /\d{3}/
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
console.log(reg.test(str)) // false
console.log(reg.test(str2)) // false
console.log(reg.test(str3)) // true

{n,} ：前一个内容至少出现 n 次，也就是出现 n ～正无穷 次

// 下面正则表示验证数字出现 3 ～ 正无穷次
var reg = /\d{3,}/
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
var str4 = 'abcd1234567'
console.log(reg.test(str)) // false
console.log(reg.test(str2)) // false
console.log(reg.test(str3)) // true
console.log(reg.test(str4)) // true

{n,m} ：前一个内容至少出现 n 次至多出现 m 次，也就是出现 n ～ m 次

// 下面正则表示验证数字只能出现 3 ～ 5 次
var reg = /\d{3,5}/
var str = 'abc'
var str2 = 'abc1'
var str3 = 'abc123'
var str4 = 'abc12345'
console.log(reg.test(str)) // false
console.log(reg.test(str2)) // false
console.log(reg.test(str3)) // true
console.log(reg.test(str4)) // true

边界符

^ ：表示开头
$ ：表示结尾

边界符是限定字符串的开始和结束的

// 下面表示从开头到结尾只能有数字，并且出现 3 ～ 5 次
var reg = /^\d{3,5}$/
var str = 'abc'
var str2 = 'abc123'
var str3 = '1'
var str4 = '1234567'
var str5 = '123'
var str6 = '12345'
console.log(reg.test(str)) // false
console.log(reg.test(str2)) // false
console.log(reg.test(str3)) // false
console.log(reg.test(str4)) // false
console.log(reg.test(str5)) // true
console.log(reg.test(str6)) // true

特殊符号

() ：限定一组元素
[] ：字符集合，表示写在 [] 里面的任意一个都行
[^] ：反字符集合，表示写在 [^] 里面之外的任意一个都行
- ：范围，比如 a-z 表示从字母 a 到字母 z 都可以
| ：或，正则里面的或 a|b 表示字母 a 或者 b 都可以
\ 转义符（屏蔽符）将具有功能的符号进行转义，使他变成普通符号

现在我们就可以把若干符号组合在一起使用了

// 下面是一个简单的邮箱验证
// 非_$开头，任意字符出现至少6次，一个@符号，(163|126|qq|sina)中的任意一个，一个点，(com|cn|net)中的任意一个
var reg = /^[^_$].{6,}@(163|126|qq|sina)\.(com|cn|net)$/

标示/修饰符符

i ：表示忽略大小写
- 这个 i 是写在正则的最后面的
- /\w/i
- 就是在正则匹配的时候不去区分大小写
g ：表示全局匹配
- 这个 g 是写在正则的最后面的
- /\w/g
- 就是全局匹配字母数字下划线

综合练习

匹配检测是否是秋秋号，规则：5~11数字，首字母不能是0

let regexp = /^[1-9]\d{4,10}$/

匹配检测是否是手机号，规则：11数字，首字母不能是0

let regexp = /^1\d{10}$/

匹配网站账号是否合法，规则：账号由5~12个数字、字母下划线组成，首字母不能是数字

let regexp = /^[a-zA-Z_]\w{4, 11}$/

邮箱验证

//任意字符  6+
//@
//qq 163 126
//.
//com cn net


let regexp = /^.{6,}@(qq|163|126)\.(com|cn|net)$/

在这里插入图片描述

<input type="text">
<button id="btn1">检测是否是纯数字</button>
<button id="btn2">输出所有数字</button>


<script>
// 1. 获取btn2
let btn2 = document.querySelector('#btn2')
// 2. 绑定事件
btn2.addEventListener('click', function() {
    //  获取值
    let input = document.querySelector("input")
    //  通过正则取出所有数字
    let regexp = /\d/g
    //  输出
    while(temp = regexp.exec(input.value)) {
        console.log(temp)
    }
})



// 1. 获取btn
let btn1 = document.querySelector('#btn1')
// 2. 点击事件
btn1.addEventListener('click', function() {
    // 1. 获取
    let input = document.querySelector('input')
    // 2. 创建正则
    // let regexp = /^\d+$/
    let regexp = /^\d{1,}$/
    // 3. 检测
    if (regexp.test(input.value))
    {
        alert('是')
    } else {
        alert('不是')
    }
})
</script>

字符串对象(部分也可以正则去查找）

search（了解）

作用：获取字符串中指定内容的下标

语法：字符串.search（内容或正则）

返回：字符下标，找不到 -1

练习：

let str = 'abcdefg'

console.log(str.search('a')) // 0
console.log(str.search('b')) // 1
console.log(str.search('z')) // -1

console.log(str.indexOf('a')) // 0
console.log(str.indexOf('b')) // 1
console.log(str.indexOf('z')) // -1

console.log(str.search(/\d/)) // -1

let str2 = 'sdfads8f9'
console.log(str2.search(/\d/)) // 6

match
作用：获取字符串中匹配的字符

语法：字符串.match（内容或正则）

返回：正则不加g则相当于exec、加了修饰符g返回纯内容数组 !!!

练习：

<script>
let str = 'a1b2c3d4e5f6g'
// 匹配所有数字
let regexp = /\d/g
console.log(str.match(regexp))  //返回所有匹配的结果
</script>

replace***
作用：内容替换

语法：字符串.replace（旧数据或正则，新数据

返回：匹配后的数据，留心不写正则只能替换一个写了可以全部

练习：

<script>
let str = 'a1b2c3d4e5f6g'
// 去掉所有数字

// str = str.replace(1, '')
// console.log(str.replace(2, ''))

// 正则
console.log(str.replace(/\d/g, ''))

// 问：很多&nbsp;数据的&nbsp;说法水电&nbsp;费第三方
// 解：
let str2 = '很多&nbsp;数据的&nbsp;说法水电&nbsp;费第三方'
console.log(str2.replace(/&nbsp;/g, ' '))
console.log(str2.replace(/&nbsp;/g, '<span style="display:inline-block;margin-left:10px;"></span>'))
</script>

在这里插入图片描述

大总结

正则表达式概念

是什么：由普通字符和特殊字符组成的字符串
能干吗：1-数据验证（登录），2-数据替换（购物车），3-网络爬虫/采集

正则表达式对象语法

创建
var regexp = new RegExp(“正则表达式”, “修饰符”)
var regexp = /正则表达式/修饰符
调用
test 检测数据是否匹配 true false
exec 匹配正则数据数组 null

正则符号
初体验 /内容/ 含有锄禾日当午含有数字8
元字符（具有特殊含义的字符）检测是否有数字 /\d/
限定符（限定规则出现次数）检测是否含有n个数字 /\d{n}/

边界符（限制开头和限制结尾）检测是否完全匹配（1-个数，2-类型）手机、用户名、邮箱
特殊符号

元字符

\w 数字、英文、下划线
\W 非数字、英文、下划线
\d 数字
\D 非数字
\s 空格
\S 非空格
. 任意
\ 转义

限定符

至少1次 {1,}

任意次 {0,}
? 0~1 {0,1}

边界符
^
$

特殊符号
[内容]
[0-9a-zA-Z]
[^0-9a-zA-Z]

(a|b)$

多学一招：() 非常厉害内存里面会单独存
正则内：\数字
正则外：RegExp.$数字
替换中：字符串.replace(旧数据，’$1’)

字符串对象用正则

语法：字符串.match（正则或普通内容）
返回：正则加修改符g 则返回纯内容数组，否则和exec一样

语法：字符串.replace（正则或普通内容/g，新数据）购物车替换非数字

℡想定下来

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
十九、正则

明确需求明确：在实战工作中，经常需要验证用户输入的数据，最典型的场景登录注册思考：判断输入框内容是都等于空（也就是用户是否输入非常简单）但是如何判断是否是邮箱手机号呢？回答：uname != ‘’ 得通过正则正则表达式简介 - 正则表达式（Regular Expression 简称：RegExp） - 又成规则表达式，描述了匹配字符串的规则 - 由我们自己来书写 “规则”，专门用来检测字符串是否符合 “规则” 使用的 - 我们使用一些特殊的字符或者符号定义
复制链接

扫一扫