js中正则表达式的详解(应用场景)

在这里插入图片描述


文章目录

  • 一、是什么
  • 二、匹配规则
    • 正则表达式标记
    • 贪婪模式
    • 懒惰模式
    • 分组
  • 三、匹配方法
    • str.match(regexp)
    • str.matchAll(regexp)
    • str.search(regexp)
    • str.replace(regexp)
    • str.split(regexp)
    • regexp.exec(str)
    • regexp.test(str)
  • 四、应用场景
  • 参考文献


一、是什么

正则表达式是一种用来匹配字符串的强有力的武器

它的设计思想是用一种描述性的语言定义一个规则,凡是符合规则的字符串,我们就认为它“匹配”了,否则,该字符串就是不合法的

JavaScript 中,正则表达式也是对象,构建正则表达式有两种方式:

  • 字面量创建,其由包含在斜杠之间的模式组成
const re = /\d+/g;
  • 调用RegExp对象的构造函数
const re = new RegExp("\\d+","g");const rul = "\\d+"
const re1 = new RegExp(rul,"g");

使用构建函数创建,第一个参数可以是一个变量,遇到特殊字符\需要使用\进行转义


二、匹配规则

常见的校验规则如下:

规则描述
\转义
^匹配输入的开始
$匹配输入的结束
*匹配前一个表达式 0 次或多次
+匹配前面一个表达式 1 次或者多次。等价于 {1,}
?匹配前面一个表达式 0 次或者 1 次。等价于{0,1}
.默认匹配除换行符之外的任何单个字符
x(?=y)匹配’x’仅仅当’x’后面跟着’y’。这种叫做先行断言
(?<=y)x匹配’x’仅当’x’前面是’y’.这种叫做后行断言
x(?!y)仅仅当’x’后面不跟着’y’时匹配’x’,这被称为正向否定查找
(?<!y)x仅仅当’x’前面不是’y’时匹配’x’,这被称为反向否定查找
xIy匹配‘x’或者‘y’
{n}n 是一个正整数,匹配了前面一个字符刚好出现了 n 次
{n,}n是一个正整数,匹配前一个字符至少出现了n次
{n,m}n 和 m 都是整数。匹配前面的字符至少n次,最多m次
[xyz]一个字符集合。匹配方括号中的任意字符
[^xyz]匹配任何没有包含在方括号中的字符
\b匹配一个词的边界,例如在字母和空格之间
\B匹配一个非单词边界
\d匹配一个数字
\D匹配一个非数字字符
\f匹配一个换页符
\n匹配一个换行符
\r匹配一个回车符
\s匹配一个空白字符,包括空格、制表符、换页符和换行符
\S匹配一个非空白字符
\w匹配一个单字字符(字母、数字或者下划线)
\W匹配一个非单字字符

正则表达式标记

标志描述
g全局搜索。
i不区分大小写搜索。
m多行搜索。
s允许 . 匹配换行符。
u使用unicode码的模式进行匹配。
y执行“粘性(sticky)”搜索,匹配从目标字符串的当前位置开始。

使用方法如下:

var re = /pattern/flags;
var re = new RegExp("pattern", "flags");

在了解下正则表达式基本的之外,还可以掌握几个正则表达式的特性:

贪婪模式

在了解贪婪模式前,首先举个例子:

const reg = /ab{1,3}c/

在匹配过程中,尝试可能的顺序是从多往少的方向去尝试。首先会尝试bbb,然后再看整个正则是否能匹配。不能匹配时,吐出一个b,即在bb的基础上,再继续尝试,以此重复

如果多个贪婪量词挨着,则深度优先搜索

const string = "12345";
const regx = /(\d{1,3})(\d{1,3})/;
console.log( string.match(reg) );
// => ["12345", "123", "45", index: 0, input: "12345"]

其中,前面的\d{1,3}匹配的是"123",后面的\d{1,3}匹配的是"45"

