js正则RegExp构造函数属性详解

问个问题

一、(RegExp.$_)、(RegExp["$&"])是什么意思呢?
二、我们经常看到的(RegExp.$1)又代表什么呢?
假如看了上面两个问题,你不清楚是什么意思,没有关系,这篇文章主要是讲这些正则表达式构造函数属性的。其中第一个问题符号代表正则表达式构造函数属性的简写。第二个是用于储存捕获组的构造函数属性。

正则RegExp构造函数属性

关于属性的定义,我在这里在重新提一下:

input (简写为$_) 最近一次要匹配的字符串。
lastMatch(简写$&) 最近一次的匹配项
lastParen(简写$+) 最近一次匹配的捕获组。
leftContext(简写$`) input字符串中lastMatch之前的文本
rightContext(简写$') input字符串中lastMatch之后的文本
multiline(简写$*) 布尔值,表示是否所有表达式都使用多行模式。
举例说明

看定义太痛苦了,我们还是举个例子来看下。

var text ="you are in haorooms 博客,看文章呢";
var pattern =/(.)aorooms/g;
if(pattern.test(text)){
   console.log(RegExp.$_); //you are in haorooms 博客,看文章呢
   console.log(RegExp["$`"]);//you are in
   console.log(RegExp["$'"]);//博客,看文章呢
   console.log(RegExp["$&"]);//haorooms
   console.log(RegExp["$+"]);//h
   console.log(RegExp["$*"]);//false
}
当然,也可以不用简写。(有些属性有浏览器兼容问题,Opera和部分IE不支持)。

另外一个问题,大家也看到了,有的我是用“.”有的是用[],其实作用是一样的。当中文或者特殊符号的时候,我们通常用[]。

存储捕获组的构造函数属性

这些属性的语法是(RegExp.$1,RegExp.$2,RegExp.$3,RegExp.$4,RegExp.$5,RegExp.$6,RegExp.$7,RegExp.$8,RegExp.$9),一共有9个。官方的解释是,这些可以捕获组的字符串的自动填充。其实,说简单的,就是可以获得()括号内匹配的字符串。

例子:

var text ="you are in haorooms 博客,看文章呢";
var pattern =/(.)ao(..)om(.)/g;
if(pattern.test(text)){
   console.log(RegExp.$1);//h
  console.log(RegExp.$2);//ro
  console.log(RegExp.$3);//s
 }

案例1 test方法测试

//test方法,测试字符串,符合模式时返回true,否则返回false 
var re = /he/;//最简单的正则表达式,将匹配he这个单词 
var str = "he";
console.log(re.test(str));//true 
str = "we"; 
console.log(re.test(str));//false 
str = "HE"; 
console.log(re.test(str));//false,大写,如果要大小写都匹配可以指定i标志(i是ignoreCase或case-insensitive的表示) 
re = /he/i; 
console.log(re.test(str));//true 
str = "Certainly!He loves her!"; 
console.log(re.test(str));//true,只要包含he(HE)就符合,如果要只是he或HE,不能有其它字符,则可使用^和$ 
re = /^he/i;//脱字符(^)代表字符开始位置 
console.log(re.test(str));//false,因为he不在str最开始 
str = "He is a good boy!"; 
console.log(re.test(str));//true,He是字符开始位置,还需要使用$ 
re = /^he$/i;//$表示字符结束位置 
console.log(re.test(str));//false 
str = "He"; 
console.log(re.test(str));//true 
//当然,这样不能发现正则表达式有多强大,因为我们完全可以在上面的例子中使用==或indexOf 
re = /\s/;// \s匹配任何空白字符,包括空格、制表符、换页符等等 
str= "user Name";//用户名包含空格 
console.log(re.test(str));//true 
str = "user     Name";//用户名包含制表符 
console.log(re.test(str));//true 
re=/^[a-z]/i;//[]匹配指定范围内的任意字符,这里将匹配英文字母,不区分大小写 
str="variableName";//变量名必须以字母开头 
console.log(re.test(str));//true 
str="123abc"; 
console.log(re.test(str));//false 

