简介

  正则表达式 (regular expression) 描述了一种字符串匹配的模式,可以用来检查一个字符串是否含有某种子串、将匹配的子串做替换或者从某个字符串中取出符合某个条件的子串等。在 JS 中,RegExp 对象和 String 对象的一些方法,如:"search()"、"match()"、"replace()" 等都支持正则表达式。

正则表达式的创建方式

  1、实例创建方式:

var reg = new RegExp(pattern, modifiers);

  2、字面量创建方式:

var reg = /pattern/modifiers

pattern:正则表达式

modifiers:修饰符

修饰符主要包括:

i:忽略大小写

m:多行匹配,即在到达一行文本末尾时还会继续寻常下一行中是否与正则匹配的项

g:全局匹配,模式应用于所有字符串,而非在找到第一个匹配项时停止

  3、实例创建方式和字面量创建方式的区别:

实例创建方式可以进行字符串拼接,而字面量创建方式不可以,例如:

var str = 'test';
var reg1 = new RegExp(str + '123');
var reg2 = /str/;
console.log(reg1); //输出 /test123/
console.log(reg2); //输出 /str/

实例创建方式需要进行字符串转义,而字面量创建方式不需要,例如:

//下面两条语句是等价的
var reg1 = new RegExp('\\d');
var reg2 = /\d/;

这是因为在字符串中 '\' 是转义字符,需要转义 '\',即 '\\'。

语法

  1、修饰符

i 不区分大小写
m 多行匹配
g 全局匹配

  2、元字符

. 匹配除了换行符 '\n' 以外的任意一个字符
\w 匹配数字、字母和下划线
\W 匹配数字、字母和下划线之外的任意一个字符
\d 匹配数字
\D 匹配非数字
\s 匹配空白字符
\S 匹配非空白字符
\b 匹配单词边界
\B 匹配非单词边界
\0 匹配 'null' 字符
\n 匹配换行符
\f 匹配换页符
\r 匹配回车符
\t 匹配制表符
\v 匹配垂直制表符

  3、量词

+ 匹配 1 到多个
* 匹配 0 到多个
? 匹配 0 个或 1 个
{n} 匹配 n 个
{n,} 匹配 n 到多个
{n,m} 匹配 n 到 m 个
x$ 匹配结尾为 x 的字符串
^x 匹配开头为 x 的字符串
?=x 零宽度正先行断言,仅当子表达式 x 在字符串位置的右侧匹配时才匹配
?!x 零宽度负先行断言,仅当子表达式 x 不在字符串位置的右侧匹配时才匹配
?<=x 零宽度正后发断言,仅当子表达式 x 在字符串位置的左侧匹配时才匹配
?<!x 零宽度负后发断言,仅当子表达式 x 不在字符串位置的左侧匹配时才匹配

  4、方括号与圆括号

方括号用于给定某个范围的字符集合

[abcd] 匹配给定集合中的任何字符
[^abcd] 匹配给定集合外的任何字符
[0-9] 匹配从 0 到 9 的数字
[a-z] 匹配从 a 到 z 的字母

圆括号和计算表达式一样,可以提高优先级,也可以用于分组,例如:/a?/ 匹配 0 个或 1 个 'a',/(abc)?/ 则匹配 0 个或 1个 'abc'

  5、优先级

\ :转义符

?: 、() 、[] :圆括号和方括号等

+ 、* 、? 、{n} 、{n,} 、{n,m} :量词限定符等

$ 、^ 以及任何元字符和字符

| :或操作

RegExp 对象的 test() 方法

RegExpObject.test(string) :用于检测一个字符串是否匹配某个模式,如果字符串中有匹配的值返回 true ,否则返回 false,例如:

var str = 'Hello World';
var reg = /Hello/;
console.log(reg.test(str)); //输出 true

RegExp 对象的 exec() 方法

RegExpObject.exec(string) :用于检测一个字符串是否匹配某个模式,如果字符串中有匹配的值返回一个结果数组,否则返回 null,例如:

