浅谈Javascript常用正则表达式应用


Posted in Javascript onMarch 08, 2019

模式修饰符的可选参数

  • i: 忽略大小写
  • g: 全局匹配
  • m: 多行匹配
  • /hello/: 两个反斜杠是正则表达式的字面量表示法

两个测试方法

test

const test = new RegExp('hello world', 'ig');
console.log(test.test('hello world')); // true

exec

返回的是数组,有就返回数组的值,没有返回为null

const test = new RegExp('hello world', 'ig');
console.log(test.exec('hello')); // null

四个正则表达式方法

match(pattern)

将所有匹配的字符串组合成数组返回

const pattern=/Box/ig;
const str="This is a Box! The is a box!";
console.log(str.match(pattern));

search(pattern)

返回字符串中pattern开始位置,忽略全局匹配

const pattern=/Box/i;	//
const str="This is a Box! The is a box!";
console.log(str.search(pattern)); // 10

replace(pattern)

替换匹配到的字符串

const pattern=/Box/ig;
const str="This is a Box! The is a box!";
console.log(str.replace(pattern,'Tom'));

split(pattern)

返回字符串指定pattern拆分数组

const pattern = / /ig;	//空格
const str = "This is a Box! The is a box!";
console.log(str.split(pattern)); //以空格进行分割,返回的是数组
// 输出结果
// [ 'This', 'is', 'a', 'Box!', 'The', 'is', 'a', 'box!' ]

匹配模式

\w表示a-zA-Z_
锚元字符匹配(^ $) ^强制收匹配 $强制尾匹配,并且只匹配一个

const pattern=/^[a-z]oogle\d$/;
const str="aoogle2";
console.log(pattern.test(str)); // true

注意: ^符号在[]里面表示 非 在外边表示强制首匹配,并且只匹配一个 要想匹配多个值,使用+
\b表示到达边界

|表示匹配或选择模式

const pattern=/baidu|google|bing/; //匹配或选择其中某个字符,不是相等,包含的意思
const str = "baidu a google"; 
console.log(pattern.test(str)); //返回true

常用正则表达式

检查邮政编码

const pattern = /^[1-9]{1}[0-9]{5}$/;
const str = "122534"; //共6位数,第一位不能为0
console.log(pattern.test(str)); // true

压缩包后缀名
\w等于a-zA-Z0-9_ 使用^限定从首字母匹配 .是特殊符号需要\n进行转义
|选择符必须使用()进行分组

const pattern = /^[\w]+\.(zip|gz|rar)$/; 
const str="a12_.zip"; //文件名 字母_数字.zip,gz,rar
console.log(pattern.test(str)); // true

删除多余空格

方法一: 使用replace只匹配一个,所以使用+匹配多个

var pattern=/^\s+/; 
 var str=" google ";
 var result=str.replace(pattern,'');
 pattern=/\s+$/;
 result=result.replace(pattern,'');

方法二: (.+)贪婪模式,使用惰性模式,后面的空格不让匹配

var pattern=/^\s+(.+?)\s+$/;
 var str=" google ";
 var result=pattern.exec(str,'')[1];

 console.log('|'+result+'|');

方法三: (.+)贪婪模式,改为惰性模式,使用分组模式,只取匹配的内容

var pattern=/^\s+(.+?)\s+$/;
 var str=" google ";
 var result=str.replace(pattern,'$1'); //使用分组模式

 console.log('|'+result+'|'); // |google|

简单邮箱验证

var pattern=/^([\w\.\_]+)@([\w\_]+)\.([a-zA-Z]){2,4}$/;
var str="qzfweb@gmail.com";
console.log(pattern.test(str)); // true

以上所述是小编给大家介绍的Javascript常用正则表达式应用讲解详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
imgAreaSelect 中文文档帮助说明
Oct 08 Javascript
js 代码优化点滴记录
Feb 19 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
jquery实现弹出层登录和全屏层注册特效
Aug 28 Javascript
Angularjs 创建可复用组件实例代码
Oct 09 Javascript
javascript 利用arguments实现可变长参数
Nov 21 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 Javascript
详解vite2.0配置学习(typescript版本)
Feb 25 Javascript
validform表单验证的实现方法
Mar 08 #Javascript
webpack4.x下babel的安装、配置及使用详解
Mar 07 #Javascript
Webpack4 使用Babel处理ES6语法的方法示例
Mar 07 #Javascript
深入理解react 组件类型及使用场景
Mar 07 #Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 #Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 #Javascript
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 #Javascript
You might like
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
php生成圆角图片的方法
2015/04/07 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
javascript之更有效率的字符串替换
2008/08/02 Javascript
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
JS实现的系统调色板完整实例
2016/12/21 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
关于python中导入文件到list的问题
2020/10/31 Python
浅谈HTML5 & CSS3的新交互特性
2016/07/19 HTML / CSS
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
Clearly新西兰:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
单位刻章介绍信范文
2014/01/11 职场文书
办公自动化专业大学生职业规划书
2014/03/06 职场文书
禁毒宣传标语
2014/06/19 职场文书
世界地球日活动总结
2015/02/09 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
采购员工作总结范文
2015/08/12 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android