案例2 exec测试

var haoVersion = "Haorooms 8";//其中的8表示系统主版本号 
var re = /^[a-z]+\s+\d+$/i; //+号表示字符至少要出现1次,\s表示空白字符,\d表示一个数字 
console.log(re.test(haoVersion));//true,但我们想知道主版本号 
//另一个方法exec,返回一个数组,数组的第一个元素为完整的匹配内容 
re=/^[a-z]+\s+\d+$/i; 
arr = re.exec(haoVersion); 
console.log(arr[0]);//将haoVersion完整输出,因为整个字符串刚好匹配re 
//我只需要取出数字 
re=/\d+/; 
var arr = re.exec(haoVersion); 
console.log(arr[0]);//8 

//exec返回的数组第1到n元素中包含的是匹配中出现的任意一个子匹配 
re=/^[a-z]+\s+(\d+)$/i;//用()来创建子匹配 
arr =re.exec(haoVersion); 
console.log(arr[0]);//整个haoVersion,也就是正则表达式的完整匹配 
console.log(arr[1]);//8,第一个子匹配,事实也可以这样取出主版本号 
console.log(arr.length);//2 
haoVersion = "Haorooms 8.10";//取出主版本号和次版本号 
re = /^[a-z]+\s+(\d+)\.(\d+)$/i;//.是正则表达式元字符之一,若要用它的字面意义须转义 
arr = re.exec(haoVersion); 
console.log(arr[0]);//完整的haoVersion 
console.log(arr[1]);//8 
console.log(arr[2]);//10

案例3 String对象的一些和正则表达式有关的方法

1、关于replace,我之前的一片博客专门写了。还可以传参数。

2、其他操作

//replace方法,用于替换字符串 
var str ="some money"; 
console.log(str.replace("some","much"));//much money 
//replace的第一个参数可以为正则表达式 
var re = /\s/;//空白字符 
console.log(str.replace(re,"%"));//some%money 
//在不知道字符串中有多少空白字符时,正则表达式极为方便 
str ="some some             \tsome\t\f"; 
re = /\s+/; 
console.log(str.replace(re,"#"));//但这样只会将第一次出现的一堆空白字符替换掉 
//因为一个正则表达式只能进行一次匹配,\s+匹配了第一个空格后就退出了 
re = /\s+/g;//g,全局标志,将使正则表达式匹配整个字符串 
console.log(str.replace(re,"@"));//some@some@some@ 
//另一个与之相似的是split 
var str = "a-bd-c"; 
var arr = str.split("-");//返回["a","bd","c"] 
//如果str是用户输入的,他可能输入a-bd-c也可能输入a bd c或a_bd_c,但不会是abdc(这样就说他输错了) 
str = "a_db-c";//用户以他喜欢的方式加分隔符s 
re=/[^a-z]/i;//前面我们说^表示字符开始,但在[]里它表示一个负字符集 
//匹配任何不在指定范围内的任意字符,这里将匹配除字母处的所有字符 
arr = str.split(re);//仍返回["a","bd","c"]; 
//在字符串中查找时我们常用indexOf,与之对应用于正则查找的方法是search 
str = "My age is 18.Golden age!";//年龄不是一定的,我们用indexOf不能查找它的位置 
re = /\d+/; 
console.log(str.search(re));//返回查找到的字符串开始下标10 
//注意,因为查找本身就是出现第一次就立即返回,所以无需在search时使用g标志 
//下面的代码虽然不出错,但g标志是多余的 
re=/\d+/g; 
console.log(str.search(re));//仍然是10

