基础语法

元字符
常用元字符 含义
. 匹配除换行符以外的任意字符
\w 匹配字母数字或下划线
\W 匹配不是字母、数字、下划线的字符
\d 匹配数字,相当于[0-9]
\D 匹配不是数字的字符
\s 匹配任意不可见字符,包括空格、制表符、换行符等
\S 匹配任意可见字符
^ 匹配字符串的开始位置
$ 匹配字符串的结束位置
量词
量词 含义
* 重复任意次,相当于{0,}
? 重复0次或1次,相当于{0,1}
+ 重复1次或更多次,相当于{1,}
{n} 重复n次
{n,} 重复n次或者大于n次
{n,m} 重复n到m次
分支&字符集

简单理解就是对某个字符界定的一个选择范围

  1. (a|b|c)
  2. [abc] === [a-c]
  3. [^abc] === [^a-c]
转义

使用\转义,我的理解是凡是不是表达它原本含义的字符就要转义,例如

/\d/ 表示的是匹配纯数字
/\\\d/ 表示的是匹配'\d'这个字符串
/\d/.test('2') //true
/\\\d/.test('2') // false
/\\d/.test('\\d') //true

当然,这还只是针对以\开头的那些元字符,还有那些量词当表示普通字符串时也要转义的,大体有这些:

  • . ? + $ ^ [ ] ( ) { } | \ /
常用修饰符
  1. g → 全局搜索(global)
  2. i → 不区分大小写(ignoreCase)
  3. m → 多行搜索(multiline)
  4. 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种正则表达式的基础用法的更多相关文章

  1. JS正则表达式的基础用法

    RegExp(正则表达式)对象 正则表达式是一个描述字符模式的对象,可以处理更复杂的字符串.进行匹配替换. 常用的修饰符: i/m/g 使用方法: [声明方法一: new RegExp(value)] ...

  2. Bootstrap fileinput:文件上传插件的基础用法

    官网地址:http://plugins.krajee.com/ 官网提供的样例:http://plugins.krajee.com/file-input/demo 基础用法一 导入核心CSS及JS文件 ...

  3. js进阶正则表达式8量词(+*?{}的意义用法)(量词的对象是前面一个字符)

    js进阶正则表达式8量词(+*?{}的意义用法)(量词的对象是前面一个字符) 一.总结 1.量词的对象是前面一个字符 量词 描述 n+ 匹配任何包含至少一个 n 的字符串. n* 匹配任何包含零个或多 ...

  4. JS 自定义正则表达式

    1. 正则表达式规则 1.1 普通字符 字母.数字.汉字.下划线.以及后边章节中没有特殊定义的标点符号,都是"普通字符".表达式中的普通字符,在匹配一个字符串的时候,匹配与之相同的 ...

  5. Js用正则表达式验证字符串

    js 常用正则表达式表单验证代码 作者: 字体:[增加 减小] 类型:转载 js 常用正则表达式表单验证代码,以后大家就可以直接使用了. 正则表达式使用详解 简介 简单的说,正则表达式是一种可以用于模 ...

  6. js 常用正则表达式表单验证代码

    正则表达式使用详解 简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下:测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一 ...

  7. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  8. Smarty基础用法

    一.Smarty基础用法: 1.基础用法如下 include './smarty/Smarty.class.php';//引入smarty类 $smarty = new Smarty();//实例化s ...

  9. Vue组件的基础用法(火柴)

    前面的话 组件(component)是Vue最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码,根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己的需要,使用 ...

随机推荐

  1. idea配置mave

    历史信息为同意管理,本博客是从小号迁移而来,‘会飞的鱼la’已经注销 准备工作1.下载idea并激活http://idea.iteblog.com/key.php 2.下载mavenhttp://mi ...

  2. 一次http请求中的信息

    什么是Http 一次http传输,是由请求报文和响应报文来完成的 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World W ...

  3. 性能调优之MySQL篇一:MySQL性能计数器

    计数器 计数器分析 Threads_connected 表示当前有多少个客户连接该mysql服务器,连接数是否过多,网络是否存在问题,它是动态变化的,当达到最大连接数时,数据库系统就不能提供更多的连接 ...

  4. 带你走进AJAX(1)

    ajax是什么? (1)ajax (asynchronouse javascript and xml) 异步的javascript 和xml (2)ajax是一个粘合剂,将javascript.xml ...

  5. hive union all使用注意

    UNION用于联合多个select语句的结果集,合并为一个独立的结果集,结果集去重. UNION ALL也是用于联合多个select语句的结果集.但是不能消除重复行.现在hive只支持UNION AL ...

  6. CentOS 6.3编译安装LAMP环境笔记

    转载地址:http://www.jb51.net/article/54969.htm 最近抽空在虚拟机上测试成功了LAMP各个最新版本的整合编译安装,算是把之前的博文整合精简,以下内容均在CENTOS ...

  7. Django学习笔记之uWSGI详解

    WSGI是什么? WSGI,全称 Web Server Gateway Interface,或者 Python Web Server Gateway Interface ,是为 Python 语言定义 ...

  8. 20145328 《Java程序设计》第0周学习总结

    20145328 <Java程序设计>第0周学习总结 阅读心得 从总体上来说,这几篇文章都是围绕着软件工程专业的一些现象来进行描述的,但深入了解之后就可以发现,无论是软件工程专业还是我们现 ...

  9. 1_archlinux_安装篇

    系统安装 可参考网友的文章: https://www.douban.com/note/263375303/?type=like http://www.68idc.cn/help/server/linu ...

  10. CNN笔记:通俗理解卷积神经网络【转】

    本文转载自:https://blog.csdn.net/v_july_v/article/details/51812459 通俗理解卷积神经网络(cs231n与5月dl班课程笔记) 1 前言 2012 ...