懒惰模式

惰性量词就是在贪婪量词后面加个问号。表示尽可能少的匹配

var string = "12345";
var regex = /(\d{1,3}?)(\d{1,3})/;
console.log( string.match(regex) );
// => ["1234", "1", "234", index: 0, input: "12345"]

其中\d{1,3}?只匹配到一个字符"1",而后面的\d{1,3}匹配了"234"

分组

分组主要是用过()进行实现,比如beyond{3},是匹配d字母3次。而(beyond){3}是匹配beyond三次

()内使用|达到或的效果,如(abc | xxx)可以匹配abc或者xxx

反向引用,巧用$分组捕获

let str = "John Smith";// 交换名字和姓氏
console.log(str.replace(/(john) (smith)/i, '$2, $1')) // Smith, John

三、匹配方法

正则表达式常被用于某些方法,我们可以分成两类:

  • 字符串(str)方法:match、matchAll、search、replace、split
  • 正则对象下(regexp)的方法:test、exec
方法描述
exec一个在字符串中执行查找匹配的RegExp方法,它返回一个数组(未匹配到则返回 null)。
test一个在字符串中测试是否匹配的RegExp方法,它返回 true 或 false。
match一个在字符串中执行查找匹配的String方法,它返回一个数组,在未匹配到时会返回 null。
matchAll一个在字符串中执行查找所有匹配的String方法,它返回一个迭代器(iterator)。
search一个在字符串中测试匹配的String方法,它返回匹配到的位置索引,或者在失败时返回-1。
replace一个在字符串中执行查找匹配的String方法,并且使用替换字符串替换掉匹配到的子字符串。
split一个使用正则表达式或者一个固定字符串分隔一个字符串,并将分隔后的子字符串存储到数组中的 String 方法。

str.match(regexp)

str.match(regexp) 方法在字符串 str 中找到匹配 regexp 的字符

