详解JavaScript中的正则表达式
实际工作中,JavaScript正则表达式还是经常用到的。所以这部分的知识是非常重要的。
一、基础语法:
第一种:字面量语法
var expression=/pattern/flags;
第二种:RegExp构造函数语法
var pattern = /\w/gi; //字面量语法
var pattern = new RegExp('\\w', 'gi');//构造函数语法,这两者是等价的
这里有个注意点就是:如果正则表达式是动态的话,只能选择第二种。
其中的flags有3个标志
g:表示全局模式,即模式将被应用于所有字符串,而非在发现第一个匹配项时立即停止;
i:表示不区分大小写模式,即在确定匹配项时忽略模式与字符串的大小写;
m:表示多行模式,即在到达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项。
当然还有其他的flags,用到的极少,不做过多阐述。
至于以上的\w什么意思,稍等,请继续往下看。
二、方法
主要有test(),search(),match(),replace()。当然还有其它的很多方法,不作阐述,毕竟用到的很少。
1、test()方法的使用
判断某个字符串中是否含有相应的字符串
2、search()方法的使用
搜索相应的字符串第一次出现的索引位置,如果未找到,则返回-1
3、match()方法的使用
返回匹配的数组
4、replace()方法的使用,这个用到的还是非常多的
匹配相应的字符串,然后将其替换成其他字符串
三、匹配表达式跟实战
1、断言:
所谓的断言呢,就是表示一个匹配在某些条件下发生。总之呢,概念有点绕,直接看下文。待我慢慢续来。
| 字符 | 描述 |
|---|---|
| ^ | 匹配开头 |
| $ | 匹配结尾 |
| \b | 匹配单词的边界 |
| \B | 匹配非单词的边界 |
举个例子
我要匹配一个字符串,开头到结尾是dog,忽略大小写
var pattern = /^dog$/i;//忽略大小写
console.log(pattern.test('dog'));//true
console.log(pattern.test('sdfdog'));//false
console.log(pattern.test('dog56'));//false
console.log(pattern.test('dOG'));//true
var pattern = /\b\w+/g;//全局匹配,这里的+,是量词,代表1次或者多次
console.log('Hello World'.match(pattern));//输出['Hello','World'],这里就是match用法,返回匹配的数组。
在这里,说下,\b是匹配单词的边界,那么\B是匹配非单词的边界。一个小写,一个大写,大写是反义。那么不必我多说了吧。
再说下单词边界,可能很多人都不太清楚单词边界

我稍微解释下啊
,比如说,Hello World单词边界有四个,分别是H位置,o位置,W位置,d位置
2、字符类:
| 元字符 | 描述 |
|---|---|
| . | 查找单个字符,除了换行和行结束符 |
| \w | 查找单词字符,相当于[A-Za-z0-9_] |
| \W | 查找非单词字符,相当于[^A-Za-z0-9_] |
| 下面的反义便不再罗列出来了。 | |
| \d | 查找数字,相当于[0-9] |
| \s | 查找空白字符 |
| \0 | 查找NULL字符 |
| \n | 查找换行符 |
| \f | 查找换页符 |
| \r | 查找回车符 |
| \t | 查找制表符 |
| \v | 查找垂直制表符 |
3、范围:
| 字符 | 描述 |
|---|---|
| [abc] | 匹配a,b,c中的任意一个字符 |
| [^abc] | 匹配不是a,b,c中的任意一个字符 |
| [0-9] | 匹配0-9任意范围的数字,同理[a-z]匹配a-z任意范围的字符 |
| [a-z] | 匹配a到z之间的任意一个字符 |
| x|y | 匹配x或者y |
4、量词:
| 字符 | 描述 |
|---|---|
| n+ | 匹配任何包含至少一个字符n的字符串 |
| n* | 匹配任何包含零个或多个n的字符串 |
| n? | 匹配任何包含零个或者一个n的字符串 |
| n{x} | 匹配包含x个n的字符串 |
| n{x,y} | 匹配最少x个,最多y个n的字符串 |
四、拓展
匹配10-36之间的数字
var pattern = /1[2-9]|[2-3][0-9]|4[0-6]/;//12-46
console.log(pattern.test(11));//false
console.log(pattern.test(12));//true
console.log(pattern.test(20));//true
console.log(pattern.test(36));//true
console.log(pattern.test(46));//true
console.log(pattern.test(47));//false
将'Hello,World!Hello'中的Hello替换成Welcome
这里主要是强调一下replace方法在正则中的使用,因为这个在实际中用到的还是非常多的。后面的flags中的g,加上跟不加上有着很大的区别的。
var pattern = /Hello/g;
var oldString = 'Hello,World!Hello';
var newString = oldString.replace(pattern, 'Welcome');
console.log(newString);//Welcome,World!Welcome

详解JavaScript中的正则表达式的更多相关文章
- 【转】详解JavaScript中的this
ref:http://blog.jobbole.com/39305/ 来源:foocoder 详解JavaScript中的this JavaScript中的this总是让人迷惑,应该是js众所周知的坑 ...
- 详解 javascript中offsetleft属性的用法(转)
详解 javascript中offsetleft属性的用法 转载 2015-11-11 投稿:mrr 我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...
- 详解javascript中的this对象
详解javascript中的this对象 前言 Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的 ...
- (转载)详解Javascript中prototype属性(推荐)
在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...
- 详解Javascript中正则表达式的使用
正则表达式用来处理字符串特别好用,在JavaScript中能用到正则表达式的地方有很多,本文对正则表达式基础知识和Javascript中正则表达式的使用做一个总结. 第一部分简单列举了正则表达式在Ja ...
- 详解JavaScript中的原型
前言 原型.原型链应该是被大多数前端er说烂的词,但是应该还有很多人不能完整的解释这两个内容,当然也包括我自己. 最早一篇原型链文章写于2019年07月,那个时候也是费了老大劲才理解到了七八成,到现在 ...
- 【转】详解JavaScript中的异常处理方法
有三种类型的编程错误:(1)语法错误和(2)运行时错误(3)逻辑错误:语法错误: 语法错误,也被称为解析错误,在编译时进行传统的编程语言,并出现在JavaScript解释时. 例如,下面一行将导致一个 ...
- 详解JavaScript中的Event Loop(事件循环)机制
前言 我们都知道,javascript从诞生之日起就是一门单线程的非阻塞的脚本语言.这是由其最初的用途来决定的:与浏览器交互. 单线程意味着,javascript代码在执行的任何时候,都只有一个主线程 ...
- 详解JavaScript中的arc的方法
今天说说JavaScript在网页中画圆的函数arc! 一.arc所需要的参数设置 1 arc(x, y, radius, startAngle, endAngle, counterclockwise ...
随机推荐
- Svelte 极简入门
弹指之间即可完成. 注意:原文发表于 2017-8-7,随着框架不断演进,部分内容可能已不适用. Svelte 是一种新型框架. 以往我们要引入一个框架或者类库,可以通过在页面上放置 ...
- 干货满满-原来这才是hooks-React Hooks使用心得
序言 ---最后有招聘信息哦-React是一个库,它不是一个框架.用于构建用户界面的Javascript库.这里大家需要认识这一点.react的核心在于它仅仅是考虑了如何将dom节点更快更好更合适的渲 ...
- 前端学习 node 快速入门 系列 —— npm
其他章节请看: 前端学习 node 快速入门 系列 npm npm 是什么 npm 是 node 的包管理器,绝大多数 javascript 相关的包都放在 npm 上. 所谓包,就是别人提供出来供他 ...
- web之面试常问问题:如何实现水平垂直居中?
前提准备,在HTML页面中定义一个div,div中内容自定义. <div class="box sc">致我们呼啸而过的青春</div> 样式: div.b ...
- P2188 小Z的 k 紧凑数 题解(数位DP)
题目链接 小Z的 k 紧凑数 解题思路 数位DP,把每一个数位的每一个数对应的可能性表示出来,然后求\(num(1,r)-num(1,l-1)\),其中\(num(i,j)\)表示\([i,j]\)区 ...
- mysql最权威的总结
1.数据库操作 create database person charset utf8; -- 创建数据库show DATABASES; -- 查看数据库drop database person; - ...
- Salesforce LWC学习(三十二)实现上传 Excel解析其内容
本篇参考:salesforce lightning零基础学习(十七) 实现上传 Excel解析其内容 上一篇我们写了aura方式上传excel解析其内容.lwc作为salesforce的新宠儿,逐渐的 ...
- windbg安装pykd记录
https://githomelab.ru/pykd/pykd 1.安装python (坑,分x86和x64,对应windbg版本) 2.安装pykd:'pip install pykd' 3.安 ...
- shell算数和逻辑运算
算术运算 Shell允许在某些情况下对算术表达式进行求值,比如:let和declare 内置命令,(( ))复合命令和算术扩 展.求值以固定宽度的整数进行,不检查溢出,尽管除以0 被困并标记为错误.运 ...
- Chrome89针对sessionStorage的更新导致数据共享问题
最近将chrome更新到最新的版本,然后发现以前可以正常使用的功能无法使用了,经过分析后发现是浏览器新版本才出现的问题,今天记录以下. 一.遇到的问题 我们具体的问题场景,在A页面中需要打开B页面,同 ...