JS种正则表达式的基础用法
基础语法
元字符
| 常用元字符 | 含义 |
|---|---|
| . | 匹配除换行符以外的任意字符 |
| \w | 匹配字母数字或下划线 |
| \W | 匹配不是字母、数字、下划线的字符 |
| \d | 匹配数字,相当于[0-9] |
| \D | 匹配不是数字的字符 |
| \s | 匹配任意不可见字符,包括空格、制表符、换行符等 |
| \S | 匹配任意可见字符 |
| ^ | 匹配字符串的开始位置 |
| $ | 匹配字符串的结束位置 |
量词
| 量词 | 含义 |
|---|---|
| * | 重复任意次,相当于{0,} |
| ? | 重复0次或1次,相当于{0,1} |
| + | 重复1次或更多次,相当于{1,} |
| {n} | 重复n次 |
| {n,} | 重复n次或者大于n次 |
| {n,m} | 重复n到m次 |
分支&字符集
简单理解就是对某个字符界定的一个选择范围
- (a|b|c)
- [abc] === [a-c]
- [^abc] === [^a-c]
转义
使用\转义,我的理解是凡是不是表达它原本含义的字符就要转义,例如
/\d/ 表示的是匹配纯数字
/\\\d/ 表示的是匹配'\d'这个字符串
/\d/.test('2') //true
/\\\d/.test('2') // false
/\\d/.test('\\d') //true
当然,这还只是针对以\开头的那些元字符,还有那些量词当表示普通字符串时也要转义的,大体有这些:
- . ? + $ ^ [ ] ( ) { } | \ /
常用修饰符
- g → 全局搜索(global)
- i → 不区分大小写(ignoreCase)
- m → 多行搜索(multiline)
- y → 执行“粘性”搜索,匹配从目标字符串的当前位置开始,可以使用y标志。(sticky)
使用正则表达式
正则表达式可以被用于RegExp的exec和test方法以及 String的match、replace、search和split方法
| 方法 | 描述 |
|---|---|
| exec | 一个在字符串中执行查找匹配的RegExp方法,它返回一个数组(未匹配到则返回null)。 |
| test | 一个在字符串中测试是否匹配的RegExp方法,它返回true或false。 |
| match | 一个在字符串中执行查找匹配的String方法,它返回一个数组或者在未匹配到时返回null。 |
| search | 一个在字符串中测试匹配的String方法,它返回匹配到的位置索引,或者在失败时返回-1。 |
| replace | 一个在字符串中执行查找匹配的String方法,并且使用替换字符串替换掉匹配到的子字符串。 |
| split | 一个使用正则表达式或者一个固定字符串分隔一个字符串,并将分隔后的子字符串存储到数组中的String方法。 |
实例
既然前面讲了这么多基本规则,那就试着手写两个日常业务中常见的正则吧
- 验证手机号
最简单的验证:
/^1[0-9]{10}$/.test('18688888888') //true
这只是对开始的一位数和后面的10位数做了简单验证,如果需求有别的还可以根据位数做更精细的限制
- 验证邮箱
邮箱验证正则是个老生常谈的问题了,有很多前端笔试题也喜欢出,之前没有细化了解正则规则之前觉得这题目挺变态的,但现在觉得能够徒手写个简单的邮箱验证出来才能至少证明你了解基本的正则,话不多少,上代码:
首先看一个正确的邮箱地址:525918717@qq.com
这里可以差分为'525918717'、'@'、'qq'、'.'、'com'这么几部分,那么对应这几部分的内容初略匹配一下正则就是:
/^\w+@(\w+)\.([a-z]+)$/i.test('525918717@qq.com') //true
当然,这只是我自己手写的一个基础版,还有更精简的版本,例如
/[^\s@]+@[^\s@]+\.[^\s@]+/.test('525918717@qq.com') //true
经过对正则一些基础语法的了解,我对正则的理解就是想达到同一个匹配效果可以有多重方式,当然还有一些更高级的用法,像零宽断言和分组引用这些,下次用一篇文章单独讲解吧!
JS种正则表达式的基础用法的更多相关文章
- JS正则表达式的基础用法
RegExp(正则表达式)对象 正则表达式是一个描述字符模式的对象,可以处理更复杂的字符串.进行匹配替换. 常用的修饰符: i/m/g 使用方法: [声明方法一: new RegExp(value)] ...
- Bootstrap fileinput:文件上传插件的基础用法
官网地址:http://plugins.krajee.com/ 官网提供的样例:http://plugins.krajee.com/file-input/demo 基础用法一 导入核心CSS及JS文件 ...
- js进阶正则表达式8量词(+*?{}的意义用法)(量词的对象是前面一个字符)
js进阶正则表达式8量词(+*?{}的意义用法)(量词的对象是前面一个字符) 一.总结 1.量词的对象是前面一个字符 量词 描述 n+ 匹配任何包含至少一个 n 的字符串. n* 匹配任何包含零个或多 ...
- JS 自定义正则表达式
1. 正则表达式规则 1.1 普通字符 字母.数字.汉字.下划线.以及后边章节中没有特殊定义的标点符号,都是"普通字符".表达式中的普通字符,在匹配一个字符串的时候,匹配与之相同的 ...
- Js用正则表达式验证字符串
js 常用正则表达式表单验证代码 作者: 字体:[增加 减小] 类型:转载 js 常用正则表达式表单验证代码,以后大家就可以直接使用了. 正则表达式使用详解 简介 简单的说,正则表达式是一种可以用于模 ...
- js 常用正则表达式表单验证代码
正则表达式使用详解 简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下:测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一 ...
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- Smarty基础用法
一.Smarty基础用法: 1.基础用法如下 include './smarty/Smarty.class.php';//引入smarty类 $smarty = new Smarty();//实例化s ...
- Vue组件的基础用法(火柴)
前面的话 组件(component)是Vue最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码,根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己的需要,使用 ...
随机推荐
- javascript 类型 内存 对象
var box =0 function test() { alert(box) //全局 }
- MySQL数据库--练习
学生选课系统 设计表关系 创建表和插入数据 /* Navicat MySQL Data Transfer Source Server : localhost_3306 Source Server Ve ...
- 树莓派搭建Git服务器
目录 安装ssh 安装git-core 新增git用户 设置git用户目录 [服务端]设置git仓库 [客户端]设置git仓库 设置ssh登录 安装ssh sudo apt-get install s ...
- 88. Merge Sorted Array(从后向前复制)
Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note:Yo ...
- 金融 贷款类 App 审核被拒 4.3 1.2 2.1 4.2.2 问题总结
辛辛苦苦搞了一两个月,开发测试修bug,一路艰辛,到了审核这最后一关,各位同仁,咬紧牙关!接下来是鄙人遇到过的被拒问题,望能帮到诸君! ******************************** ...
- MVP架构学习
MVP架构学习 M:数据层(数据库,文件,网络等...) V:UI层(Activity,Fragment,View以及子类,Adapter以及子类) P:中介,关联UI层和数据层,因为V和M是相互看不 ...
- java中静态变量,静态代码块,静态方法,实例变量,匿名代码块等的加载顺序
转自:http://blog.csdn.net/mrzhoug/article/details/51581994 一.在Java中,使用”{}”括起来的代码称为代码块,代码块可以分为以下四种: 1.普 ...
- 解决“检测到有潜在危险的Request.Form值”
先看如下 web.config 的代码: <system.web> <compilation debug="true" targetFramework=& ...
- MVC中关于 使用后台代码 检查 用户名是否已经被清册
在 注册页面 NewUser 的 Controller中写以下代码 public ActionResult GetUserIndataByUserName() { string UserName= ...
- elasticsearch 5.x集群安装
1. 下载 wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-5.5.1.tar.gz 2. 解压 为便于 ...