var str = 'Hello World';
var reg = /Hello/;
console.log(reg.exec(str)); //输出 ["Hello", index: 0, input: "Hello World"]

此结果数组的第 0 个元素是与正则表达式匹配的文本,第 1 个元素是与第 1 个分组匹配的文本,第 2 个元素是与第 2 个分组匹配的文本,以此类推。除了数组元素和 length 属性外 exec() 方法还返回两个属性:index 属性保存的是匹配文本的第一个字符的位置,input 属性则存放的是被检索的字符串,例如:

var str = 'Hello World';
var reg = /Hel(lo)/;
console.log(reg.exec(str)); //输出 ["Hello", "lo", index: 0, input: "Hello World"]

如果正则表达式使用了全局匹配修饰符 'g',那么在使用了 exec() 方法后,RegExpObject 对象的 'lastIndex' 属性会设置为匹配文本的最后一个字符的下一个位置,exec() 方法会在 'lastIndex' 指定的位置开始检索字符串,这时你需要手动反复调用 exec() 方法来全局匹配所有符合的文本,直到 exec() 方法再也找不到符合的文本时,它将返回 null,并把 'lastIndex' 属性重置为 0 ,例如:

var str = 'Hello World';
var reg = /Hello/;
console.log(reg.lastIndex); //输出 0

var str = 'Hello World';
var reg = /Hello/g;
console.log(reg.lastIndex); //输出 5

String 对象的 search() 方法

String.search(regExpObject) :用于检索与正则表达式相匹配的子字符串,如果检索到返回匹配子字符串第一个字符的位置,否则返回 -1,例如:

var str = 'Hello World';
var reg = /hello/i;
console.log(str.search(reg)); //输出 0

String 对象的 replace() 方法

String.replace(regExpObject,newvalue) :用于替换与正则表达式相匹配的子字符串,返回替换后的新字符串,例如:

var str = 'Hello World';
var reg = /hello/i;
console.log(str.replace(reg,'newString')); //输出 newString World

String 对象的 match() 方法

String.match(regExpObject) :用于检测一个字符串是否匹配某个模式,如果字符串中有匹配的值返回一个结果数组,否则返回 null,例如:

var str = 'Hello World';
var reg = /Hello/;
console.log(str.match(reg)); //输出 ["Hello", index: 0, input: "Hello World"]

RegExp 对象的 exec() 方法和 String 对象的 match() 方法的区别:

1、当正则表达式没有分组,且非全局匹配时:exec() 方法和 match() 方法执行结果相同,均返回上述结果数组

2、当正则表达式有分组,且非全局匹配时:exec() 方法和 match() 方法执行结果相同,均返回上述结果数组,此结果数组的第 0 个元素是与正则表达式匹配的文本,第 1 个元素是与第 1 个分组匹配的文本,第 2 个元素是与第 2 个分组匹配的文本,以此类推

3、当正则表达式没有分组,且全局匹配时:exec() 方法和 match() 方法执行结果不同,exec() 返回上述结果数组(同非全局匹配),但是设置了 RegExpObject 对象的 'lastIndex' 属性,此时可以根据 'lastIndex' 属性的值反复调用完成全局匹配;match() 方法则直接返回一个数组,包含所有匹配的元素

4、当正则表达式有分组,且全局匹配时:exec() 方法和 match() 方法执行结果不同,exec() 返回上述结果数组(同非全局匹配);match() 方法则忽略分组,只保留全局匹配的元素

也就是说,在非全局匹配时,exec() 方法和 match() 方法是完全相同的,在全局匹配时,match() 方法会忽略分组,只保留全局匹配的元素,exec() 方法则不会忽略分组,而是通过 'lastIndex' 属性进行全局匹配

