JS正则表达式入门,看这篇就够了
前言
在正文开始前,先说说正则表达式是什么,为什么要用正则表达式?正则表达式在我个人看来就是一个浏览器可以识别的规则,有了这个规则,浏览器就可以帮我们判断某些字符是否符合我们的要求。但是,我们为什么要使用正则表达式呢?下面我们就看一下下面这个业务场景。
验证QQ号的合法性
/**
*合法qq号规则:1、5-15位;2、全是数字;3、不以0开头
*///1.在不使用正则表达式的时候,我们可能会这样判断QQ号的合法性
var qq="6666666a6666";
if(qq.length>=5&&qq.length<=15&&!isNaN(qq)&&qq.charCodeAt(0)!=48){alert("QQ合法");}else{alert("QQ不合法")}//2.使用正则表达式var qq="066336";var reg=/^[1-9][0-9]{4,14}$/;if(reg.test(qq)){alert("QQ合法");}else{alert("QQ不合法");}
从上面这个例子可以看出来使用了正则表达式的时候,我们的代码量变少了,而且比较直观。如果遇到非常的复杂的匹配,正则表达式的优势就更加明显了。
使用方法
接着上面,我想先说说JS正则表达式是如何使用的。非常简单,只有两步而已。
第一步:定义一个正则表达式
定义正则表达式有两种方法,第一种通过"/正则表达式/修饰符"这种形式直接写出来,第二种通过“new RegExp('正则表达式','修饰符)'”创建一个RegExp对象。其中修饰符为可选项,有三个取值g:全局匹配;i:不区分大小写;m:多行匹配
//第一种“/正则表达式/”var reg1=/hello \w{3,12}/g;
//第二种new RegExp('正则表达式')var reg2=new RegExp("hello \\w{3,12}",'g');/**
*这里需要注意的是,第二种方法中由于字符串转义问题,"\\"代表"\"。
*/
上面这个定义方法,其实还有一个可选参数(修饰符),这里我们先不深入探究,后面我们再细说。
说到RegExp对象,下面要说一下RegExp对象自带的属性,并不复杂,这里我就列一下,不展开说了。
属性 | 描述 |
---|---|
global | RegExp 对象是否具有标志 g。 |
ignoreCase | RegExp 对象是否具有标志 i。 |
lastIndex | 一个整数,标示开始下一次匹配的字符位置。 |
multiline | RegExp 对象是否具有标志 m。 |
source | 正则表达式的源文本。 |
第二步:调用RegExp对象中的方法
RegExp对象给我们提供了三种方法供我们使用,分别是test()、exec()和compile()。下面具体说一下这三个方法的用处。
1.test()
检索字符串中指定的值。返回 true 或 false。这个是我们平时最常用的方法。
var reg=/hello \w{3,12}/;alert(reg.test('hello js'));//falsealert(reg.test('hello javascript'));//true
2.exec()
检索字符串中指定的值。匹配成功返回一个数组,匹配失败返回null。
var reg=/hello/;
console.log(reg.exec('hellojs'));//['hello']
console.log(reg.exec('javascript'));//null
3.compile()
compile() 方法用于改变 RegExp。
compile() 既可以改变检索模式,也可以添加或删除第二个参数。
var reg=/hello/;
console.log(reg.exec('hellojs'));//['hello']
reg.compile('Hello');
console.log(reg.exec('hellojs'));//null
reg.compile('Hello','i');
console.log(reg.exec('hellojs'));//['hello']
如何写一个正则表达式
第一次接触正则表达式同学们,可能被这个正则表达式的规则弄得迷迷糊糊的,根本无从下手。小编我第一次学这个正则表达式的时候,也是稀里糊涂,什么元字符、量词完全不知道什么东西,云里雾里的。后面小编细细研究了一下,总结一套方法,希望可以帮助大家。
关于正则表达式书写规则,可查看w3school,上面说的很清楚了,我就不贴出来了。我就阐述一下我写正则表达式的思路。
其实正则表达式都可以拆成一个或多个(取值范围+量词)这样的组合。针对每个组合我们根据JS正则表达式的规则翻译一遍,然后将每个组合重新拼接一下就好了。下面我们举个例子来试一下,看看这个方法行不行。
验证QQ号的合法性
合法qq号规则:1、5-15位;2、全是数字;3、不以0开头
第一步:拆成(取值范围+量词)这样的组合
根据QQ号的验证规则,我们可以拆成两个(取值范围+量词)的组合。分别是:
1.(1~9的数字,1个);2.(0~9的数字,4~14个)
第二步:根据正则表达式规则翻译(取值范围+量词)
1.(1~9的数字,1个) => [1-9]{1}或者[1-9]
2.(0~9的数字,4~14个) => [0-9]{4,14}
第三步:将翻译好的(取值范围+量词)组合进行拼接
初学者可能在拼接这一步会犯一个错误,可能会组合拼接成这个样子/[1-9]{1}[0-9]{4,14}/或者简写翻译成/[1-9] [0-9]{4,14}/这些都不对的。调用test()方法的时候,你会发现只要一段字符串中有符合正则表达式的字符串片段都会返回true,童鞋们可以试一下。
var reg=/[1-9][0-9]{4,14}/;
alert(reg.test('0589563'));
//true,虽然有0,但是'589563'片段符合
alert(reg.test('168876726736788999'));
//true,这个字符串长度超出15位,达到18位,但是有符合的字符串片段
正确的写法应该是这样的:
/^[1-9][0-9]{4,14}$/(用^和$指定起止位置)
下面我们看一个复杂点的例子:
验证国内电话号码
0555-6581752、021-86128488
第一步:拆成(取值范围+量词)这样的组合
这里会拆成两个大组合:
1、(数字0,1个)+(数字0~9,3个)+("-",1个)+(数字1~9,1个)+(数0~9,6个)
2、(数字0,1个)+(数字0~9,2个)+("-",1个)+(数字1~9,1个)+(数0~9,7个)
第二步:根据正则表达式规则翻译(取值范围+量词)
1、([0-0],{1})+([0-9],{3})+"-"+([1,9],{1})+([0,9],{6})
2、([0-0],{1})+([0-9],{2})+"-"+([1,9],{1})+([0,9],{7})
第三步:将翻译好的(取值范围+量词)组合进行拼接
这里我们先拼接一个大组合,然后再将大组合拼接起来
1、0[0-9]{3}-[1-9][0-9]{6}
2、0[0-9]{2}-[1-9][0-9]{7}
最后拼接为:
/(^0[0-9]{3}-[1-9][0-9]{6}$)|(^0[0-9]{2}-[1-9][0-9]{7}$)/
正则表达式拓展
除了RegExp对象提供方法之外,String对象也提供了四个方法来使用正则表达式。
1.match()
在字符串内检索指定的值,匹配成功返回存放匹配结果的数组,否则返回null。这里需要注意的一点事,如果没有设置全局匹配g,返回的数组只存第一个成功匹配的值。
var reg1=/javascript/i;
var reg2=/javascript/ig;
console.log('hello Javascript Javascript Javascript'.match(reg1));
//['Javascript']
console.log('hello Javascript Javascript Javascript'.match(reg2));
//['Javascript','Javascript','Javascript']
2.search()
在字符串内检索指定的值,匹配成功返回第一个匹配成功的字符串片段开始的位置,否则返回-1。
var reg=/javascript/i;
console.log('hello Javascript Javascript Javascript'.search(reg));//6
3.replace()
替换与正则表达式匹配的子串,并返回替换后的字符串。在不设置全局匹配g的时候,只替换第一个匹配成功的字符串片段。
var reg1=/javascript/i;
var reg2=/javascript/ig;
console.log('hello Javascript Javascript Javascript'.replace(reg1,'js'));
//hello js Javascript Javascript
console.log('hello Javascript Javascript Javascript'.replace(reg2,'js'));
//hello js js js
4.split()
把一个字符串分割成字符串数组。
var reg=/1[2,3]8/;
console.log('hello128Javascript138Javascript178Javascript'.split(reg));
//['hello','Javascript','Javascript178Javascript']
结语
正则表达式并不难,懂了其中的套路之后,一切都变得简单了。在最后我想说点题外话,网上不乏一些文章记录一些常用的正则表达式,然后新手前端在使用正则表达式的时候都会直接拿来就用。在这里我想说一下自己的看法,这些所谓记录常用的正则表达式文章并非完全都是正确的,有不少都是错的。所以同学们在日后使用的过程尽量自己写正则表达式,实在不会了可以去参考一下,但真的不要照搬下来。咱不说这种会影响自己成长的话,咱就说你抄的一定都是对的吗?多思考一下,总没有坏处。
JS正则表达式入门,看这篇就够了相关推荐
- React入门看这篇就够了
2019独角兽企业重金招聘Python工程师标准>>> 摘要: 很多值得了解的细节. 原文:React入门看这篇就够了 作者:Random Fundebug经授权转载,版权归原作者所 ...
- groovy if 判断字符串_Groovy快速入门看这篇就够了
原标题:Groovy快速入门看这篇就够了 来自:刘望舒(微信号:liuwangshuAndroid) 前言 在前面我们学习了和两篇文章,对Gradle也有了大概的了解,这篇文章我们接着来学习Groov ...
- .NET Core实战项目之CMS 第五章 入门篇-Dapper的快速入门看这篇就够了
写在前面 上篇文章我们讲了如在在实际项目开发中使用Git来进行代码的版本控制,当然介绍的都是比较常用的功能.今天我再带着大家一起熟悉下一个ORM框架Dapper,实例代码的演示编写完成后我会通过Git ...
- 动态规划入门看这篇就够了,万字长文!
今天是小浩算法 "365刷题计划" 动态规划 - 整合篇.大家应该期待已久了吧!奥利给! 01 PART 动态规划是啥 我们把要解决的一个大问题转换成若干个规模较小的同类型问题,当 ...
- React入门看这篇就够了《转载,侵删》
react - JSX React 背景介绍 React 入门实例教程 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自 ...
- [转]Zookeeper入门看这篇就够了
Zookeeper是什么 官方文档上这么解释zookeeper,它是一个分布式服务框架,是Apache Hadoop 的一个子项目,它主要是用来解决分布式应用中经常遇到的一些数据管理问题,如:统一命名 ...
- 监听器入门看这篇就够了
什么是监听器 监听器就是一个实现特定接口的普通java程序,这个程序专门用于监听另一个java对象的方法调用或属性改变,当被监听对象发生上述事件后,监听器某个方法将立即被执行.. 为什么我们要使用监听 ...
- Zookeeper入门看这篇就够了
Zookeeper是什么 官方文档上这么解释zookeeper,它是一个分布式服务框架,是Apache Hadoop 的一个子项目,它主要是用来解决分布式应用中经常遇到的一些数据管理问题,如:统一命名 ...
- python scrapy 入门_Python爬虫Scrapy入门看这篇就够了
一.初窥scrapy scrapy中文文档: http://scrapy-chs.readthedocs.io/zh_CN/latest/ Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应 ...
- Dockerfile 入门看这篇就够了
在使用docker时,有很多像往容器中复制war包.修改容器配置之类的操作,很繁琐,配置失败或异常时就又是一遍重复的操作,这时候,就要用到这个脚本文件–Dockerfile 以下是我对Dockerfi ...
最新文章
- 【数字信号处理】周期序列 ( 周期序列示例 3 | 判断序列是否是周期序列 )
- C#之windows桌面软件第九课:汉字串口助手
- 纪念一下我2020年的努力结果,腾讯云社区创作总结
- python schedule运行了一遍说没有任务_python-schedule模块(定时任务)基于官方文档总结...
- 大数据时代下,App数据隐私安全你真的了解么?
- python中将列表中的元素倒序输出_python实现对列表中的元素进行倒序打印
- 无心剑中译叶芝《情愁》
- vue 中provide的用法_Vue多级组件provide/inject使用详解
- 【Qt】QTableView中嵌入复选框CheckBox 的四种方法总结
- 机器学习深度学习知识点总结
- 高等数学(工本)填空题
- Three.js 关于立方体贴图产生边缘锯齿问题
- 优化算法 | 多车型车辆路径问题-初始解构造方法
- Power BI——数据建模案例分析
- 转:读“DataBase Sharding at Netlog”,看DataBase Scale Out
- hihocoder 1251 Today Is a Rainy Day 2015北京区域赛C
- rman备份遇到的设置rman导致数据库变慢的原因
- 03_跳转sucess方法和error方法
- 【思特奇杯·云上蓝桥-算法训练营】第1周:哥德巴赫分解
- Erlang程序设计笔记---(第三节 Erlang的基本概念)
热门文章
- ParameterizedType及其方法详解
- HTTP代理和HTTPS代理的区别
- linux服务器执行xshot,【Funtouch OS玩机宝典】:工程模式恢复模式入门指南
- Live555学习之(六)---------- 在Live555中实现录像
- 异常控制流(Exception Control Flow)
- 全志XR819 wifi芯片规格书/Datasheet完整资料
- js函数传参时:值传递和引用传递的区别
- 害怕成功的“ 约拿情结”
- 理解苹果App审核机制:只当守门员,不当裁判员
- 【史上最全】macOS 常用键盘快捷键大全 - 最值得你记住的 Mac 常用快捷键组合