详解JavaScript RegExp对象


Posted in Javascript onFebruary 04, 2017

什么是 RegExp?

正则表达式描述了字符的模式对象。

当您检索某个文本时,可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。

简单的模式可以是一个单独的字符。

更复杂的模式包括了更多的字符,并可用于解析、格式检查、替换等等。

您可以规定字符串中的检索位置,以及要检索的字符类型,等等。

RegExp对象是原生JavaScript中表示正则表达式的对象。

创建对象的方法为:var RegExp = new RegExp(pattern, attributes);

参数pattern指定正则表达式的规则或者表示正则表达式模式的字符串;

参数attributes为可选参数,表示匹配模式的修饰符。包含3个参数:

1.  i:执行对大小写不敏感匹配;

<script text="text/javascript">
var txt = 'Hello World!'

var reg = new RegExp('hello', 'i');

if(reg.test(txt)) {


console.log(txt.match(reg));

}
</script>

2.  g:执行全局匹配(查找所有匹配项而非找到第一个匹配项后停止);

<script text="text/javascript">
  var txt = 'This is just a test.'
  var reg = new RegExp('is', 'g');//区分大小写
  var reg01 = new RegExp('is', 'gi');//不区分大小写
  if(reg.test(txt)) {
    console.log(txt.match(reg));//["is", "is"]
    console.log(txt.match(reg).length);//2
  }
</script>

3.  m:执行多行匹配(若不设置该属性,^($)只与整个被搜索字符串的开始(结尾)位置开始匹配;若设置该属性,^($)还可以与被搜索字符串的“\r”或“\n”之后位置开始匹配)。

<script type="text/javascript">
  //以下代码不能够匹配字符串"an",尽管"an"后面已经换行了,但"an"并不是字符串行的结尾。
  var txt1 = 'This is an\n apple'; 
  var reg1 = /an$/;
  console.log(txt1.match(reg1));//null
  //以下代码能够匹配到字符串"an"
  var txt2 = 'This is an\n apple';
  var reg2 = /an$/m;
  console.log(txt2.match(reg2));//["an", index: 8, input: "This is an↵ apple"]  
  //以下是多行匹配开头示例
  var txt3 = 'This is an\n apple';
  var reg3 = /^\sapp/;
  console.log(txt3.match(reg3));//null
  
  var txt4 = 'This is an\n apple';
  var reg4 = /^\sapp/m;// /^ app/m
  console.log(txt4.match(reg4));//[" app", index: 11, input: "This is an↵ apple"]
</script>

i,g,m三个修饰符可以相互组合同时使用。

以上m修饰符中的示例中var reg4 = /^\sapp/的"\"是一个转义字符,如果使用构造函数创建RegExp对象时,应将正则表达式中的"\"用"\\"进行代替:

<script type="text/javascript">
  var txt4 = 'This is an\n apple';
  var reg4 = new RegExp('^\\sapp', 'm');
  console.log(txt4.match(reg4));//[" app", index: 11, input: "This is an↵ apple"]
</script>

RegExp对象属性

1.global

返回正则表达式是否具有"g"修饰符;

<script type="text/javascript">
  var txt = 'This is just a test';
  var reg = new RegExp('st', 'g');
  if(reg.global) {
    console.log(txt.match(reg));//["st", "st"]
  }
</script>

2.ignoreCase

返回正则表达式是否具有"i"修饰符;

3.multiline

返回正则表达式是否具有"m"修饰符;

4.lastIndex

标记下一次匹配开始时所在字符串的位置;

<script type="text/javascript">
  var txt = 'If you love code, you should code everyday.';
  var reg = new RegExp('ou', 'g');
  var length = txt.match(reg).length;
  for(var i = 0; i < length; i++) {
    reg.test(txt);
    console.log(reg.lastIndex);
  }
</script>

5.source

返回正则表达式进行模式匹配的文本或表达式,返回的文本中不包括修饰符"i","g","m",也不包括正则表达式直接量使用的定界符

<script>
  var reg1 = new RegExp('yoho', 'm');
  var reg2 = new RegExp('\\w');
  var reg3 = /\w/m;
  console.log(reg1.source);//yoho
  console.log(reg2.source);//\w
  console.log(reg3.source);//\w
</script>

RegExp对象方法

1.compile

改变或重新编译正则表达式(Opera浏览器不支持该方法)

对于正则表达式的重新定义,以下方法就可以实现,所以对于此方法的应用场景,我也不是很清楚

<script>
  var reg = new RegExp('ou', 'g');
  reg = /\w/;
</script>

2.exec

检索字符串中正则表达式的匹配结果

<script>
  var txt = 'If you love code, you should code everyday.';
  var reg = new RegExp('ou', 'g');
  var length = txt.match(reg).length;
  for(var i = 0; i < length; i++) {
    console.log(reg.exec(txt));
  }
</script>

3.test

检测字符串是否与匹配正则表达式匹配

<script>
  var txt = 'I code everyday.';
  var reg = new RegExp('code');
  console.log(reg.test(txt));//true
</script>

以上所述是小编给大家介绍的JavaScript RegExp对象,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
js同时按下两个方向键
Dec 01 Javascript
jquery $.ajax相关用法分享
Mar 16 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
Apr 02 Javascript
JS实现div居中示例
Apr 17 Javascript
JS清除选择内容的方法
Jan 29 Javascript
javascript常用的方法整理
Aug 20 Javascript
js识别uc浏览器的代码
Nov 06 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 Javascript
JS查找字符串中出现最多的字符及个数统计
Feb 04 #Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 #Javascript
纯js模仿windows系统日历
Feb 04 #Javascript
canvas的神奇用法
Feb 03 #Javascript
Jquery实现跨域异步上传文件总结
Feb 03 #Javascript
js 递归和定时器的实例解析
Feb 03 #Javascript
js实现文本上下来回滚动
Feb 03 #Javascript
You might like
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
JavaScript自定义数组排序方法
2015/02/12 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
2015/10/13 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
webpack4之如何编写loader的方法步骤
2019/06/06 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
用js编写留言板
2020/03/17 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
Python输出各行命令详解
2018/02/01 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
django 单表操作实例详解
2019/07/30 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
python通过cython加密代码
2020/12/11 Python
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
世界经理人咨询有限公司面试
2014/09/23 面试题
公务员转正考察材料
2014/02/07 职场文书
人力资源主管的岗位职责
2014/03/15 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
家长通知书家长意见
2015/06/03 职场文书
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS