实际工作中,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中的正则表达式的更多相关文章

  1. 【转】详解JavaScript中的this

    ref:http://blog.jobbole.com/39305/ 来源:foocoder 详解JavaScript中的this JavaScript中的this总是让人迷惑,应该是js众所周知的坑 ...

  2. 详解 javascript中offsetleft属性的用法(转)

    详解 javascript中offsetleft属性的用法 转载  2015-11-11   投稿:mrr    我要评论 本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...

  3. 详解javascript中的this对象

    详解javascript中的this对象 前言 Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的 ...

  4. (转载)详解Javascript中prototype属性(推荐)

    在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不 ...

  5. 详解Javascript中正则表达式的使用

    正则表达式用来处理字符串特别好用,在JavaScript中能用到正则表达式的地方有很多,本文对正则表达式基础知识和Javascript中正则表达式的使用做一个总结. 第一部分简单列举了正则表达式在Ja ...

  6. 详解JavaScript中的原型

    前言 原型.原型链应该是被大多数前端er说烂的词,但是应该还有很多人不能完整的解释这两个内容,当然也包括我自己. 最早一篇原型链文章写于2019年07月,那个时候也是费了老大劲才理解到了七八成,到现在 ...

  7. 【转】详解JavaScript中的异常处理方法

    有三种类型的编程错误:(1)语法错误和(2)运行时错误(3)逻辑错误:语法错误: 语法错误,也被称为解析错误,在编译时进行传统的编程语言,并出现在JavaScript解释时. 例如,下面一行将导致一个 ...

  8. 详解JavaScript中的Event Loop(事件循环)机制

    前言 我们都知道,javascript从诞生之日起就是一门单线程的非阻塞的脚本语言.这是由其最初的用途来决定的:与浏览器交互. 单线程意味着,javascript代码在执行的任何时候,都只有一个主线程 ...

  9. 详解JavaScript中的arc的方法

    今天说说JavaScript在网页中画圆的函数arc! 一.arc所需要的参数设置 1 arc(x, y, radius, startAngle, endAngle, counterclockwise ...

随机推荐

  1. WPF窗口和用户控件事件相互触发

    问题1: WPF项目里有一个窗口和一个用户控件,窗口和用户控件里都有一个Button,点击窗口里的Button如何触发用户控件里Button的Click事件 解答: //窗口代码 public par ...

  2. 在Windows系统中配置Google AddressSanitizer

    Google AddressSanitizer简介 AddressSanitizer (ASan) 是 C 和 C++ 的内存错误检测软件,它可以检测: 释放指针后继续使用 堆缓冲区溢出 栈缓冲区溢出 ...

  3. pytorch(14)权值初始化

    权值的方差过大导致梯度爆炸的原因 方差一致性原则分析Xavier方法与Kaiming初始化方法 饱和激活函数tanh,非饱和激活函数relu pytorch提供的十种初始化方法 梯度消失与爆炸 \[H ...

  4. 1.2 Python3基础-规范

    >>返回主目录 总的来说,如果安装的不是安装的Anaconda,pip命令还是经常会用到的(cmd模式使用),当然也可以在PyCharm中直接安装 PEP8规范,我另有一篇博客已经写好,可 ...

  5. 2020年12月-第01阶段-前端基础-认识WEB

    认识WEB 1.认识网页 网页主要由文字.图像和超链接等元素构成.当然,除了这些元素,网页中还可以包含音频.视频以及Flash等. 思考: 网页是如何形成的呢? 总结 网页有图片.链接.文字等元素组成 ...

  6. WEB服务-Nginx之十-keepalived

    WEB服务-Nginx之10-keepalived 目录 WEB服务-Nginx之10-keepalived Keepalived和高可用 基本概述 Keepalived安装配置 Keepalived ...

  7. mongoDB服务器连接不上Error: couldn't connect to server 127.0.0.1:27017, connection attempt failed: SocketException:

    一大早打开node项目就报错,终端报 UnhandledPromiseRejectionWarning: MongooseServerSelectionError: connect ECONNREFU ...

  8. mysql内一些可以延时注入的查询语句

        一.sleep() 配合其他函数进行使用将十分方便,如下所示: 拆分讲解: select substr(database(),1,1) ; 截取当前数据库的第一位,转换为ascii码值: se ...

  9. MyBatis(三):自定义持久层框架实现

    代码已上传至码云:https://gitee.com/rangers-sun/mybatis 新建Maven工程 架构端MyPersistent.使用端MyPersistentTest,使用端引入架构 ...

  10. div+伪元素实现太极图

    需求:使用div和伪元素实现阴阳太极图 图例: 代码: <html> <head> <title>太极图</title> <style type= ...