JS正则表达式常见场景下的用法总结

(一)前置知识总结: 
1. 正则表达式 /xxxx/[标识] 其中的标识含义
•g (全文查找)
•i (忽略大小写)
•m (多行查找)

2. 正则表达式创建的两种方式(等价,都是对象)
创建对象的方式:这种创建方式的好处是可以往正则表达式中传入参数~~

let re = new RegExp("a");       // RegExp是一个对象,最简单的正则表达式,将匹配字母a 
let re= new RegExp("a", "i");   // 第二个参数,表示匹配时不分大小写 
let re = new RegExp("a", "gi"); // 匹配所有的、忽略大小写的字符a或A// 往正则表达式中传入参数,如
let maxLength = 6;
let re = new RegExp(`[\\.][\\d]{0, ${maxLength}}`);

字面量声明的方式:

let re = /a/gi; // 匹配所有的、忽略大小写的字符a或A

3. 正则表达式常见内置函数

  1. test():被查找的字符串中是否存在模式。
  2. exec():用正则表达式模式在字符串中运行查找,并返回包含该查找结果的一个数组。
  3. compile():把正则表达式编译为内部格式,从而执行得更快。
  4. $1...$9:返回九个在模式匹配期间找到的、最近保存的部分。只读。
  5. leftContext ($`):返回被查找的字符串中从字符串开始位置到最后匹配之前的位置之间的字符。只读。
  6. rightContext ($'):返回被搜索的字符串中从最后一个匹配位置开始到字符串结尾之间的字符。只读。
  7. lastMatch ($&):返回任何正则表达式搜索过程中的最后匹配的字符。只读。

4. 字符串(或String对象)一些与正则表达式相关的方法

  1. replace():替换与正则表达式匹配的子串(注意:js没有replaceAll方法,不要跟其它语言记混淆了!,替换所有第一个参数用正则表达式控制/exp/g)。
  2. split():把字符串分割为字符串数组。
  3. match():返回一个或多个匹配的数组,如果没有匹配上返回null。match():返回一个或多个匹配的数组,如果没有匹配上返回null。
    var str = "baabca_aaef"; 
    str.match(/a/g);                // 返回["a", "a", "a", "a", "a"]
    str.match(/a/);                 // 返回["a"],没有标志g则执行一次匹配成功即停止
    str.match(/aa/g);               // 返回["aa", "aa"]
    str.match(/A/g);                // 返回nullvar str2 = "11 plus 2 equal 13";
    str2.match(/\d/g);              // 返回["1","1","2","1","3"]
    str2.match(/\d+/g);             // 返回["11","2","13"]

    matchAll():返回RegExpStringIterator迭代器对象(用于子匹配,但是兼容性不好,在iOS上可能无效,如果要求兼容的话需要补丁,可以使用该npm包解决兼容性问题https://www.npmjs.com/package/string.prototype.matchall。

    var str="11 plus 2 equal 13";
    let ite = str.matchAll(/(\d+)/g);
    let i0 = ite.next();
    let i1 = ite.next();
    console.log(io);                 // 结果见下图(左)
    console.log(i1);                 // 结果见下图(右)

           

    let matchFn = (info) => {let reg = /\{(?<name>[^{}]+)\}/g;// 匹配出所字段let matches = [...info.matchAll(reg)];let matchesKey = [];matches.forEach(item => {let groups = item.groups;matchesKey.push(groups.name);});return matchesKey;
    };matchFn('{a}{b}ccc{d}'); // 运行结果为: ["a", "b", "d"]
  4. search():检索与正则表达式相匹配的值。

(二)应用场景总结: 
1. 取出版本号
如:"Ubuntu 8",取出数字8

let osVersion = "Ubuntu 8";      // 其中的8表示系统主版本号 
var re = /^[a-z]+\s+\d+$/i;      // +号表示字符至少要出现1次,\s表示空白字符,\d表示一个数字 
arr = re.exec(osVersion);        // 返回一个由匹配上的内容组成的数组
console.log(arr[0]);             // 因为整个字符串刚好匹配re,所以arr[0]等于osVersionre = /\d+/;                      // 只需要取出数字
var arr = re.exec(osVersion); 
console.log(arr[0]);             // 8 

如:"Ubuntu 8.10",取出主版本号8和次版本号10。(采用正则表达式的小括号子匹配的方式)

let osVersion = "Ubuntu 8.10";   // 取出主版本号和次版本号 
re=/^[a-z]+\s+(\d+)/i;          // 用()来创建子匹配 
arr =re.exec(osVersion);         // exec返回的数组第1到n元素中包含的是匹配中出现的任意一个子匹配 
console.log(arr[1]);             // 8,第一个子匹配,事实也可以这样取出主版本号 
console.log(arr.length);         // 2 re = /^[a-z]+\s+(\d+)\.(\d+)$/i; //.是正则表达式元字符之一,若要用它的字面意义须转义 
arr = re.exec(osVersion); 
console.log(arr.length);         // 3 
console.log(arr[0]);             // 完整的osVersion,因为全匹配上
console.log(arr[1]);             // 8,主版本号
console.log(arr[2]);             // 10,次版本号

2. 提取验证码
如:"your captcha is :0a4Fd3",取出0

let message = "your captcha is :0a4Fd3";
let re = /:([\d|a-zA-Z]{4,6})$/;
let arr = re.exec(message);
let captcha = arr[1];
console.log(captcha);                    // 0a4Fd3

3. 替换版本号
如:"Ubuntu 8.10 ubuntu 9.12",替换为"Ubuntu 新版本号 ubuntu 新版本号"

let osVersion = "Ubuntu 8.10 ubuntu 9.12"; 
let re = /([a-z]\s+)(\d+\.\d+)(\s*)/gi;        
let result = osVersion.replace(re,"$1新版本号$3"); // "$1新版本号$3"为替换的模板
console.log(result);                              // "Ubuntu 新版本号 ubuntu 新版本号"
/*
匹配替换过程:1.匹配到"Ubuntu 8.10 "为第1组,此时re表示"Ubuntu 8.10 ",$1:"Ubuntu "$2:"8.10"$3:" "然后执行替换操作:把re表示的字符串内容替换为模板表示的内容即"Ubuntu 新版本号 ";2.匹配到"ubuntu 9.12"为第2组,此时re表示"ubuntu 9.12",$1:"ubuntu "$2:"9.12"$3:""然后执行替换操作:把re表示的字符串内容替换为模板表示的内容即"ubuntu 新版本号"。
*/   

参考来源:https://www.jb51.net/article/25313.htm

 

 

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

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

相关文章

【HDU - 5882】Balanced Game (找规律,思维)

题干&#xff1a; Rock-paper-scissors is a zero-sum hand game usually played between two people, in which each player simultaneously forms one of three shapes with an outstretched hand. These shapes are "rock", "paper", and "scisso…

Apollo自动驾驶入门课程第⑧讲 — 规划(下)

目录 1. 路径-速度解耦规划 2. 路径生成与选择 3. ST图 4. 速度规划 5. 优化 6. 路径-速度规划的轨迹生成 7. Lattice规划 8. ST轨迹的终止状态 9. SL轨迹的终止状态 10. Lattice规划的轨迹生成 本文转自微信公众号&#xff1a;Apollo开发者社区 原创&#xff1a; 阿…

网络编程懒人入门(五):快速理解为什么说UDP有时比TCP更有优势

转自即时通讯网&#xff1a;http://www.52im.net/ 本文观点仅作参考&#xff0c;请根据自已系统的应用场景合理地选择数据传输层协议即可&#xff0c;无需盲目崇拜大牛言论。 1、前言 对于即时通讯开者新手来说&#xff0c;在开始着手编写IM或消息推送系统的代码前&#xff…

CSS定位总结:position=static/relative/absolute/fixed时的区别、top/bottom/left/right与margin外边距的运用

准备布局&#xff1a; <!DOCTYPE html> <html> <head> <style> *{ margin:0; padding:0; } .base-container{width: 500px;height: 500px;background-color:lightgray;border:1px dashed red; } .base-compare {width:200px;height:100px;background…

【HDU - 5883】The Best Path(判断欧拉回路)

题干&#xff1a; Alice is planning her travel route in a beautiful valley. In this valley, there are NN lakes, and MM rivers linking these lakes. Alice wants to start her trip from one lake, and enjoys the landscape by boat. That means she need to set up …

网络编程懒人入门(六):史上最通俗的集线器、交换机、路由器功能原理入门

转自即时通讯网&#xff1a;http://www.52im.net/ 本文引用了知乎网友“薛定谔不在家”的部分文字内容&#xff0c;感谢原作者的分享。 1、前言 即时通讯网整理了大量的网络编程类基础文章和资料&#xff0c;包括《TCP/IP协议 卷1》、《[通俗易懂]深入理解TCP协议》系列、《…

总结JSON.parse()报错VM71:1 Uncaught SyntaxError: Unexpected token u in JSON at position 0等之类的问题

问题场景&#xff1a;在调试前端应用的时候经常出现形如“Uncaught SyntaxError: Unexpected”之类的令人头疼觉得莫名其妙的问题&#xff1b;所以有必要总结整理一下关于JSON.parse()这个API方法的注意事项。以便在以后的开发中出现类似的问题能第一时间想到可能是这个方法的参…

【HDU - 5884】Sort(k叉哈夫曼树,优化tricks,两个队列代替优先队列)

题干&#xff1a; Recently, Bob has just learnt a naive sorting algorithm: merge sort. Now, Bob receives a task from Alice. Alice will give Bob NN sorted sequences, and the ii-th sequence includes aiai elements. Bob need to merge all of these sequences. H…

金额输入框校验和自动校正、支持指定任意位数小数decimal、支持只能输入整数、支持是否允许输入负数等功能

应用场景&#xff1a;开发前端交互页面时&#xff0c;经常遇到金额输入框、指定小数位数的数字输入框&#xff0c;单一的正则表达式无法满足大部分的业务校验需求&#xff0c;下面总结一个实用巧妙而又灵活的把普通输入框变成自动校正输入框的解决方案&#xff1a; 数字&#…

网络编程懒人入门(七):深入浅出,全面理解HTTP协议

转自即时通讯网&#xff1a;http://www.52im.net/ 本文引用了自简书作者“涤生_Woo”的文章&#xff0c;内容有删减&#xff0c;感谢原作者的分享。 1、前言 HTTP&#xff08;全称超文本传输协议&#xff0c;英文全称HyperText Transfer Protocol&#xff09;是互联网上应用…

【HDU - 5889】Barricade(最短路+网络流,最小割)

题干&#xff1a; The empire is under attack again. The general of empire is planning to defend his castle. The land can be seen as NN towns and MM roads, and each road has the same length and connects two towns. The town numbered 11 is where generals cast…

SM4国密对称算法源码解析

最近在研究国密算法&#xff0c;主要分为&#xff1a;SM2、SM3、SM4。其中SM2为非对称加密算法&#xff0c;SM3为哈希摘要算法&#xff0c;SM4为对称加密算法。 1.在SM4算法源文件中主要有以下几个函数&#xff1a; void sm4_setkey_enc( sm4_context *ctx, unsigned char ke…

Mac系统容易忽视但很实用的命令整理

001.终端指定用哪个软件打开指定的文件 # open -a 实用哪个软件(软件名有空格需转义) 文件名路径 open -a /Applications/Google\ Chrome.app xx.html # 【tips:】由于先输入"open -a"后tab键自动补全容易卡死终端&#xff0c;所以推荐先输入"/App..."&a…

【HDU 4394】Digital Square(bfs,数位搜索,思维,数学)

题干&#xff1a; Given an integer N,you should come up with the minimum nonnegative integer M.M meets the follow condition: M 2%10 xN (x0,1,2,3....) Input The first line has an integer T( T< 1000), the number of test cases. For each case, each line…

SM4算法原理

前面的文章介绍了SM4算法的C语言实现&#xff0c;源码可见文章&#xff1a;SM4国密对称算法源码解析_10点43的博客-CSDN博客_sm4代码。 本文将会介绍SM4算法原理&#xff0c;这部分可能会比较枯燥&#xff0c;但数学要求也不是太高。 目录 1.概述 2. 参数产生 3. 轮函数 4…

webpack打包前端项目入门

前言&#xff1a;在开发过程中&#xff0c;利用webpack可以帮我们自动把ES6语法编译成低版本浏览器能解析的JavaScript代码。下面给出webpack打包前端项目入门案例。 [终端&#xff1a;进入项目所在目录] 1.初始化项目依赖&#xff1a; npm init -y 2.安装webpack-cli脚手架…

网络编程懒人入门(八):手把手教你写基于TCP的Socket长连接

转自即时通讯网&#xff1a;http://www.52im.net/ 本文原作者&#xff1a;“水晶虾饺”&#xff0c;原文由“玉刚说”写作平台提供写作赞助&#xff0c;原文版权归“玉刚说”微信公众号所有&#xff0c;即时通讯网收录时有改动。 1、引言 好多小白初次接触即时通讯&#xff…

【HihoCoder - 1502】最大子矩阵(二维前缀和,尺取)

题干&#xff1a; 给定一个NxM的矩阵A和一个整数K&#xff0c;小Hi希望你能求出其中最大&#xff08;元素数目最多&#xff09;的子矩阵&#xff0c;并且该子矩阵中所有元素的和不超过K。 Input 第一行包含三个整数N、M和K。 以下N行每行包含M个整数&#xff0c;表示A。 对…

Idea Spring Boot配置文件.yaml或.properties不能自动提示的有效解决办法

SpringBoot项目的配置文件.yaml/.yml/.properties文件编写的时候没有自动提示&#xff0c;网上的解决办法五花八门&#xff0c;不一定适合具体个人的IDE环境&#xff0c;下面总结一套能解决绝大部分情况的方案&#xff1a; 先给出能自动识别的图样&#xff1a; 步骤1&#xff…

[通俗易懂]深入理解TCP协议(上):理论基础

转自即时通讯网&#xff1a;http://www.52im.net/ 前言 TCP是一个巨复杂的协议&#xff0c;因为他要解决很多问题&#xff0c;而这些问题又带出了很多子问题和阴暗面。所以学习TCP本身是个比较痛苦的过程&#xff0c;但对于学习的过程却能让人有很多收获。关于TCP这个协议的细…