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正则表达式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解Javascript实践中的命令模式

    详解Javascript实践中的命令模式

    定义 Encapsulate a request as an object, thereby letting you parameterize other objects with different requests, queue or log requests,and support undoable operations." 「命令模式」将「请求」封装成对象,以便使用不同的请求.队列或者日志来参数化其他对象,同时支持可撤消的操作. 这里的「请求」的定义,并不是我们前端常说的「Ajax 请求

  • 教你如何写出可维护的JS代码

    什么是可维护代码 可维护代码需要遵循以下几个特点. 1.可理解性-其他人可以接手代码并理解它的意图和一般途径. 2.直观性-代码中的东西一看就明白,不管其操作过程有多复杂. 3.可适应性-代码以一种数据变化不要求完全重写的方法撰写. 4.可扩展性-在代码架构上已考虑在未来允许对核心功能进行扩展. 5.可调试性-当有地方出错时,代码可以给你足够的信息快速直接找出问题的所在. 代码约定 一种让代码变得可维护的简单途径是形成一套JavaScript代码的书写约定.由于JavaScript的可适应性,代

  • 编写可维护面向对象的JavaScript代码[翻译]

    Writing maintainable Object-Oriented (OO) JavaScript will save you money and make you popular. Don't believe me? Odds are that either you or someone else will come back and work with your code. Making that as painless an experience as possible will s

  • 使用 JavaScript 创建可维护的幻灯片效果代码第1/3页

    第一步:分析问题(Analizing the problem) 创建一个好的脚本,第一步应该是去分析哪些是你要完成的:我们想要创建一个照片的幻灯片效果,并且我们想要保持维护的方便. 如何创建一个幻灯片效果 在一个网站上拥有幻灯片有几种方法: 在文档中包含所有的图片.  当他运行在无 JavaScript 状态,这是一个安全的选择.而且,当页面被载完,所有的图片也会将被载完.然而,这个方式只适用于少量的图片. 在文档中包含第一张图片,并且有一个创建幻灯片功能的服务器端脚本.  这也是相当安全的,但

  • 用几道面试题来看JavaScript执行机制

    前面的话 根据JavaScript的运行环境,锁定它为单线程,任务需要排队执行,如果网站资源比较大,这样会导致浏览器加载会很慢,但实际上并没有,大家肯定立刻想到了同步和异步. 所谓的同步和异步也是在排队,只是排队的地方不同. 同步和异步 同步任务进入主线程排队,异步任务进入事件队列中排队 同步任务和异步任务进入到不同的队列中,也就是上面讲的在不同地方排队. 同步任务进入主线程,异步任务进入事件队列,主线程任务执行完毕,事件队列中有等待执行的任务进入主线程执行,直到事件队列中任务全部执行完毕. 开

  • 如何用JavaScript学习算法复杂度

    如何用JavaScript学习算法复杂度

    概述 在本文中,我们将探讨 "二次方" 和 "n log(n)" 等术语在算法中的含义. 在后面的例子中,我将引用这两个数组,一个包含 5 个元素,另一个包含 50 个元素.我还会用到JavaScript中方便的performance API来衡量执行时间的差异. const smArr = [5, 3, 2, 35, 2]; const bigArr = [5, 3, 2, 35, 2, 5, 3, 2, 35, 2, 5, 3, 2, 35, 2, 5, 3,

  • 如何用JavaScript实现一个数组惰性求值库

    如何用JavaScript实现一个数组惰性求值库

    概述 在编程语言理论中,惰性求值(英语:Lazy Evaluation),又译为惰性计算.懒惰求值,也称为传需求调用(call-by-need),是一个计算机编程中的一个概念,它的目的是要最小化计算机要做的工作.它有两个相关而又有区别的含意,可以表示为"延迟求值"和"最小化求值",除可以得到性能的提升外,惰性计算的最重要的好处是它可以构造一个无限的数据类型. 看到函数式语言里面的惰性求值,想自己用JavaScript写一个最简实现,加深对惰性求值了解.用了两种方法,

  • 如何制作自己的原生JavaScript路由

    前言 当你想到路由时,通常会想到类似react之类的库.但实际上,这些库和框架仍然使用vanillaJavaScript.那么该怎么实现呢? 我希望这个"JavaScript路由教程"能够帮你了解如何用原生js写出自己的路由. 简介 我遇到了很多出于各种原因想要自己创建路由的人.既然你看到本文,那意味着你可能也是其中的一个! 最重要的是,使用vanillajsrouter可以减少你对框架的依赖. 只要你了解实现它所涉及的所有部分,就可以相对容易的在原生 JavaScript 中创建自己

  • 聊一聊JavaScript的URL对象是什么

    聊一聊JavaScript的URL对象是什么

    概述 如果我们自己编写从URL中分析和提取元素的代码,那么有可能会比较痛苦和麻烦.程序员作为这个社会中最"懒"的群体之一,无休止的重复造轮子必然是令人难以容忍的,所以大多数浏览器的标准库中都已经内置了URL对象. 那么现在,有了它,我们就可以将URL字符串作为参数传递给URL的构造函数,并创建它的实例解析URL内容了吗?答案是:"是的!". 要使用URL构造函数创建URL对象,我们在以下代码中使用new来创建: new URL('https://www.grapec

  • JavaScript中正则表达式的实际应用详解

    实际工作中,JavaScript正则表达式还是经常用到的.所以这部分的知识是非常重要的. 一.基础语法: 第一种:字面量语法 var expression=/pattern/flags; 第二种:RegExp构造函数语法 var pattern = /\w/gi; //字面量语法 var pattern = new RegExp('\\w', 'gi');//构造函数语法,这两者是等价的 这里有个注意点就是:如果正则表达式是动态的话,只能选择第二种. 其中的flags有3个标志 g:表示全局模式

  • Java中正则表达式的使用和详解(下)

    在上篇给大家介绍了Java中正则表达式的使用和详解(上),具体内容如下所示: 1.常用正则表达式 规则 正则表达式语法   一个或多个汉字 ^[\u0391-\uFFE5]+$  邮政编码 ^[1-9]\d{5}$ QQ号码 ^[1-9]\d{4,10}$  邮箱 ^[a-zA-Z_]{1,}[0-9]{0,}@(([a-zA-z0-9]-*){1,}\.){1,3}[a-zA-z\-]{1,}$  用户名(字母开头 + 数字/字母/下划线) ^[A-Za-z][A-Za-z1-9_-]+$ 手

  • Java中正则表达式的使用和详解(上)

    1.匹配验证-验证Email是否正确 public static void main(String[] args) { // 要验证的字符串 String str = "service@xsoftlab.net"; // 邮箱验证规则 String regEx = "[a-zA-Z_]{1,}[0-9]{0,}@(([a-zA-z0-9]-*){1,}\\.){1,3}[a-zA-z\\-]{1,}"; // 编译正则表达式 Pattern pattern = Pa

  • JavaScript中push(),join() 函数 实例详解

    定义和用法 push方法 可向数组的末尾添加一个或多个元素,并返回一个新的长度. join方法 用于把数组中所有元素添加到一个指定的字符串,元素是通过指定的分隔符进行分割的. 语法 arrayObject.push(newelement1,newelement2,....,newelementX) arrayObject.join(separator). 参数描述newelement1必需.要添加到数组的第一个元素.newelement2可选.要添加到数组的第二个元素.newelementX可选

  • JavaScript中浅讲ajax图文详解

    JavaScript中浅讲ajax图文详解

    1.ajax入门案例 1.1 搭建Web环境 ajax对于各位来说,应该都不陌生,正因为ajax的产生,导致前台页面和服务器之间的数据传输变得非常容易,同时还可以实现页面的局部刷新.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 对于JavaWeb项目而言,ajax主要用于浏览器和服务器之间数据的传输. 如果是单单地堆砌知识点,会显得比较无聊,那么根据惯例,我先不继续介绍ajax,而是来写一个案例吧. 打开

  • JavaScript 中调用 Kotlin 方法实例详解

    JavaScript 中调用 Kotlin 方法实例详解 Kotlin 编译器生成正常的 JavaScript 类,可以在 JavaScript 代码中自由地使用的函数和属性 .不过,你应该记住一些微妙的事情. 用独立的 JavaScript 隔离声明 为了防止损坏全局对象,Kotlin 创建一个包含当前模块中所有 Kotlin 声明的对象 .所以如果你把模块命名为 myModule,那么所有的声明都可以通过 myModule 对象在 JavaScript 中可用.例如: fun foo() =

  • JavaScript中的splice方法用法详解

    JavaScript中的splice主要用来对js中的数组进行操作,包括删除,添加,替换等. 注意:这种方法会改变原始数组!. 1.删除-用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数) 2.插入-向数组指定位置插入任意项元素.三个参数,第一个参数(插入位置),第二个参数(0),第三个参数(插入的项) 3.替换-向数组指定位置插入任意项元素,同时删除任意数量的项,三个参数.第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项) 示例:

  • JavaScript中window和document用法详解

    JavaScript中window和document用法详解

    一.验证表单 封装一个函数用于验证手机号 /** * @param {String}eleId * @param {Object}reg */ function checkInput(eleId,reg) { var ele = document.getElementById(eleId); ele.onblur = function (ev) { if(!reg.test(this.value)){ //不匹配 this.style.borderColor = "#ff0000" /

  • JavaScript 中this指向问题案例详解

    总结 全局环境 ➡️ window 普通函数 ➡️ window 或 undefined 构造函数 ➡️ 构造出来的实例 箭头函数 ➡️ 定义时外层作用域中的 this 对象的方法 ➡️ 该对象 call().apply().bind() ➡️ 第一个参数 全局环境 无论是否在严格模式下,this 均指向 window 对象. console.log(this === window) // true // 严格模式 'use strict' console.log(this === window

  • Jmeter中正则表达式提取器使用详解

    Jmeter中正则表达式提取器使用详解

    目录 在使用Jmeter过程中,会经常使用到正则表达式提取器提取器,虽然并不直接涉及到请求的测试,但是对于数据的传递起着很大的作用,本篇博文就是主要讲解关于正则表达式及其在Jmeter的Sampler中的调用. 一.首先来介绍一下Jmeter中正则表达式提取器的元素组成,下图所示: 下面是各参数值的含义: 参数 释义 引用名称 在HTTP等请求中,引用此数据,需要用到的名称 正则表达式 用于将需要的数据提取出来 模板 表示使用提取到的第几个值: $1$:表示取第1个 $2$:表示取第二个 以此类

随机推荐