JS前端正则表达式学习笔记(转)

简介: 1.正则表达式的创建: 方法一:以字面量形式来创建 格式为/pattern/flags;其中pattern(模式)为任何简单或者复杂的表达式,可以包括字符类,限定符,分组,向前查找以及反向引用。

1.正则表达式的创建:

方法一:以字面量形式来创建
格式为/pattern/flags;其中pattern(模式)为任何简单或者复杂的表达式,可以包括字符类,限定符,分组,向前查找以及反向引用。每个正则表达式都可以有一个或者多个标识(flags),用以表明表达式的行为。正则表达式的匹配模式支持下列三个标识:
g:(global) 全局模式,即模式将应用于所有的字符串,而非发现第一个匹配项时立即停止;
i: (case-insensitive) 表示不区分大小写模式
m: (multiline)表示多行模式,即在文本的末尾时会继续查找下一行是否存在于模式匹配的项
用法如下:
匹配字符串所有的“at”:
 var pattern1 = /at/g;
匹配字符串第一个“at”:
var pattern2 = /[bc]at/i;
方法二:使用RegExp构造函数来创建
它接受两个参数: 一个是匹配的字符串模式,另一个是可选的标识字符串。
用法如下:
匹配第一个cat或者bat,不区分大小写:
var pattern = new RegExp("[bc]at", "i");
 
2.由于RegExp构造函数的模式的参数是字符串,所以某些情况下要对字符进行双重转义
 
所有元字符都要进行双重转义,那么那些已经转义过的字符也是如此。例如:\n(字符\在字符串中通常被转义为\\,而在正则表达式字符串中会变成\\\\)。下面给出一些模式,左边是字面量,右边是RegExp的
/\[bc\]at/;             "\\[bc\\]at";
/\.at/;                   "/\\.at/";
/name\/age/;         "/name\\/age/";
/\d.\d{1,2}/;        "\\d.\\d{1,2}";
/\w\\hello\\123/;       "\\w\\\\hello\\\\123";
 
3.字面量和构造函数创建正则表达式的区别
 
在ES3中,正则表达式字面量始终会共享一个RegExp实例,而使用构造函数创建的每一个新的RegExp实例都是一个新的实例。但是ES5之后,两者是没有这种区别的。
比如下面例子:
复制代码
var re = null,
i;
for(var i = 0; i < 10; i++) { re = /cat/g; console.log(re.test("catastrophe")); } for(var i = 0; i < 10; i++) { re = new RegExp("cat", "g"); console.log(re.test("catastrophe")); }
复制代码
 
4.RegExp的实例属性
 
RegExp每个实例都具有下面的属性:
global: 布尔值,表示是否设置了g标识
ignoreCase: 布尔值,表示是否设置了i标识
multiline:布尔值,表示是否设置了m标识
lastIndex: 整数,表示开始搜索下个匹配项的字符串的位置,从0开始
source: 正则表达式的字符串表示,按照字面量的形式而非传入构造函数中的字符串模式返回
v
复制代码
ar pattern1 = /\[bc\]at/i;
console.log(pattern1.global);//false
console.log(pattern1.ignoreCase);//true
console.log(pattern1.multiline);//false console.log(pattern1.lastIndex);//0 console.log(pattern1.source); ///\[bc\]at/i var pattern2 = new RegExp("\\[bc\\]at", "i"); console.log(pattern2.global); console.log(pattern2.ignoreCase); console.log(pattern2.multiline); console.log(pattern2.lastIndex); console.log(pattern2.source);
复制代码
我们注意到,第二个模式是使用构造函数,但是他们的source属性是相同的。可见,source属性保存的是规范形式的字符串,即字面量形式所使用的字符串。
 
5.捕获组
 
使用小括号指定一个子表达式后,匹配这个子表达式的文本(也就是此分组捕获的内容)可以在表达式或其它程序中作进一步的处理。默认情况下,每个捕获组会自动拥有一个组号,规则是:从左向右,以分组的左括号为标志,第一个出现的分组的组号为1,第二个为2,以此类推。
比如下面的例子:
var pattern = /mom (and dad (and baby)?)?/gi;
 
6.正则表达式的实例方法
 
1.exec(String testString);
该方法是专门为捕获组而设计的。它接受一个参数,即要应用到模式的字符串,然后返回包含第一个匹配项信息的数组;或者没有匹配项的情况下返回null.返回的数组虽然是Array实例,单包含两个额外的属性: index和input.其中index表示匹配项出现在字符串中的位置,而input表示应用正则表达式的字符串。在数组中,第一项是整个模式匹配的字符串,其他项是与模式中的捕获组匹配的字符串。(如果模式中没有捕获组,则该数组只包含一项)
复制代码
var text = "mom and dad and baby";
var pattern = /mom (and dad (and baby)?)?/gi;
var matches = pattern.exec(text); console.log(matches.index); //0 console.log(matches.input); //mom and dad and baby console.log(matches[0]); //mom and dad and baby console.log(matches[1]); //and dad and baby console.log(matches[2]); //and baby
复制代码
对于exec方法而言,即使在模式中设置了全局标识(g),它每次也只会返回一个匹配项,在不设置全局标识的情况下,在同一个字符串上多次调用exec将会返回第一个匹配项的信息。而在设置全局标志的情况下,每次调用exec则会在字符串中继续查找新的匹配项。如下面的例子:
复制代码
    var text = "cat, bat, sat, fat";