JS基础:正则表达式的更多相关文章

  1. DIV+CSS+JS基础+正则表达式

    ...............HTML系列....................        DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始 ...

  2. js基础——正则表达式

    1.创建方式: var box = new RegExp('box');//第一个参数字符串 var box = new RegExp('box','ig');//第二个参数可选模式修饰符 等同于 v ...

  3. [JS复习] JS 基础知识

    项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display  :inline or bloc ...

  4. JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

       前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...

  5. js基础--javaScript数据类型你都弄明白了吗?绝对干货

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 数据类型的分类 JavaScript的数据类型分为两大类,基本数据类型和复杂数据类型. 基本数据类型:Null.Undefine ...

  6. 前端面试题目汇总摘录(JS 基础篇)

    JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string typeof null; // o ...

  7. 前端面试题目汇总摘录(JS 基础篇 —— 2018.11.02更新)

    温故而知新,保持空杯心态 JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string type ...

  8. js基础 js自执行函数、调用递归函数、圆括号运算符、函数声明的提升 js 布尔值 ASP.NET MVC中设置跨域

    js基础 目录 javascript基础 ESMAScript数据类型 DOM JS常用方法 回到顶部 javascript基础 常说的js包括三个部分:dom(文档document).bom(浏览器 ...

  9. js 基础篇(点击事件轮播图的实现)

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  10. js 基础

    js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...

随机推荐

  1. 导出数据库报错 EXP-00002: 写入导出文件时出错 EXP-00000: 导出终止失败

    解决方法: 1.检查磁盘所在空间是否够用. 2.磁盘修复下 排除故障考虑的地方要全面啊.

  2. hdu 6012 Lotus and Horticulture 打标记

    http://acm.hdu.edu.cn/showproblem.php?pid=6012 我们希望能够快速算出,对于每一个温度,都能够算出它在这n颗植物中,能得到多少价值. 那么,对于第i科植物, ...

  3. [书目20150303]软件工程的本质:运用SEMAT内核

    译者序Robert Martin作序Bertrand Meyer作序Richard Soley作序前言致谢第一部分   内核思想解释第1章   简要介绍如何使用内核1.1   为什么开发优秀软件具有很 ...

  4. C# 代码笔记_tuple元组

    tuple元组: 赋值 List<Tuple<string, int>> cc = new List<Tuple<string, int>>() { n ...

  5. CentOS 7 下用 firewall-cmd / iptables 实现 NAT 转发供内网服务器联网

    自从用 HAProxy 对服务器做了负载均衡以后,感觉后端服务器真的没必要再配置并占用公网IP资源. 而且由于托管服务器的公网 IP 资源是固定的,想上 Keepalived 的话,需要挤出来 3 个 ...

  6. APP崩溃处理

    以前经常遇到APP内部异常情况下的Exception,最初是通过try catch这样的方式处理:但是APP上线后,用户在特地的情况下触发 了某些Exception,当然这些Exception从理论和 ...

  7. 数据库text字段存值用回车分隔

    //查询 $sql = "SELECT attr_values FROM ecs_attribute WHERE attr_id=197"; $param_sel_sms = ar ...

  8. Microsoft SQL Server学习(二)

    目录 关于数据库的语法: 1.创建数据库 create database 数据库名 on primary (主文件属性(name,filename,size等)) -用逗号隔开次要主要文件和次要文件 ...

  9. CentOS 6.4 php-fpm 添加service 添加平滑启动/重启

    nginx通过FastCGI运行PHP比Apache包含PHP环境有明显的优势,最近有消息称,PHP5.4将很有可能把PHP-FPM补丁包含在内核里,nginx服务器平台上运行PHP将更加轻松,下面我 ...

  10. 一个圆的移动 AE教程 速度曲线调节

    AE里面速度的曲线调节 最终的小效果 两个关键点: 一:速度曲线调节 编辑速度图标,他的曲线是编辑速度的. 二:节点不要用贝塞尔曲线 编辑值图标,就是圆圈的x值y值的曲线.控制位置移动的. 选择一个节 ...