var str = "My name is CJ.Hello everyone!"; 
var re = /[A-Z]/;//匹配所有大写字母 
var arr = str.match(re);//返回数组 
console.log(arr);//数组中只会包含一个M,因为我们没有使用全局匹配 
re = /[A-Z]/g; 
arr = str.match(re); 
console.log(arr);//M,C,J,H 
//从字符串中抽取单词 
re = /\b[a-z]*\b/gi;//\b表示单词边界 
str = "one two three four"; 
console.log(str.match(re));//one,two,three,four

案例4 RegExp对象实例的一些属性

var re = /[a-z]/i; 
console.log(re.source);//将[a-z]字符串输出 
//请注意,直接console.log(re)会将正则表达式连同前向斜线与标志输出,这是re.toString方法定义的 

var re = /[A-Z]/; 
//exec方法执行后,修改了re的lastIndex属性, 
var str = "Hello,World!!!"; 
var arr = re.exec(str); 
console.log(re.lastIndex);//0,因为没有设置全局标志 
re = /[A-Z]/g; 
arr = re.exec(str); 
console.log(re.lastIndex);//1 
arr = re.exec(str); 
console.log(re.lastIndex);//7 

var re = /[A-Z]/; 
var str = "Hello,World!!!"; 
re.lastIndex = 120; 
var arr = re.exec(str); 
console.log(re.lastIndex);//0
案例5 RegExp对象的静态属性

//input 最后用于匹配的字符串(传递给test,exec方法的字符串) 
var re = /[A-Z]/; 
var str = "Hello,World!!!"; 
var arr = re.exec(str); 
console.log(RegExp.input);//Hello,World!!! 
re.exec("tempstr"); 
console.log(RegExp.input);//仍然是Hello,World!!!,因为tempstr不匹配 
//lastMatch 最后匹配的字符 
re = /[a-z]/g; 
str = "hi"; 
re.test(str); 
console.log(RegExp.lastMatch);//h 
re.test(str); 
console.log(RegExp["$&"]);//i  ,$&是lastMatch的短名字,但由于它不是合法变量名,所以要。。 
//lastParen 最后匹配的分组 
re = /[a-z](\d+)/gi; 
str = "Class1 Class2 Class3"; 
re.test(str); 
console.log(RegExp.lastParen);//1 
re.test(str); 
console.log(RegExp["$+"]);//2 
//leftContext  返回被查找的字符串中从字符串开始位置到最后匹配之前的位置之间的字符 
//rigthContext 返回被搜索的字符串中从最后一个匹配位置开始到字符串结尾之间的字符 
re = /[A-Z]/g; 
str = "123ABC456"; 
re.test(str); 
console.log(RegExp.leftContext);//123 
console.log(RegExp.rightContext);//BC456 
re.test(str); 
console.log(RegExp["$`"]);//123A 
console.log(RegExp["$'"]);//C456 

案例6 使用RegExp构造函数注意点

var str = "\?"; 
console.log(str);//只会输出? 
var re = /\?/;//将匹配? 
console.log(re.test(str));//true 
re = new RegExp("\?");//出错,因为字符串里面\是转义字符\?相当于?要得到\?,就要\\?
re = new RegExp("\\?");//正确,将匹配? 
console.log(re.test(str));//true 
在正则表达式中使用特殊字符

//ASCII方式用十六进制数来表示特殊字符 
var re = /^\x43\x4A$/;//将匹配CJ 
console.log(re.test("CJ"));//true 
//也可使用八进制方式 
re = /^\103\112$/;//将匹配CJ 
console.log(re.test("CJ"));//true 
//还可以使用Unicode编码 
re =/^\u0043\u004A$/;//使用 Unicode,必须使用u开头,接着是字符编码的四位16进制表现形式 
console.log(re.test("CJ"));

关于正则RegExp构造函数属性就先说到这里。有问题可以留言交流哦!

时间: 2024-11-05 17:27:10

js正则RegExp构造函数属性详解的相关文章

js兼容的placeholder属性详解_javascript技巧

