JS基础:正则表达式
简介
正则表达式 (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基础:正则表达式的更多相关文章
- DIV+CSS+JS基础+正则表达式
...............HTML系列.................... DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始 ...
- js基础——正则表达式
1.创建方式: var box = new RegExp('box');//第一个参数字符串 var box = new RegExp('box','ig');//第二个参数可选模式修饰符 等同于 v ...
- [JS复习] JS 基础知识
项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display :inline or bloc ...
- JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前 言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
- js基础--javaScript数据类型你都弄明白了吗?绝对干货
欢迎访问我的个人博客:http://www.xiaolongwu.cn 数据类型的分类 JavaScript的数据类型分为两大类,基本数据类型和复杂数据类型. 基本数据类型:Null.Undefine ...
- 前端面试题目汇总摘录(JS 基础篇)
JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string typeof null; // o ...
- 前端面试题目汇总摘录(JS 基础篇 —— 2018.11.02更新)
温故而知新,保持空杯心态 JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string type ...
- js基础 js自执行函数、调用递归函数、圆括号运算符、函数声明的提升 js 布尔值 ASP.NET MVC中设置跨域
js基础 目录 javascript基础 ESMAScript数据类型 DOM JS常用方法 回到顶部 javascript基础 常说的js包括三个部分:dom(文档document).bom(浏览器 ...
- js 基础篇(点击事件轮播图的实现)
轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...
- js 基础
js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...
随机推荐
- Activity的onSaveInstanceState和onRestoreInstanceState触发的时机
转自:http://www.cnblogs.com/heiguy/archive/2010/10/30/1865239.html 1.原文 先看Application Fundamentals上的一段 ...
- yum 安装报错:*epel: mirrors.aliyun.comError: xzcompressionnot available
环境背景:epel源下载地址: http://mirrors.aliyun.com/Centos内核内核版本[root@nfs01 ~]# uname -r2.6.32-642.el6.x86_64= ...
- 在spring boot 中使用itext和itextrender生成pdf文件
转载请注明出处 https://www.cnblogs.com/majianming/p/9539376.html 项目中需要对订单生成pdf文件,在第一版本其实已经有了比较满意的pdf文档,但是还是 ...
- math数学函数
Console.WriteLine("Math.Sign(12)--->{0})", Math.Sign(12)) Console.WriteLine("math. ...
- iOS Programming NSUserDefaults
iOS Programming NSUserDefaults When you start an app for the first time, it uses its factory settin ...
- [转] NTFS Permission issue with TAKEOWN & ICACLS
(转自:NTFS Permission issue with TAKEOWN & ICACLS - SAUGATA 原文日期:2013.11.19) Most of us using TA ...
- Go语言 之产生随机数
package main import ( "fmt" "math/rand" "strconv" "time" ) f ...
- vue 模板下只能有一个跟节点 根节点一定要是个div
<template> <div>简单说就是里面只能有一个跟的div button1.vue <template> <div> <Button> ...
- Java基础(十二)--clone()方法
Clone在Java中就是用来复制对象,通过分配一个和源对象相同大小的内存空间,然后创建一个新的对象,那么他和=的区别在哪? 通过=实现对象拷贝: @Data @NoArgsConstructor @ ...
- zabbix4.2学习笔记--用自带的mysql监控模块
这里演示监控zabbix本身用到的mysql 第一步:建立mysql监控用户 在生产环境中,出于安全考虑,建议监控客户端数据库时,单独配置一个查询权限用户做查询操作即可 # 撤掉安装时给予的分配单个数 ...