javascript 正则表达式 进阶教程
学习之前先来说一说一些概念
子项
1.正则的一个分组为一个子项,子项的匹配结果可以在这个子项之后被使用
2.子项是有顺序的，以(出现的位置顺序从左到右，第一个'()'--分组 包含的为第一子项，第二个为第二子项，一次类推)
3.可以在子项后面使用\n的形式来反向引用子项的匹配结果.(n为子项的序号，\n表示的是子项匹配到的结果，而不是子项规则本身)
replace方法：
//replace 参数用法 //1. 第一个参数为字符串
let testStr = "abc123";
console.log(testStr.replace("abc","456")); //
//2. 第一个参数为正则表达式
console.log(testStr.replace(/[a-z]+/,456));//
//3. 第二个参数为function，必须要有返回值，否则默认返回 'undefined'
console.log(testStr.replace(/[a-z]+/,function(){
return ;
})) //undefined123
console.log(testStr.replace(/[a-z]+/,function(){
return 456;
})) //
//第二个参数为字符串时，还可以插入以下的特殊变量来引用子项或与子项相关的内容
let testStr = "abc123def";
//1. $$ 表示 '$'
console.log(testStr.replace(/\d+/g,"$$")); //abc$def
//2. $& 表示 插入的匹配字串
console.log(testStr.replace(/\d+/g,"$&")); //abc123def
console.log(testStr.replace(/\d+/g,"-$&")); //abc-123def
//3. $`表示 插入的匹配字串之前的字符
console.log(testStr.replace(/\d+/g,"$`")); //abcabcdef
//4. $' 表示 插入的匹配字串之后的字符
console.log(testStr.replace(/\d+/g,"$'")); //abcdefdef
console.log(testStr.replace(/\d+/g,"-$'-")); //abc-def-def
//5. $n 表示 插入的匹配到子项的下标
let re = /((\d)+)/; //最外层的((\d)+)子项为第一子项， (\d)为第二子项
console.log(testStr.replace(re,"$1")); //abc123def 第一个子项匹配到的结果为123
console.log(testStr.replace(re,"$2")); //abc3def 第二个子项匹配到的结果为3. (子项匹配到多个值的话会返回最后一个值，因此匹配到了123，返回3)
//replace 第二个参数为 function时,function里面的参数是什么？
let email = "983521365@qq.com";
let re = /\w+@\w+.[a-z]{2,4}/; //没有子项的正则
let newStr = email.replace(re,function(res,index,origin){
//如果正则表达式没有子项，则function会返回三个参数，第一个参数为匹配正则的结果，第二个是这个结果开始位置的下标，第三个是被处理的字符串
console.log(res); //983521365@qq.com
console.log(index); //
console.log(origin); //983521365@qq.com
return "123";
})
console.log(newStr); //
let re2 = /(\w+)@(\w+).([a-z]{2,4})/; //有子项的正则
let newStr2 = email.replace(re2,function(res,child1,child2,child3,index,origin){
//function会返回多个参数，第一个参数为匹配正则的结果，到处第二个是子项最后匹配到的下标位置，最后一个是被处理的字符串，中间的参数则是依次匹配到子项值
console.log(res); //983521365@qq.com
console.log(child1); //
console.log(child2); //qq
console.log(child3); //com
console.log(index); //
console.log(origin); //983521365@qq.com
return "123";
})
console.log(newStr2); //123
使用子项参数修改正则返回值
//将邮箱的用户名全部替换为大写字母
let email = "Samson@qq.com";
let re2 = /(\w+)@(\w+).([a-z]{2,4})/; //有子项的正则
let newStr = email.replace(re2,function(res,child1,child2,child3,index,origin){
return child1.toUpperCase() + "@" + child2 + "."+child3;
})
console.log(newStr); //SAMSON@qq.com
let sCss = "-webkit-border-radus";
let re = /-(\w)/g;
let newCss = sCss.replace(re,function(a,b,c,d){
return b.toUpperCase();
})
console.log(newCss); //WebkitBorderRadus
let sCss = "-webkit-border-radus";
let re = /-(\w)/g;
let newCss = sCss.replace(re,function(res,child,index,origin){
//第一个匹配到的index 坐标为0
return index? child.toUpperCase() : child
})
console.log(newCss); //webkitBorderRadus
小练习1： 给商品价格加上单位和币种
//小练习1 -- 给商品价格加上单位和币种
let str = "商品的价格是： 200"; //
let re = /\d+/;
let price = str.replace(re,"￥$&元");
console.log(price); //商品的价格是： ￥200元
小练习2：格式化日期
//使用子项进行日期格式化
let date = "2018-12-17";
//将date 替换成 12-17 2018
let re = /(\d{4})-(\d{1,2})-(\d{1,2})/g;
console.log(date.replace(re,'$2-$3 $1')); //12-17 2018
小练习3：给搜索出的关键字加上高亮效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关键字高亮效果</title>
</head>
<body>
<input type="text" id="txt">
<button id="btn">搜索</button> <div id="content">
乌克兰武装部队总参谋长维克多·穆真科（Viktor Muzhenko）称，“自2014年克里米亚事件以来，俄罗斯构成了‘军事威胁’。”他还称，卫星图像显示，在仅仅两周的时间内，至少有250辆俄罗斯坦克在边境附近集结。 维克多·穆真科甚至称，“很难预测俄罗斯会何时对乌克兰采取战斗行动”。 穆真科说，这些俄罗斯坦克是在刻赤海峡冲突事件后集结起来的，在这起冲突中，20名乌克兰海军军官被扣押，至今还未被释放。 此外，报道还提到，在刻赤海峡事件之后，乌克兰也希望其在亚速海附近军事基地的建设完工。
</div> <script>
let oTxt = document.getElementById("txt");
let oBtn = document.getElementById("btn");
let content = document.getElementById("content");
let originContent = content.innerHTML;
oBtn.onclick = function(){
let value = oTxt.value.trim(); //获取输入的值，去掉左右空格
let re = new RegExp(value,'ig');
let sHtml = originContent.replace(re,"<span style='background: orange;'>$&</span>"); //在匹配的字符串前后加上带有背景颜色的span标签
content.innerHTML = sHtml;
}
</script>
</body>
</html>
效果图如下：
用正则表达式替换真的很方便呢.
RegExp.$n
n的值为1-9 ，还可以是下划线
$n 表示的是第几个子项，而子项是基于最近一次使用的正则表达式。
$_ 表示最近一次使用正则表达式 测试的字符串
如果没有子项则返回空字符串。
let str = "983521365@qq.com"
let re = /\w+@\w+.[a-z]{2,4}/;
re.test(str); //使用正则表达式
console.log(RegExp.$1);// ""
console.log(RegExp.$_);// 983521365@qq.com
//为什么使用正则表达式还是空呢？ 原来表达式里面根本没有子项 //重新定义有正则的子项
re = /(\w+)@(\w+).([a-z]{2,4})/;
console.log(RegExp.$1);// ""
console.log(RegExp.$_);// 983521365@qq.com
//为什么重新定义了还是空的？ 原来是还没有重新使用正则,所以正则匹配的还是之前的表达式
re.test(str);
console.log(RegExp.$1);//
console.log(RegExp.$2);//
console.log(RegExp.$3);// com
console.log(RegExp.$_);// 983521365@qq.com
这个方法并非标准方法，而且基于最近一次使用正则表达式来判断的，若多人异步操作，可能导致结果出错，因此不建议投入到正式的使用当中。
子项的反向引用
\n表示第几个子项的引用结果
let str = "213as426555aoqwu753333nmab8882138888pqwe9999820222";
//匹配出所有重复的数字
let re = /(\d)\1+/g;
console.log( str.match(re));// ["555", "3333", "888", "8888", "9999", "222"]
let str = "ads2a333o333ouoadsba666a666aoiwqeu999w9999owqe";
let re = /((\d)\2+)\w\1/g;
console.log(str.match(re));//["333o333", "666a666", "999w999"]
小练习： 去掉html空白标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="content">
<h2 class="title">跨越30年的两封信</h2>
<h3 > </h3>
<h4> </h4>
<div>
<div class="content">
昨天，有韩国媒体爆料了一起中国粉丝追星的“骚操作”：
据称，有4名中国粉丝为了追星，先是买了跟偶像同一班的头等舱机票，在成功见到偶像后突然要求下飞机并全额退款。并且，他们还成功了……
但这却导致机上360名乘客被迫重新安检，航班严重延误。
</div>
</div>
<p></p>
<p>这是一段测试内容</p>
<span></span>
</div> <script>
let sHtml = document.getElementById("content").innerHTML;
let re = /<(\w+)><\/\1>/g;
console.log(sHtml.match(re)); // ["<p></p>", "<span></span>"]
//改进之后，让他能够匹配到空白字符
let re2 = /<(\w+)>[\n\t\r\s]*<\/\1>/g;
console.log(sHtml.match(re2)); //["<h3> </h3>", "<h4>↵ ↵ </h4>", "<p></p>", "<span></span>"]
</script>
</body>
</html>
零宽断言
匹配结果不占长度，断言的判断内容不会被输出
正先行断言 aaa(?=xxx) aaa紧接该位置之后必须存在xxx才会匹配
负先行断言 aaa(?!xxx) aaa紧接该位置之后不存在xxx才会匹配
正后行断言 (?<=xxx)aaa aaa紧接该位置之前必须存在xxx才会匹配
负后行断言 (?<!xxx)aaa aaa紧接该位置之前不存在xxx才会匹配
let str = "word2013,excel2013,qq2018,yy2016";
//找到带2013把版本的软件，但是只显示文件名，不显示文件版本
let re = /\w+(2013)/g;
console.log(str.match(re));//["word2013", "excel2013"] 不满足需求
//使用正先行断言
let re2 = /\w+(?=2013)/g; //右边必须有2013,但是2013不会被输出
console.log(str.match(re2)); // ["word", "excel"] //找到版本号不属于2016的软件
let re3 = /[a-z]+(?!2016)/g;
// console.log(str.match(re3));// 负先行断言 ["word", "excel", "qq", "y"] //不满足 let re4 = /[a-z]+(?=\d+[^2016])/g; //正先行断言 +范围排除
console.log(str.match(re4)); //["word", "excel", "qq"] //匹配出yy的版本号
let re5 = /[a-z]{2}(?<=[yy])\d+/g;
console.log(str.match(re5)); //["2016"] //匹配除了yy之外的其他软件版本号
let re6 = /(?<![yy])\d{4}/g;
console.log(str.match(re6)); //["2013", "2013", "2018"]
javascript 正则表达式 进阶教程的更多相关文章
- JavaScript正则表达式进阶指南
摘要:正则表达式是程序员的必备技能,想不想多学几招呢? 本文用JavaScript的exec方法来测试正则表达式. 例如,正则表达式**/F.*g/会匹配"以F开头,以g结尾的字符串&quo ...
- JavaScript 正则表达式入门教程
正则表达式是描述一组字符串特征的模式,用来匹配特定的字符串 主要分三个部分:基本语法.RegExp对象的方法.JS中支持正则表达式的String对象方法 一.基本语法 在JS中,正则表达式为对象,用如 ...
- javascript 正则表达式学习教程
正则表达式 就是用某种模式去匹配一类字串的一个公式 RegExp 对象表示正则表达式 Regular Expression 正则表达式是很多程序设计语法都支持的 //①隐式创建 var regexp ...
- javascript 正则表达式 详细入门教程
1.什么是正则表达式 定义: 一个用来搜索.匹配.处理一些符合特定语法规则的一个强大的字符串处理工具. 用途: 进行特定字符和字符串的搜索 替换字符串中指定的字符或字符串 验证字符串是否符合需求 2. ...
- 深入浅出的javascript的正则表达式学习教程
深入浅出的javascript的正则表达式学习教程 阅读目录 了解正则表达式的方法 了解正则中的普通字符 了解正则中的方括号[]的含义 理解javascript中的元字符 RegExp特殊字符中的需要 ...
- 正则表达式入门教程&&经典Javascript正则表达式（share）
前言 例子: ^.+@.+\\..+$ 这样的代码曾经多次把我自己给吓退过.可能很多人也是被这样的代码给吓跑的吧.继续阅读本文将让你也可以自由应用这样的代码. 正文 教程:正则表达式30分钟入门教程 ...
- 正则表达式入门教程&&经典Javascript正则表达式----share
前言 例子: ^.+@.+\\..+$ 这样的代码曾经多次把我自己给吓退过.可能很多人也是被这样的代码给吓跑的吧.继续阅读本文将让你也可以自由应用这样的代码. 正文 教程:正则表达式30分钟入门教程 ...
- javascript进阶教程第一章案例实战
javascript进阶教程第一章案例实战 一.学习任务 通过几个案例练习回顾学过的知识 通过练习积累JS的使用技巧 二.实例 练习1:删除确认提示框 实例描述: 防止用户小心单击了“删除”按钮,在用 ...
- javascript进阶教程第二章对象案例实战
javascript进阶教程第二章对象案例实战 一.学习任务 通过几个案例练习回顾学过的知识 通过案例练习补充几个之前没有见到或者虽然讲过单是讲的不仔细的知识点. 二.具体实例 温馨提示 面向对象的知 ...
随机推荐
- Codeforces 798D Mike and distribution（贪心或随机化）
题目链接 Mike and distribution 题目意思很简单,给出$a_{i}$和$b_{i}$,我们需要在这$n$个数中挑选最多$n/2+1$个,使得挑选出来的 $p_{1}$,$p_{2} ...
- java多线程03-----------------volatile内存语义
java多线程02-----------------volatile内存语义 volatile关键字是java虚拟机提供的最轻量级额的同步机制.由于volatile关键字与java内存模型相关,因此, ...
- Ubuntu 16.04安装字体管理工具
注意:这个字体管理工具只是简化了字体的安装和卸载,并没有快速下载字体去自动安装,所有的字体都是需要自行下载,因为字体本身是有版权的. 安装: sudo apt-get install font-man ...
- 仿照jquery封装一个自己的js库
所谓造轮子的好处就是复习知识点,加深对原版jquery的理解.本文系笔者学习jquery的笔记,记述一个名为"dQuery"的初级版和缩水版jquery库的实现.主要涉及知识点包括 ...
- Geoserver跨域请求设置
使用OpenLayers请求GeoServer发布的WFS服务时,如果不是相同的域可能会出现如下问题. 已拦截跨源请求:同源策略禁止读取位于 http://localhost:8080/geoserv ...
- 深入Android渲染机制
1.知识储备 CPU: 中央处理器,它集成了运算,缓冲,控制等单元,包括绘图功能.CPU将对象处理为多维图形,纹理(Bitmaps.Drawables等都是一起打包到统一的纹理). GPU:一个类似于 ...
- Fresco的使用<一>
版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 引入Fresco dependencies { // 添加依赖 compile 'com.facebook.fresco:fre ...
- Android:MVC模式(上)
很多Android的入门书籍,在前面介绍完布局后就会逐个介绍组件,然后开始编写组件使用的例子.每每到此时小伙伴们都可能会有些疑问:是否应该先啃完一本<Java编程思想>学点 Java 知识 ...
- dll的使用
2016-12-11 23:02:24 一:生成DLL 1:创建DLL工程 文件->新建->项目->visual c++->win32->win32控制台应用程序(w ...
- ffmpeg rtmp 推流错误WriteN, RTMP send error 10053 10038
利用ffmepg推264流到rtmp服务端出现错误WriteN, RTMP send error 10053,具体如下图所示. 图1推流到rtmp服务错误 原因是视频流缺少SPS,PPS信息,加上这两 ...