var pattern1 = /.at/;
 
var matches = pattern1.exec(text); console.log(pattern1.lastIndex); //0 console.log(matches.index); //0 console.log(matches[0]); `//cat  matches = pattern1.exec(text); console.log(pattern1.lastIndex); //0 console.log(matches.index); //0 console.log(matches[0]); //cat var pattern2 = /.at/g; matches = pattern2.exec(text); console.log(pattern2.lastIndex); //3 console.log(matches.index); //0 console.log(matches[0]); //cat  matches = pattern2.exec(text); console.log(pattern2.lastIndex); //8 console.log(matches.index); //5 console.log(matches[0]); //bat
复制代码
2.test(String testString)
该方法接受一个字符串参数。在模式与该参数匹配的情况下,返回true,否则,返回false。要想知道目标字符串是否和某个字符串匹配,但不需要其文本内容的情况下,使用这个方法非常方便。因此,test经常用在if语句里。
如下面的例子:
复制代码
var text = "000-00-0000";
var pattern = /\d{3}-\d{2}-\d{4}/;
 
if(pattern.test(text)) { console.log("The pattern is matched"); }
复制代码
RegExp实例继承的toLocaleString和toString方法都会返回正则表达式的字面量;与创建正则表达式的方式无关。例如:
var pattern = new RegExp("\\[bc\\]at", "gi");
console.log(pattern.toString());
console.log(pattern.toLocaleString());
输入都是:/\[bc\]at/gi
 
7.RegExp构造函数属性
RegExp构造函数包含了一些属性(称为静态属性)。这些属性使用于作用域中的所有正则表达式,并且基于所执行的最近一次正则表达式操作而变化。关于这些属性名的另一个特殊之处,就是可以通过两种方式访问他们。换句话说,这些属性分别有个长属性名和一个短属性名。下面给出了RegExp的构造函数的属性:
input                 $_  最近一次要匹配的字符串
lastMatch          $& 最近一次匹配项
lastParen         $+ 最近一次匹配的捕获组
leftContext         $` input字符串中lastMatch之前的文本
rightContext       $' input字符串中 lastMatch之后的文本
multiline             $* 布尔值,表示是否所有表达式都使用多行模式
 
例子如下:
复制代码
var text = "this has been a short summer";
var pattern = /(.)hort/g;
 
if(pattern.test(text)) { console.log(RegExp.input); //this has been a short summer console.log(RegExp.leftContext); //this has been a console.log(RegExp.rightContext);// short summer console.log(RegExp.lastMatch);//short console.log(RegExp.lastParen);//s console.log(RegExp.multiline);//false;  }
复制代码
如前所述,例子使用的长属性名都可以使用相应的短数学迷来代替。只不过这些短属性大多都不是有效的ES标识符,因此必须通过方括号语法来访问他们。如下所示:
复制代码
var text = "this has been a short summer";
var pattern = /(.)hort/g;
 
if(pattern.test(text)) { console.log(RegExp.$_); console.log(RegExp["$`"]); console.log(RegExp["$'"]); console.log(RegExp["$&"]); console.log(RegExp["$+"]); console.log(RegExp["$*"]); }
复制代码
 
RegExp构造函数除了以上几个属性之外,还有多达9个用于存储捕获组的构造韩事故属性。访问这些属性的语法是RegExp.$1, RegExp.$2...RegExp.$9,分别用于存储第一,2...9个匹配的捕获组。在调用exec或者test函数时,这些属性都会自动填充。然后,我们可以像下面这样使用他们。
复制代码
var text = "this has a short summer";
var pattern = /(..)or(.)/g;
 
if(pattern.test(text)) { console.log(RegExp.$1); //sh console.log(RegExp.$2); //t console.log(RegExp.$3); //(空字符串) }
复制代码
 

http://www.cnblogs.com/yugege/p/4821016.html

 

相关文章
|
29天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
26天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
28天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
41 5
|
26天前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
65 1
|
1月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
35 4
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
113 1
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
41 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
1月前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
47 1
|
6月前
|
数据库 Python
Python网络数据抓取(8):正则表达式
Python网络数据抓取(8):正则表达式
64 2
|
6月前
|
自然语言处理 JavaScript 前端开发
Python高级语法与正则表达式(二)
正则表达式描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个条件的子串等。
下一篇
DataWorks