作为一个.net后台开发的程序猿,博客里既然大多都是前端相关的博文.是不是该考虑换方向了,转前端开发得了 ... 小小吐槽一下,近期受该不该跳槽所困惑,我有选择困难症! 继续前端,这次说一下输入框 placeholder 这个属性. html5 的新属性,就是在输入框没输入值的时候,显示的提示文字(自己的理解),例如: 貌似很好用,但也只能在支持 html 的浏览器版本中显示,而对于不能支持的浏览器版本,让我这种极力追求完美的开发者来说是很不舒服的一件事. 上网找了很多资料,有很多大牛人都已经有

JavaScript精炼之构造函数 Constructor及Constructor属性详解_javascript技巧

除了创建对象,构造函数(constructor) 还做了另一件有用的事情-自动为创建的新对象设置了原型对象(prototype object) .原型对象存放于 ConstructorFunction.prototype 属性中. 例如,我们重写之前例子,使用构造函数创建对象"b"和"c",那么对象"a"则扮演了"Foo.prototype"这个角色: // 构造函数 function Foo(y) { // 构造函数将会以特

JavaScript知识点总结(十一)之js中的Object类详解_javascript技巧

JavaScript中的Object对象,是JS中所有对象的基类,也就是说JS中的所有对象都是由Object对象衍生的.Object对象主要用于将任意数据封装成对象形式. 一.Object类介绍 Object类是所有JavaScript类的基类(父类),提供了一种创建自定义对象的简单方式,不再需要程序员定义构造函数. 二.Object类主要属性 1.constructor:对象的构造函数. 2.prototype:获得类的prototype对象,static性质. 三.Object类主要方法 1

JS中多种方式创建对象详解_javascript技巧

1.内置对象创建 var girl=new Object(); girl.name='hxl'; console.log(typeof girl); 2.工厂模式,寄生构造函数模式 function Person(name){ var p=new Object();//内部进行实例化 p.name=name; p.say=function(){ console.log('my name is '+ p.name); } return p;//注:一定要返回 } var girl=Person('

深入理解JavaScript系列(26):设计模式之构造函数模式详解

 这篇文章主要介绍了深入理解JavaScript系列(26):设计模式之构造函数模式详解,本文讲解了基本用法.构造函数与原型.只能用new吗?.强制使用new.原始包装函数等内容,需要的朋友可以参考下     介绍 构造函数大家都很熟悉了,不过如果你是新手,还是有必要来了解一下什么叫构造函数的.构造函数用于创建特定类型的对象--不仅声明了使用的对象,构造函数还可以接受参数以便第一次创建对象的时候设置对象的成员值.你可以自定义自己的构造函数,然后在里面声明自定义类型对象的属性或方法. 基本用法 在

JavaScript对Json的增删改属性详解_javascript技巧

使用JS对Json数据的处理,项目遇到需要对Json数据进行相关操作,比如增删改操作,本以为会比较难,网上搜索下,发现还是比较简单的,贴一段代码: <script type="text/javascript"> var json = { "age":24, "name":"cst" }; //修改Json中的age值,因为Json中存在age属性 json["age"] = 30; alert(

vue.js+boostrap项目实践(案例详解)_javascript技巧

一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3

在Node.js中使用Javascript Generators详解_javascript技巧

Generators是Javascript的一种协同程序( coroutine 简称:协程)风格,是指那些可以在执行时暂停然后又恢复的函数,该函数是在functi配以星号符号形式如function* ,函数内有些特征关键词如yield 和yield*. function* generatorFn () { console.log('look ma I was suspended') } var generator = generatorFn() // [1] setTimeout(functio

marquee标签属性详解

html教程,marquee标签属性详解. 请大家先看下面这段代码 <marquee direction=up behavior=scroll loop=3 scrollamount=1 scrolldelay=10 align=top bgcolor=#ffffff height=300 width=30% hspace=20 vspace=10 onmouseover=this.stop() onmouseout=this.start()> 此处输入滚动内容 </marquee>