与正则有关的JS方法结合其在项目中的应用
与正则有关的JS方法结合其在项目中的应用
前言
最近项目中用到正则匹配比较多,因此打算深入理解和总结下各个与正则有关的方法,再结合在项目中使用的情况。与正则有关的JS方法共有7个,分别是RegExp对象的compile(), exec(), test() 和支持正则表达式的的String()方法为search(), match(), replace(), split()。
RegExp对象方法
compile()方法
该方法用于改变和重新编译正则表达式。语法: RegExpObject.compile(regexp, modifier); 参数1是正则表达式,参数2是规定匹配的类型。“g”用于全局匹配,“i”用于区分大小写,“gi”用于全局区分大小写的匹配。
var str = 'hello world hello world';
var patt = /hello/g;
//在全局使用"hi"字符串替换"hello"
var str2 = str.replace(patt, 'hi');
console.log(str2);
patt = /world/g;
patt.compile(patt);
//在全局使用"all the world"字符串替换"world"
str2 = str.replace(patt, 'all the world');
console.log(str2);
在控制台输入如有图 :
exec()方法
该方法用于检索字符串中的正则表达式的匹配。 语法:RegExpObject.exec(string). 参数为要检索的字符串。返回值:返回一个数组,其中存放匹配的结果,若未找到匹配,则返回null。
var str= "Visit W3School, W3School is a place to study web technology.";
var patt1 = new RegExp("W3School","g");
var patt2 = new RegExp("W3School");
var result;
while ((result = patt1.exec(str)) != null) {
console.log(result);
console.log(patt1.lastIndex);
}
//跳出循环后,返回null,并将lastIndex值重置为0
console.log(patt1.lastIndex); console.log(patt2.exec(str));
console.log(patt2.lastIndex);
/*
while ((result = patt2.exec(str)) != null) {
console.log(result);
console.log(patt2.lastIndex);
}
注意: 此循环是一个死循环,非全局匹配只匹配第一次匹配到的值patt2.exec(str))返回一个数组。
*/
图(1)
图(2)
除了数组元素和 length 属性之外,exec() 方法还返回两个属性。index 属性声明的是匹配文本的第一个字符的位置。input 属性则存放的是被检索的字符串 string。我们可以看得出,在调用非全局的 RegExp 对象的 exec() 方法时(如变量patt2,图(2)),返回的数组与调用方法 String.match() 返回的数组是相同的,lastIndex 默认是0。
但是,当 RegExpObject 是一个全局正则表达式时(如变量patt1,图(1)),exec() 的行为就稍微复杂一些。它会在 RegExpObject 的 lastIndex 属性指定的字符处开始检索字符串 string。当 exec() 找到了与表达式相匹配的文本时,在匹配后,它将把 RegExpObject 的 lastIndex 属性设置为匹配文本的最后一个字符的下一个位置。这就是说,您可以通过反复调用 exec() 方法来遍历字符串中的所有匹配文本。当 exec() 再也找不到匹配的文本时,它将返回 null,并把 lastIndex 属性重置为 0。通过图(1),我们看到第一次检索到'W3Cschool'时,Index值为6,而lastIndex变为14,然后从lastIndex 处开始检索字符串,第二次检索到'W3Cschool',而lastIndex变为24。最后退出循环,lastIndex重置为0。
test()方法
该方法用于检测一个字符串是否匹配某个模式。语法:RegExpObject.test(string);返回值:如果字符串string中含有与RegExpObject匹配的文本,则返回true,否则false。下面贴下在项目中使用到的正则应用,手机号码验证:
var reg = /(13\d|14[57]|15[^4,\D]|17[678]|18\d)\d{8}|170[059]\d{7}/;
//登录事件
$(".lonBtn").click(function() {
var num = $("#phoneNum").val();
var code = $("#code").val();
if( !reg.test(num) || code == '' ) {
mui.alert("手机号码或者验证码错误");
} else {
window.location.href = "memAbout.html";
}
})
匹配图片格式正则:
//上传图片函数
function uploadImg(domEle) {
$(domEle).change(function() {
if ( typeof FileReader === 'undefined' ) {
alert("你的浏览器不支持FileReader");
return;
}
var file = this.files[0];
console.log(file); //图片格式正则
if ( !/(.*).(jpg|bmp|gif|ico|pcx|jpeg|tif|png|raw|tga)$/.test(file.name) ) {
alert("请上传图片格式内容");
return;
}
// if ( file.size / 1024 > 5 ) { //file.size图片大小单位是B,转换为KB。
// alert("上传图片大小不应超过5KB");
// return;
// }
var r = new FileReader();
r.readAsDataURL(file);
r.onload = function(e) {
// console.log(this.result);
$(domEle).next().html('<img src="' + this.result + '" alt="图片">');
} })
}
String对象方法
search()方法
该方法用于检索字符串中指定的子字符串或检索与正则表达式相匹配的子字符串。语法:stringObejct.search(regexp),返回值:第一个与regexp相匹配的子串的起始位置。没有找到返回-1.特别注意search()方法不执行全局匹配。
var str4 = "hello3 w4orld";
//检索指定的子字符串
console.log(str4.search(/wor/)); // -1
//检索与正则表达式匹配的子字符串 非全局
console.log(str4.search(/\d/)); //
// 全局匹配
console.log(str4.search(/\d/g)); //
由在全局匹配和非全局匹配返回值都一样,说明确实不执行全局匹配。
match()方法
该方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。语法:stringObject.match(searchvalue)或stringObject(regexp)。返回值: 存放匹配结果的数组。该数组的内容依赖于regexp是否具有全局标识g。
var str= "Visit W3School, W3School is a place to study web technology.";
console.log(str.match('W3School'));
// 参数为RegExp对象 全局搜索
console.log(str.match(/\d+/g));
// 参数为RegExp对象 非全局搜索 只执行一次匹配
console.log(str.match(/\d+/));
图(3)
在调用String 对象的 metch() 方法时,参数为非全局搜索,返回的数组与调用方法RegExp.exec() 返回的数组是相同的。不过全局匹配返回的数组的内容与前者大不相同,它的数组元素中存放的是 stringObject 中所有的匹配子串,而且也没有 index 属性或 input 属性。如图(3)
获取请求参数地址:
/**
* 获取请求地址参数
* @param String name
*/
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
// 正则是寻找&+url参数名字=值+&
console.log(reg); // /(^|&)index=([^&]*)(&|$)/
var search = encodeURI(window.location.search);
console.log(search); // ?index=1
var r = search.substr(1).match(reg); //匹配目标参数
console.log(r); //["index=1", "", "1", "", index: 0, input: "index=1"]
if (r != null) return decodeURI(unescape(r[2])); return null; //返回参数值
}; var Gindex = getUrlParam("index");
replace()方法
该方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。语法: stringObject.repalce(regexp/substr, replacement); 返回值:一个新的字符串。注意:如果regexp具有全局标识g,那么replace()方法将替换所有匹配的子串。否则它只替换第一个匹配的子串。
split()方法
该方法用于把一个字符串分割成字符串数组。语法: stringObject.split(separator, howmany); 第一个参数:字符串或正则表达式。第二个参数:可选,该参数可指定返回的数组的最大长度。
var str5 = "15hell1o w3o";
console.log(str5.split(/\d+/)); // ["", "hell", "o w", "o"]
// 空字符串("")作为分割,那么字符串每个字符之间都会被分割。
console.log(str5.split("")); //
与正则有关的JS方法结合其在项目中的应用的更多相关文章
- Immutable.js 以及在 react+redux 项目中的实践
来自一位美团大牛的分享,相信可以帮助到你. 原文链接:https://juejin.im/post/5948985ea0bb9f006bed7472?utm_source=tuicool&ut ...
- C#后台程序与HTML页面中JS方法互调(功能类似于Ajax中的DWR)
此方法适用于 C#中嵌入WebBrowser(浏览器) 通过浏览器中加载的页面与C#的后台代码进行交互. 一.C#程序 1.在C#窗体中添加WebBrowser(浏览器),将页面的URL添加到浏览器中 ...
- linux 下用renameTo方法修改java web项目中文件夹名称问题
经测试,在Linux环境中安装tomcat,然后启动其中的项目,在项目中使用java.io.File.renameTo(File dest)方法可行. 之前在本地运行代码可以修改,然后传到Linux服 ...
- 了解CSS in JS(JSS)以及在React项目中配置并使用JSS
目录 认识JSS 什么是JSS JSS 的常见实现 JSS 的好处与坏处 好处 坏处 使用模块化CSS实现JSS 安装插件 在React项目中的tsconfig.json中添加配置 vscode项目中 ...
- 三种JS方法确定元素在数组中的索引值
第一种:数组遍历 function search(arr,dst){ var i = arr.length; while(i-=1){ if (arr[i] == dst){ return i; } ...
- eclipse 修改js文件无法编译到项目中
1.场景重现 在今天修改js文件完善功能时,发现在eclipse中修改了文件后,刷新页面功能无法同步: 2.分析原因 查看编译路径,文件没有修改: 2.1 可能是缓存问题: 2.2 项目未编译: 3. ...
- 客户端调用web中js方法(C调B)跨域问题
这几天遇到了个棘手问题(c调b),经过排错查出了问题. 一,问题描述如下: 1.客户端需要调用father.html中一个js方法,特殊之处在于 这个father.html中有个iframe嵌套了一个 ...
- 项目中解决实际问题的代码片段-javascript方法,Vue方法(长期更新)
总结项目用到的一些处理方法,用来解决数据处理的一些实际问题,所有方法都可以放在一个公共工具方法里面,实现不限ES5,ES6还有些Vue处理的方法. 都是项目中来的,有代码跟图片展示,长期更新. 1.获 ...
- react项目中引入了redux后js控制路由跳转方案
如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...
随机推荐
- 让开发部署提速 8 倍,我参与贡献这款 IDE 插件的全过程
如何像参与开源那样,去参与一款 IDE 插件的设计? 作为一款 IDE 插件的使用者,我是否能决定下一个版本的功能? 自从产品经理银时小伙和他的开发小哥们在去年12月发布 Cloud Toolkit( ...
- 25-1 request模块介绍
requests模块 - 基于如下5点展开requests模块的学习 什么是requests模块 requests模块是python中原生的基于网络请求的模块,其主要作用是用来模拟浏览器发起请求.功能 ...
- day10-02_多线程之进程与线程的pid
一.多个线程之间PID的区别 主进程跟线程的pid是一样的 from threading import Thread from multiprocessing import Process impor ...
- This cache store does not support tagging.
用户权限管理系统 https://github.com/Zizaco/entrust 再添加角色的时候... 报了一个错.. BadMethodCallException in Repository. ...
- python3中的zip函数
zip函数的作用: zip函数接受任意多个可迭代对象作为参数,将对象中对应的元素打包成一个tuple,然后返回一个可迭代的zip对象. 这个可迭代对象可以使用循环的方式列出其元素 若多个可迭代对象的长 ...
- JVM 调优 —— GC 长时间停顿问题及解决方法
零. 简介 垃圾收集器长时间停顿,表现在 Web 页面上可能是页面响应码 500 之类的服务器错误问题,如果是个支付过程可能会导致支付失败,将造成公司的直接经济损失,程序员要尽量避免或者说减少此类情况 ...
- HZOJ 寿司
这题也是挺神仙的,现在O(n)的解法还没打出来,只是用O(nlogn)卡过去了(理论上可以过),sdfz某大佬用三分拿到了65分…… 考试连暴力都没打出来…… n2暴力T40: 首先将环拆成链,我们可 ...
- Browse W3C's Open Source Software
https://www.w3.org/Status.html Browse W3C's Open Source Software Amaya - a Web browser/editor First ...
- HTML打印print
上代码: //打印 function printme() { global_Html = document.body.innerHTML; //document.body.innerHTML = do ...
- dev stg prd 开发 测试 生产环境
dev development 开发环境stg stage 测试环境prd product 线上环境