JavaScript中正则表达式详解
2024-05-21 16:17:16
正则表达式的介绍
* 正则表达式也叫规则表达式[Regular Expression]，是按照一定的规则组成的一个表达式，主要作用是用来匹配字符串的* 正则表达式可以在大多数编程语言中使用* 正则表达式的组成:由元字符或者限定符组成的一个式子* . 表示的是:除换行符(\n)之外的任意单个字符====>"word23"* [] 表示的是:范围，[0-9]表示的是0到9之间任意的一个数====>"234";[100-199]这种写法是错误的，应该改为[1][0-9][0-9]* [a-z]表示的是:所有的小写字母中的任意一个;[A-Z]表示的是:所有的大写字母中的任意一个* [a-zA-Z]表示的是:所有字母中的任意一个;[0-9a-zA-Z]表示的是:所有数字或者字母中的任意一个* []的另一层含义:把正则表达式中元字符的意义去掉====>[.]就表示一个点* | 或者 [0-9]|[a-z]表示的是:要么是一个数字，要么是一个小写的字母* () 分组，提升优先级 [0-9]|([a-z])|[A-Z]* ([0-9])([a-z])([A-Z])三组，从最左边开始计算* (()(()))只查左边的半个括号就可以了，共有四组* * 表示的是:*前面的表达式出现0次或者多次* [a-z][0-9]*表示的是:小写字母中的任意一个后面要么没有数字，要么有多个数字====>"word33334"* 匹配中文的正则表达式 [\u4e00-\u9fa5]* + 表示的是:+前面的表达式出现了1次到多次* [a-z][9]+表示的是:一个小写字母后面最少有一个9，或者多个9====>"word9999word"* ? 表示的是:?前面的表达式出现0次到1次[4][a-z]?====>"1314word"* {} 能够更加明确前面的表达式出现的次数* {0,} 表示的是:前面的表达式出现了0次到多次，和*一样* {1,} 表示的是:前面的表达式出现了1次到多次，和+一样* {0,1} 表示的是:前面的表达式出现了0次到1次，和?一样* {5,7} 表示对是:前面的表达式出现了5次到7次* {4} 表示的是:前面的表达式出现了4次* ^ 表示的是以什么开始，或者是取非(取反)^[0-9]====>"23word"以数字开头* ^[a-z]以小写字母开始;[^a-z]取反，非小写字母;[^0-9]非数字* [^0-9a-zA-Z_] 表示的是:特殊字符，_不算特殊字符* $ 表示的是:以什么结束 [0-9][a-z]$ 不严格的模式，只要存在就满足====>"232word";* ^[0-9][a-z]$ 相当于严格模式，每个字符只能出现一次====>"2b"* ^[0-9][a-z] 只限定了前面====>"2f234word"* \d 表示的是:数字中的任意一个，相当于[0-9]* \D 表示的是:非数字中的任意一个* \s 表示的是:空白符中的任意一个(空格/tab键)* \S 表示的是:非空白符中的任意一个* \w 表示的是:非特殊符号中的任意一个* \W 表示对是:特殊符号中的任意一个
正则表达式练习
* 根据字符串写正则表达式进行匹配* 经验:1.找规律;2.不要追求完美** 身份证的正则表达式:15位或者18位* ([1-9][0-9]{14})|([1-9][0-9]{16}[0-9xX])* [1-9][0-9]{14}([0-9]{2}[0-9xX])?** 座机号码的正则表达式010-19957435 0431-46436581* [0-9]{3,4}[-][0-9]{8}* \d{3,4}[-]\d{8}** QQ号码的正则表达式* [1-9][0-9]{4-10}** 手机号码的正则表达式* 130 131 132 133 134 135 136 137 138 139* 143 147 145* 151 152 159* 166 167* 170 174* 180 181 182 183 184 185 186 187 188 189* ([1][38][0-9]{9})|([1][4][357][0-9]{8})|([1][5][129][0-9]{8})|([1][6][67][0-9]{8})|([1][7][04][0-9]{8})** 邮箱的正则表达式* 2483762760@qq.com* ww2483762760@itcast.com.cn* [0-9a-zA-Z._-]+[@][0-9a-zA-Z._-]+([.][a-zA-Z]+){1,2}
正则表达式的创建
- 1.通过构造函数创建对象
var reg1=new RegExp(/\d{7}/);var reg2=new RegExp("\\d{7}");//正则表达式是可以放在字符串中书写的，但是要加转义字符\var str1="那是我日夜思念深深爱着的人啊1314521";//调用方法验证字符串是否匹配console.log(reg1.test(str1));//true//严格模式，只能有7个字符//非严格模式，只要满足即可var reg=new RegExp(/^\d{7}$/);var str="那是我日夜思念深深爱着的人啊1314521";console.log(reg.test(str));//false
- 2.通过字面量的方式创建对象
var reg=/\d{1,4}/;var flag=reg.test("我曾把完整的镜子打碎，夜晚的枕头都是眼泪8848");console.log(flag);//true
正则表达式结果的识别
console.log(/./.test("除了回车换行以为的任意字符"));//trueconsole.log(/.*/.test("0个到多个"));//trueconsole.log(/.+/.test("1个到多个"));//trueconsole.log(/.?/.test("哈哈"));//trueconsole.log(/[0-9]/.test("9527"));//trueconsole.log(/[a-z]/.test("what"));//trueconsole.log(/[A-Z]/.test("Are"));//trueconsole.log(/[a-zA-Z]/.test("干啥子"));//falseconsole.log(/[0-9a-zA-Z]/.test("9ebg"));//trueconsole.log(/b|(ara)/.test("abra"));//trueconsole.log(/[a-z]{2,3}/.test("word"));//trueconsole.log(/\d/.test("998"));//trueconsole.log(/\d*/.test("998"));//trueconsole.log(/\d+/.test("998"));//trueconsole.log(/\d{0,}/.test("998"));//trueconsole.log(/\d{2,3}/.test("998"));//trueconsole.log(/\D/.test("eat"));//trueconsole.log(/\s/.test(" "));//trueconsole.log(/\S/.test("嘎嘎 "));//trueconsole.log(/\w/.test("_"));//trueconsole.log(/\W/.test("_"));//false
正则表达式案例
- 验证密码强度
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">#dv {width: 230px;height: 200px;margin: 200px auto;border: 1px solid blue;}.strengthLv0 {height: 6px;width: 120px;border: 1px solid #ccc;padding: 2px;margin-left: 36px;}.strengthLv1 {background: red;height: 6px;width: 40px;border: 1px solid #ccc;padding: 2px;margin-left: 36px;}.strengthLv2 {background: orange;height: 6px;width: 80px;border: 1px solid #ccc;padding: 2px;margin-left: 36px;}.strengthLv3 {background: green;height: 6px;width: 120px;border: 1px solid #ccc;padding: 2px;margin-left: 36px;}</style>
</head>
<body>
<div id="dv"><label for="pwd">密码</label><input type="text" id="pwd" maxlength="16"><div><div id="strengthLevel" class="strengthLv0"></div></div>
</div>
<script>/** 密码如果只有数字||字母||特殊字符====>1级* 密码如果时两辆组合的====>2级* 密码如果三个都满足====>3级* *///检验键盘抬起时文本框中的内容，得到一个等级，在div标签中设置相应的属性；如果密码长度小于6，就没必要检验document.getElementById("pwd").onkeyup = function () {if(this.value.length>=6){var level=getLevel(this.value);document.getElementById("strengthLevel").className="strengthLv"+level;}else{document.getElementById("strengthLevel").className="strengthLv0";}};function getLevel(value) {var level=0;if(/\d/.test(value)){level++;}if(/[a-zA-Z]/.test(value)){level++;}if(/\W/.test(value)){level++;}return level;}
</script>
</body>
</html>
- 验证用户输入的是不是中文
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
请输入你的名字:<input type="text" value="" id="userName">*<br/>
<script>//是中文名字，则是绿色，否则蓝色document.getElementById("userName").onblur=function () {var reg=/^[\u4e00-\u9fa5]{2,6}$/;if(reg.test(this.value)){this.style.backgroundColor="green";}else{this.style.backgroundColor="blue";}};
</script>
</body>
</html>
- 验证用户输入的是不是邮箱
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
请输入邮箱地址:<input type="text" value="" id="email"/>*<br/>
<script>//如果输入的是邮箱，那么背景颜色为绿色，否则为红色document.getElementById("email").onblur=function () {var reg=/^[0-9a-zA-Z._-]+[@][0-9a-zA-z._-]+([.][a-zA-Z]+){1,2}$/;if(reg.test(this.value)){this.style.backgroundColor="green";}else{this.style.backgroundColor="blue";}};
</script>
</body>
</html>
- 表单综合案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">body {background: #ccc;}label {width: 40px;display: inline-block;}span {color: red;}.container {margin: 100px auto;width: 400px;padding: 50px;line-height: 40px;border: 1px solid #999;background: #efefef;}span {margin-left: 30px;font-size: 12px;}</style></head><body>
<div class="container" id="dv"><label for="qq">Q Q</label><input type="text" id="qq"><span></span><br/><label>手机</label><input type="text" id="phone"><span></span><br/><label>邮箱</label><input type="text" id="e-mail"><span></span><br/><label>座机</label><input type="text" id="telephone"><span></span><br/><label>姓名</label><input type="text" id="fullName"><span></span><br/>
</div>
<script>checkInput(document.getElementById("qq"),/^[1-9]\d{4,10}$/);checkInput(document.getElementById("phone"),/^\d{11}$/);checkInput(document.getElementById("e-mail"),/^[0-9a-zA-Z-._]+[@]+[0-9a-zA-Z-._]+([.][a-zA-Z]){1,2}$/);checkInput(document.getElementById("telephone"),/^\d{3,4}[-]\d{7,8}$/);checkInput(document.getElementById("fullName"),/^[\u4e00-\u9fa5]{2,6}$/);//定义一个函数，通过正则表达式验证当前文本框是否匹配function checkInput(input,reg) {input.onblur=function () {if(reg.test(this.value)){this.nextElementSibling.innerText="正确了";console.log("222");this.nextElementSibling.style.color="blue";}else{this.nextElementSibling.innerText="傻逼";this.nextElementSibling.style.color="red";}};}
</script>
</body>
</html>
正则表达式其他方法的使用
<script>/** String.match()方法检索一个字符串匹配正则表达式的结果* RegExp.exec()方法返回一个数组，其中用()分组的内容也在数组里面* */var str1 = "中国移动:10086,中国联通:10010,中国电信:10000";//把字符串里面所有的数字显示出来var array1=str1.match(/\d{5}/g);console.log(array1);//["10086", "10010", "10000"]//===============================================var reg=/\d{5}/g;ary=reg.exec(str1);console.log(ary);console.log(reg.exec(str1));console.log(reg.exec(str1));console.log(reg.exec(str1));//null//需遍历输出var result=reg.exec(str1);while(result!=null){console.log(result[0]);result=reg.exec(str1)}var str2 = "123123@xx.com,fangfang@valuedopinions.cn 286669312@qq.com 2、emailenglish@emailenglish.englishtown.com 286669312@qq.com...";var array2 = str2.match(/[0-9a-zA-Z._-]+[@][0-9a-zA-Z._-]+([.][a-zA-Z]+){1,2}/g);console.log(array2);//提取日期中的日//分组提取(正则表达式中的()作为分组来使用，获取分组匹配到的结果用RegEep.$1,$2...来获取)var str3="2019-03-27";var array3=str3.match(/(\d{4})[-](\d{2})[-](\d{2})/);console.log(RegExp.$1);//2019console.log(RegExp.$2);//03console.log(RegExp.$3);//27//通过标记进行高级搜索//g-->全局搜索；i-->不区分大小写搜索var str4="那是我日夜思念深深爱着的人啊";console.log(str4.replace(/[是]/,"不是"));var str5="word hello Word";var re = new RegExp(/[w]/, "gi");var re2 = new RegExp(/[w]/gi);console.log(str5.replace(/\s+/g,""));//wordhellowordconsole.log(str5.replace(/[w]/gi,"S"));console.log(str5.replace(re,"S"));console.log(str5.replace(re2,"S"));
</script>
JavaScript中正则表达式详解相关推荐
- python中正则表达式_Python中正则表达式详解
正则表达式是用来简洁表达一组字符串的表达式,本文主要和大家分享Python 中正则表达式知识详解,希望能帮助到大家.操作符说明实例.表示任何单个字符 [ ]字符集,单个字符取值范围[abc]表示a或b ...
- php中正则表达式详解,php正则表达式详解
php正则表达式详解 一.贪婪模式与非贪婪模式 贪婪模式:可以这样认为,就是在整个表达式匹配成功的前提下,尽可能多的匹配,也就是所谓的"贪婪",通俗点讲,就是看到想要的,有多少就捡 ...
- 中正则表达式详解_python ：正则表达式/re库 超级详细de注释解释
首先要解释,什么是正则表达式: 给定一串字符串,我们可以提取他的特征,把他抽象成一个类型. 下次遇到和这个字符串同类的字符串,我们只需要判断是否符合特征,就知道这个字符串是不是同类的. 举个例子: 每 ...
- shell中正则表达式详解_Shell if中的正则表达式使用详解
由于工作需要对用户提交的数据进行验证,这是一个简单的日期正则验证实例,有需要了解的同学可参考. shell中的if语句需要做一个正则判断,查了一下语法记录之. DATEPATTERN="^[ ...
- JavaScript中this详解
摘要:JavaScript中的this总是让人迷惑,应该是js众所周知的坑之一. 个人也觉得js中的this不是一个好的设计,由于this晚绑定的特性,它可以是全局对象,当前对象,或者-有人甚至因为坑 ...
- javascript中function详解
目录 概念 定义 函数内部 this arguments 绑定函数作用域 Function.prototype.bind Function.prototype.applay Function.prot ...
- JavaScript中作用域详解
1.作用域 作用域,即变量(变量作用域又称上下文)和函数生效(能被访问)的区域或集合 换句话说,作用域决定了代码区块中变量和其他资源的可见性 举个例子 function fn(){var info=' ...
- 前端基础-JavaScript的正则表达式详解
一.概念: 正则表达式(Regular Expression),用于描述一组字符串特征的模式,可以用于匹配特定的字符串. 本质是一个规则字符串,用指定的符号来编写,制定规则. 二.应用场景: 验证:对 ...
- JavaScript中undefined详解
目录 一.前言 二.undefined的特点 1.undefined既是JavaScript中的原始数据类型之一,也是一个原始值数据 2.undefined是全局对象上的一个属性 3.undefine ...
最新文章
- [微信小程序]手指触摸动画效果(完整代码附效果图)
- POW矿池挖空块原理和解决方案
- python爬虫图片-Python图片爬取方法总结
- leetcode算法题--排序链表★
- ubuntu14.04环境下spyder的安装
- 删除msconfig启动项不打勾的东西
- 我的世界服务器破坏方块有延迟,问一下我的世界游戏方块不会被破坏的指令以及指令适用于游戏的版本 我记得在服务器上和单机上好像有不同的指令...
- JAVA进阶教学之（Object类中的hashCode方法）
- 上海市社会保险费缴费标准
- jsp 中的时间格式化
- python使用新线程执行目标函数
- 编程基本功：一个任务的难度是不是适合自己，有没有产出，心里要有数
- ArduCopter——ArduPilot——Notch Filter（陷波滤波器）
- cad被管理员阻止_怎么解决管理员阻止运行cad?
- 用pyqt原生功能实现自由屏幕截图
- JAVASCRIPT网页特效实例大全pdf
- Redis集群的设计与使用
- 解决hotmail邮箱无法登陆问题
- python画矩阵热图_如何用python的matplotlib绘制热图
- python开发工具排行榜_编程语言交互排行榜_人工智能的Python第一名