如果 regexp 不带有 g 标记,则它以数组的形式返回第一个匹配项,其中包含分组和属性 index(匹配项的位置)、input(输入字符串,等于 str

let str = "I love JavaScript";let result = str.match(/Java(Script)/);console.log( result[0] );     // JavaScript(完全匹配)
console.log( result[1] );     // Script(第一个分组)
console.log( result.length ); // 2// 其他信息:
console.log( result.index );  // 7(匹配位置)
console.log( result.input );  // I love JavaScript(源字符串)

如果 regexp 带有 g 标记,则它将所有匹配项的数组作为字符串返回,而不包含分组和其他详细信息

let str = "I love JavaScript";let result = str.match(/Java(Script)/g);console.log( result[0] ); // JavaScript
console.log( result.length ); // 1

如果没有匹配项,则无论是否带有标记 g ,都将返回 null

let str = "I love JavaScript";let result = str.match(/HTML/);console.log(result); // null

str.matchAll(regexp)

返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器

const regexp = /t(e)(st(\d?))/g;
const str = 'test1test2';const array = [...str.matchAll(regexp)];console.log(array[0]);
// expected output: Array ["test1", "e", "st1", "1"]console.log(array[1]);
// expected output: Array ["test2", "e", "st2", "2"]

str.search(regexp)

返回第一个匹配项的位置,如果未找到,则返回-1

let str = "A drop of ink may make a million think";console.log( str.search( /ink/i ) ); // 10(第一个匹配位置)

这里需要注意的是,search 仅查找第一个匹配项

str.replace(regexp)

替换与正则表达式匹配的子串,并返回替换后的字符串。在不设置全局匹配g的时候,只替换第一个匹配成功的字符串片段

const reg1=/javascript/i;
const reg2=/javascript/ig;
console.log('hello Javascript Javascript Javascript'.replace(reg1,'js'));
//hello js Javascript Javascript
console.log('hello Javascript Javascript Javascript'.replace(reg2,'js'));
//hello js js js

str.split(regexp)

使用正则表达式(或子字符串)作为分隔符来分割字符串

console.log('12, 34, 56'.split(/,\s*/)) // 数组 ['12', '34', '56']

regexp.exec(str)

regexp.exec(str) 方法返回字符串 str 中的 regexp 匹配项,与以前的方法不同,它是在正则表达式而不是字符串上调用的

根据正则表达式是否带有标志 g,它的行为有所不同

如果没有 g,那么 regexp.exec(str) 返回的第一个匹配与 str.match(regexp) 完全相同

如果有标记 g,调用 regexp.exec(str) 会返回第一个匹配项,并将紧随其后的位置保存在属性 regexp.lastIndex 中。 下一次同样的调用会从位置 regexp.lastIndex 开始搜索,返回下一个匹配项,并将其后的位置保存在 regexp.lastIndex

let str = 'More about JavaScript at https://javascript.info';
let regexp = /javascript/ig;let result;while (result = regexp.exec(str)) {console.log( `Found ${result[0]} at position ${result.index}` );// Found JavaScript at position 11// Found javascript at position 33
}

regexp.test(str)

查找匹配项,然后返回 true/false 表示是否存在

let str = "I love JavaScript";// 这两个测试相同
console.log( /love/i.test(str) ); // true

四、应用场景

通过上面的学习,我们对正则表达式有了一定的了解

下面再来看看正则表达式一些案例场景:

验证QQ合法性(5~15位、全是数字、不以0开头):

const reg = /^[1-9][0-9]{4,14}$/
const isvalid = patrn.exec(s)

校验用户账号合法性(只能输入5-20个以字母开头、可带数字、“_”、“.”的字串):

var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
const isvalid = patrn.exec(s)

url参数解析为对象

const protocol = '(?<protocol>https?:)';
const host = '(?<host>(?<hostname>[^/#?:]+)(?::(?<port>\\d+))?)';
const path = '(?<pathname>(?:\\/[^/#?]+)*\\/?)';
const search = '(?<search>(?:\\?[^#]*)?)';
const hash = '(?<hash>(?:#.*)?)';
const reg = new RegExp(`^${protocol}\/\/${host}${path}${search}${hash}$`);
function execURL(url){const result = reg.exec(url);if(result){result.groups.port = result.groups.port || '';return result.groups;}return {protocol:'',host:'',hostname:'',port:'',pathname:'',search:'',hash:'',};
}console.log(execURL('https://localhost:8080/?a=b#xxxx'));
protocol: "https:"
host: "localhost:8080"
hostname: "localhost"
port: "8080"
pathname: "/"
search: "?a=b"
hash: "#xxxx"

再将上面的searchhash进行解析

function execUrlParams(str){str = str.replace(/^[#?&]/,'');const result = {};if(!str){ //如果正则可能配到空字符串,极有可能造成死循环,判断很重要return result; }const reg = /(?:^|&)([^&=]*)=?([^&]*?)(?=&|$)/ylet exec = reg.exec(str);while(exec){result[exec[1]] = exec[2];exec = reg.exec(str);}return result;
}
console.log(execUrlParams('#'));// {}
console.log(execUrlParams('##'));//{'#':''}
console.log(execUrlParams('?q=3606&src=srp')); //{q: "3606", src: "srp"}
console.log(execUrlParams('test=a=b=c&&==&a='));//{test: "a=b=c", "": "=", a: ""}

参考文献

  • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions

希望本文能够对您有所帮助!如果您有任何问题或建议,请随时在评论区留言联系 章挨踢(章IT)
谢谢阅读!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/681930.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android 9.0 任务栏中清除掉播放器的进程,状态栏仍有音乐播放器状态问题的解决

1.概述 在9.0的rom定制化开发中,在点击系统自带的播放器以后,播放音乐的时候,在最近任务栏recents列表中,点击全部清除,发现音乐播放器还在播放音乐,导致出现bug,完整的 解决方法,肯定是需要点击全部清除以后,音乐播放器也被杀掉进程,接下来分析下这个移除任务栏流程…

rtt设备io框架面向对象学习-adc设备

目录 1.adc设备基类2.adc设备基类的子类3.初始化/构造流程3.1设备驱动层3.2 设备驱动框架层3.3 设备io管理层 4.总结5.使用 1.adc设备基类 此层处于设备驱动框架层。也是抽象类。 在/ components / drivers / include / drivers 下的adc.h定义了如下adc设备基类 struct rt_ad…

寒假作业-day11

1>编程实现二维数组的杨辉三角 2>编程实现二维数组计算每一行的和以及列和 3>编程实现二维数计算第二大值 代码&#xff1a; #include<stdio.h> #include<stdlib.h> #include<string.h>void yanghui(int n){int arr[n][n];for (int i 0; i <…

从零开始实现消息队列(一)

从零开始实现消息队列 .什么是消息队列需求分析核心概念模型 . 什么是消息队列 相信大家都了解过阻塞队列和生产者消费者模型,而阻塞队列最大的用途,就是用于实现生产者消费者模型,生产者消费者模型有以下好处: 解耦合 解释: 当主机A给主机B发消息时,A给B发送请求,B给A返回响应…

app逆向-⽹络请求库Retrofit2

文章目录 一、前言二、POST应用三、GET应用 一、前言 Retrofit2 是基于 OkHttp 构建的 RESTful HTTP 客户端&#xff0c;专门用于简化 HTTP 请求的过程&#xff0c;尤其是用于访问 RESTful API。 Retrofit2 提供了一个声明式的方式来定义 REST API 接口&#xff0c;通过注解来…

【NLP 自然语言处理(一)---词向量】

文章目录 什么是NLP自然语言处理发展历程自然语言处理模型模型能识别单词的方法词向量分词 一个向量vector表示一个词词向量的表示-one-hot多维词嵌入word embeding词向量的训练方法 CBOW Skip-gram词嵌入的理论依据 一个vector&#xff08;向量&#xff09;表示短语或者文章ve…

P1990 覆盖墙壁题解

题目 有一个长为N宽为2的墙壁&#xff0c;给你两种砖头&#xff1a;一个长2宽1&#xff0c;另一个是L型覆盖3个单元的砖头。如下图&#xff1a; 0 0 0 00砖头可以旋转&#xff0c;两种砖头可以无限制提供。你的任务是计算用这两种来覆盖N2的墙壁的覆盖方法。例如一个23的墙…

13种2023年智能算法进行PK,免费获取matlab代码

本期推出13种2023年智能算法进行PK&#xff0c;在CEC2005和CEC2022函数集进行测试。文末有代码获取方式。 13种算法都是2023年提出的&#xff0c;分别为&#xff1a; 淘金优化器(GRO)&#xff0c;雪消融优化器(SAO)&#xff0c;霜冰优化算法(RIME)&#xff0c;减法优化器(SABO)…

C++-添加Com类-从 ActiveX 控件添加类-从类型库添加类向导

文章目录 1.从类型库添加类向导2.从 ActiveX 控件添加类3.总结1.从类型库添加类向导 在Visual Studio等开发环境中,从类型库添加类向导是一个用于自动生成接口实现代码的功能。它可以帮助开发者根据COM(Component Object Model)类型库中的接口定义生成对应的类,极大地提高…

最通俗易懂的讲解——STP专题(BPDU选举机制)

点赞关注&#xff0c;持续更新STP专题&#xff01;&#xff01;&#xff01; BPDU选举机制 BPDU通过4个参数进行选举&#xff1a; RID&#xff1a;根桥的BID&#xff1b;RPC&#xff1a;对于根桥来说RPC永远等于0&#xff0c;对于非根桥来说RPC是自己的根端口到根桥的路径开…

easyx搭建项目-永七大作战(割草游戏)

永七大作战 游戏介绍&#xff1a; 永七大作战 游戏代码链接&#xff1a;永七大作战 提取码&#xff1a;ABCD 不想水文了&#xff0c;直接献出源码&#xff0c;表示我的诚意

(三十七)大数据实战——Solr服务的部署安装

前言 Solr是一个基于Apache Lucene的开源搜索平台&#xff0c;它提供了强大的全文搜索、分布式搜索和数据分析功能。Solr 可以用于构建高性能的搜索应用程序&#xff0c;支持从海量数据中快速检索和分析信息。Solr 使用倒排索引和先进的搜索算法&#xff0c;可实现快速而准确的…

计算机组成原理:存储系统【一】

&#x1f308;个人主页&#xff1a;godspeed_lucip &#x1f525; 系列专栏&#xff1a;计算机组成与原理基础 1 主存的模型、寻址1.1 总览1.2 存储器的层次化结构1.3 存储器的分类1.3.1 按层次1.3.2 按照介质1.3.3 按照访问方式1.3.4 按照信息的可更改性1.3.5 按照信息的可保存…

28.Stream流

Stream流 1. 概述2. 方法2.1 开始生成方法2.1.1 概述2.1.2 方法2.1.3 代码示例 2.2 中间操作方法2.2.1 概述2.2.2 方法2.2.3 代码示例 2.3 终结操作方法2.3.1 概述2.3.2 方法2.3.3 代码示例 2.4 收集操作方法2.4.1 概述2.4.2 方法2.4.3 代码示例 3. 代码示例14. 代码示例25. 代…

Linux入门(1)Linux介绍

目录 1. 认识 Linux, 了解 Linux 的相关背景 1.发展史 2. 学会如何使用云服务器 3. 掌握使用远程终端工具 xshell 登陆 Linux 服务器 1. 认识 Linux, 了解 Linux 的相关背景 1.发展史 学习Linux系统编程&#xff0c;你可能要问Linux从哪里来&#xff1f;它是怎么发展的&am…

百面嵌入式专栏(面试题)驱动开发面试题汇总 2.0

沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇我们将介绍驱动开发面试题 。 1、Linux系统的组成部分? Linux内核、Linux文件系统、Linux shell、Linux应用程序。 2、Linux内核的组成部分? (1)第一种分类方式:内存管理子系统、进程管理子系统、文件管理子系…

也谈组合模型

在实际问题中&#xff0c;往往需要综合多个模型和参数来进行描述和拟合&#xff0c;并通过实际结果进行调优。 在军事博弈或其他复杂系统中&#xff0c;单一的线性模型往往无法完全准确地描述所有的因素和关系。因此&#xff0c;我们需要考虑引入更多的模型以及相关参数&#x…

一些好的huggingface space

https://huggingface.co/spaces/ehristoforu/mixtral-46.7b-chat text to image: https://huggingface.co/spaces/latent-consistency/lcm-lora-for-sdxl https://huggingface.co/spaces/briaai/BRIA-2.2-FAST

RSIC-V“一芯”学习笔记(三)——读后感以及部分PA0工作

文章目录 一、别像弱智一样提问二、提问的智慧三、安装linux以及配置问题3.1 关于问题配置 一、别像弱智一样提问 提问前&#xff0c;应该清晰问自己几个问题&#xff0c;1. 是否尝试了在搜索引擎进行搜索过2. 相关的手册和文档是否看了3. 找找有没有常见的问题文档&#xff0…

console.log 会导致内存泄漏吗

console.log 会导致内存泄漏吗 经常看到一些文章说 console.log 会导致内存泄漏&#xff0c;这是真的吗&#xff1f;那以后是不是不能用 console.log 了&#xff1f; 这些说法多少有些以偏概全。先说结论&#xff1a; nodejs 中 console.log 不会导致内存泄漏浏览器中使用 c…