企业网站建设cms系统,广源建设集团有限公司网站,句容网页定制,东莞网站制作建设站在巨人的肩膀上 黑马程序员前端JavaScript入门到精通全套视频教程#xff0c;javascript核心进阶ES6语法、API、js高级等基础知识和实战教程 #xff08;十一#xff09;正则阶段案例
1. 正则表达式
1.1 介绍
正则表达式#xff08;Regular Expression#xff0…站在巨人的肩膀上 黑马程序员前端JavaScript入门到精通全套视频教程javascript核心进阶ES6语法、API、js高级等基础知识和实战教程 十一正则阶段案例
1. 正则表达式
1.1 介绍
正则表达式Regular Expression是用于匹配字符串中字符组合的模式。在 JavaScript 中正则表达式也是对象。通常用来查找、替换那些符合正则表达式的文本。正则表达式在 JavaScript 中的使用场景 例如验证表单用户名表单只能输入英文字母、数字或者下划线昵称输入框中可以输入中文(匹配) 比如用户名要求用户小写英文字母,数字,下划线或者短横线组成并且用户名长度为 3~16位: /^[a-z0-9_-]{3,16}$/ 过滤掉页面内容中的一些敏感词(替换)或从字符串中获取我们想要的特定部分(提取)等。
1.2 语法
JavaScript 中定义正则表达式的语法有两种我们先学习其中比较简单的方法 定义正则表达式语法 const 变量名 /表达式/其中 / / 是正则表达式字面量比如const reg /前端/判断是否有符合规则的字符串 test() 方法用来查看正则表达式与指定的字符串是否匹配语法regObj.test比如// 要检测的字符串
const str IT培训,前端开发培训,IT培训课程,web前端培训,Java培训,人工智能培训
// 1. 定义正则表达式检测规则
const reg /前端/
// 2. 检测方法
console.log(reg.test(str)) // true如果正则表达式与指定的字符串匹配返回true否则false 检索查找符合规则的字符串 exec() 方法在一个指定字符串中执行一个搜索匹配语法regObj.exec(被检测字符串)比如// 要检测的字符串
const str IT培训,前端开发培训,IT培训课程,web前端培训,Java培训,人工智能培训
// 1. 定义正则表达式检测规则
const reg /前端/
// 2. 检测方法
console.log(reg.exec(str)) // 返回的是数组
// [前端, index: 5, input: IT培训,前端开发培训,IT培训课程,web前端培训,Java培训,人工智能培训, groups: undefined]如果匹配成功exec()方法返回一个数组否则返回null
1.3 元字符
普通字符: 大多数的字符仅能够描述它们本身这些字符称作普通字符例如所有的字母和数字。也就是说普通字符只能够匹配字符串中与它们相同的字符。 元字符(特殊字符 是一些具有特殊含义的字符可以极大提高了灵活性和强大的匹配功能。比如规定用户只能输入英文26个英文字母普通字符的话 abcdefghijklm…但是换成元字符写法 [a-z] 参考文档 MDNhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions正则测试工具: http://tool.oschina.net/regex 为了方便记忆和学习我们对众多的元字符进行了分类 边界符表示位置开头和结尾必须用什么开头用什么结尾量词表示重复次数字符类比如 \d 表示 0~9
1.3.1 边界符 正则表达式中的边界符位置符用来提示字符所处的位置主要有两个字符 边界符说明^表示匹配行首的文本以谁开始$表示匹配行尾的文本以谁结束 如果 ^ 和 $ 在一起表示必须是精确匹配 例子 console.log(/哈/.test(哈)) // true
console.log(/二哈/.test(二哈)) // true
console.log(/二哈/.test(很二哈哈)) // true// ^ 开头
console.log(/^二哈/.test(很二哈哈)) // false
console.log(/^二哈/.test(二哈很傻)) // true// $ 结尾
console.log(/^二哈$/.test(二哈很傻)) // false
console.log(/^二哈$/.test(二哈二哈)) // false
console.log(/^二哈$/.test(二哈)) // true1.3.2 量词 量词用来设定某个模式出现的次数。 量词说明*重复零次或更多次重复一次或更多次?重复零次或一次{n}重复n次{n,}重复n次或更多次{n,m}重复n到m次 注意逗号左右两侧千万不要出现空格。 例子 // * 表示重复 0 次或者更多次
console.log(/^哈*$/.test()) // true
console.log(/^哈*$/.test(哈)) // true
console.log(/^哈*$/.test(哈哈哈)) // true// 表示重复 1 次或者更多次
console.log(/^哈$/.test()) // false
console.log(/^哈$/.test(哈)) // true
console.log(/^哈$/.test(哈哈哈)) // true// ? 表示重复 0 次或者 1 次
console.log(/^哈?$/.test()) // true
console.log(/^哈?$/.test(哈)) // true
console.log(/^哈?$/.test(哈哈哈)) // falseconsole.log(/^哈{2}$/.test()) // false
console.log(/^哈{2}$/.test(哈)) // false
console.log(/^哈{2}$/.test(哈哈)) // true
console.log(/^哈{2}$/.test(哈哈哈)) // falseconsole.log(/^哈{2,}$/.test()) // false
console.log(/^哈{2,}$/.test(哈)) // false
console.log(/^哈{2,}$/.test(哈哈)) // true
console.log(/^哈{2,}$/.test(哈哈哈)) // trueconsole.log(/^哈{2,4}$/.test()) // false
console.log(/^哈{2,4}$/.test(哈)) // false
console.log(/^哈{2,4}$/.test(哈哈)) // true
console.log(/^哈{2,4}$/.test(哈哈哈)) // true
console.log(/^哈{2,4}$/.test(哈哈哈哈)) // true
console.log(/^哈{2,4}$/.test(哈哈哈哈哈)) // false1.3.3 字符类
1.3.3.1 [ ] 匹配字符集合 后面的字符串只要包含 abc 中任意一个字符都返回 true 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(/^[a-z]$/.test(c)) // true比如 [a-z] 表示 a 到 z 26个英文字母都可以[a-zA-Z] 表示大小写都可以[0-9] 表示 0~9 的数字都可 例子腾讯QQ号^[1-9][0-9]{4,}$ 腾讯QQ号从10000开始里面加上 ^ 取反符
比如 [^a-z] 匹配除了小写字母以外的字符注意要写到中括号里
1.3.3.2 . 匹配除换行符之外的任何单个字符
要求用户只能输入中文/^[\u4e00-\u9fa5]{2,8}$/
1.3.3.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]
日期格式^\d{4}-\d{1,2}-\d{1,2}
1.4 修饰符 修饰符约束正则执行的某些细节行为如是否区分大小写、是否支持多行匹配等 语法 /表达式/修饰符i 是单词 ignore 的缩写正则匹配时字母不区分大小写 g 是单词 global 的缩写匹配所有满足正则表达式的结果 例子 console.log(/a/i.test(a)) // true
console.log(/a/i.test(A)) // true替换 replace 替换。语法 字符串.replace(/正则表达式/, 替换的文本)2. 综合案例
手机号验证/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/验证码验证/^\d{6}$/密码验证/^[a-zA-Z0-9-_]{6,20}$/
