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,一经查实,立即删除!

相关文章

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…

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

转自即时通讯网&#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方法的注意事项。以便在以后的开发中出现类似的问题能第一时间想到可能是这个方法的参…

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

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

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

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

【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…

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

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

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这个协议的细…

Thymeleaf模板引擎处理日期输入框回显问题type=“date“类型的坑 和 单选按钮、复选框的回显

type"date"类型的日期输入框的默认格式为"yyyy/MM/dd"&#xff0c;但是如果使用Thymeleaf的日期格式化工具类的时候使用"yyyy/MM/dd"就无法回显数据&#xff0c;必需使用类似于"yyyy-MM-dd"这种格式才能回显。 <!--emp.birth为Dat…

Anaconda中软件库更新

今天在Anaconda运行Visualization of MLP weights on MNIST源码时出现了如图错误&#xff1a; 提示无法导入fetch_openml&#xff0c;查了一下是对应的sklearn软件包版本过低&#xff0c;为0.17版。需要更新到0.20版。 1.打开Anaconda Prompt命令行 输入 conda list 命令 查看…

Mac安装mysql8.x最简洁的步骤,避免采坑

1.下载mysql8的.dmg安装包&#xff08;官网下载需要Oracle账号&#xff0c;推荐网上搜索一个8系列的版本即可&#xff09; 2.双击.dmg安装包&#xff0c;不断点击下一步。但是需要注意以下两点&#xff1a; &#xff08;1&#xff09;密码认证方式都选第二个&#xff08;不是…

Linux操作系统CentOS7安装

最近在学习Linux&#xff0c;今天记录下如何安装CentOS7操作系统。 1. 下载虚拟机软件 虚拟机选择的是VMware Workstation软件&#xff0c;可以访问这个链接下载&#xff1a;https://coding.net/u/aminglinux/p/resource/git/blob/master/README.md 2. 安装虚拟机 按照提示&…

机器学习初学者公众号下载资源汇总(一)

感谢黄海广博士的分享 原创&#xff1a; 机器学习初学者 机器学习初学者 今天 本站提供了大量的机器学习初学者下载资源&#xff0c;现在对已经公布的资源做下汇总&#xff0c;每个资源都会有一个百度云链接&#xff0c;并同时提供“自动回复”的功能&#xff08;有时候百度云链…

Oracle和MySQL多表条件分页查询的高效SQL语句、MySQL分页查询总数total的获取

Oracle数据库分页查询&#xff1a; 利用rownum和between and关键字 -- 查询员工表和薪水表的分页sql&#xff08;pageNo&#xff1a;页号从1开始&#xff0c;pageSize&#xff1a;每页大小&#xff09; select* from(selectROWNUM rNo,user_id,user_name,user_dept,user_sal…

[通俗易懂]深入理解TCP协议(下):RTT、滑动窗口、拥塞处理

转自即时通讯网&#xff1a;http://www.52im.net/ 前言 此文为系列文章的下篇&#xff0c;如果你对TCP不熟悉的话&#xff0c;请先看看上篇《[通俗易懂]深入理解TCP协议&#xff08;上&#xff09;&#xff1a;理论基础》 。 上篇中&#xff0c;我们介绍了TCP的协议头、状态机…

脑残式网络编程入门(一):跟着动画来学TCP三次握手和四次挥手

转自即时通讯网&#xff1a;http://www.52im.net/ 1、引言 网络编程中TCP协议的三次握手和四次挥手的问题&#xff0c;在面试中是最为常见的知识点之一。很多读者都知道“三次”和“四次”&#xff0c;但是如果问深入一点&#xff0c;他们往往都无法作出准确回答。 本篇文章尝…