web前端之JavaScript正则表达式

web前端之JavaScript正则表达式

后面有代码:

\d 表示数字
\d? ?表示0个或者一个
\d+ +表示一个或者多个
\d{3} 表示三个
\d{3,5} 表示三到五个
\d{3,} 表示至少出现3次
\d* *表示0到任意个
\b 表示单词边界
\B 表示非单词边界
\bis\b 表示查找“ is ”的
. 表示任意字符
\ 表示转译
http:(\/\/.+\.jpg) 用()进行分组
$1 获取其内部东西

[]表示或
^表示开头
$表示结尾
g表示全局
\d{4}[/-]\d{2}[/-]\d{2}
\w 表示一个单词字符

字面量:var reg=/\bis\b/g;
构造函数:var reg=new RegExp(‘\\bis\\b‘,‘g‘);
修饰符:
g:global全文搜索;不添加,搜索到第一个匹配停止
i:ignore case忽略大小写,不添加,大小写敏感
m:multiple lines多行搜索

子符类:‘a1b1c1d3f3‘.replace(/[abc]/g,‘X‘)
字符类取反:‘a1b1c1d3f3‘.replace(/[^abc]/g,‘X‘)
范围类:‘a1b1c1d1f1e1asd‘.replace(/[a-z]/g,‘Q‘);
很多个范围类:‘a1b1c1d1f1e1asdABGS123BGJS‘.replace(/[a-zA-Z]/g,‘Q‘);
在选择多个范围类的时候需要匹配“-”,那就在最后添加“-”就可以了:‘2010-07-08‘.replace(/[0-9-]/g,‘A‘);

预定类:匹配一个 ab+数字+任意字符  的字符串:ab\d.

边界:‘This is a boy‘.replace(/\Bis\b/g,‘0‘)
@开始:‘@[email protected]@‘.replace(/^@./g,‘Q‘)
@结束:‘@[email protected]@‘.replace(/[email protected]$/g,‘Q‘)
多行匹配:
‘@123
@456
@789‘.replace(/^@\d/gm,‘X‘)

量词:
\d 表示数字
\d? ?表示0个或者一个
\d+ +表示一个或者多个
\d{3} 表示三个
\d{3,5} 表示三到五个
\d{3,} 表示至少出现3次
\d* *表示0到任意个

正则表达式贪婪模式:
‘12345678‘.replace(/\d{3,6}/g,"A");

非贪婪模式(后面加一个“?”就可以了):
‘123456789‘.match(/\d{3,5}?/g)

分组:
‘a1b1c1d1‘.replace(/[a-z]\d{3}/g,"X")
"a1b1c1d1"
‘a1b1c1d1‘.replace(/([a-z]\d){3}/g,"X")
"Xd1"

或:
‘AbcdEf‘.replace(/Abcd|Ef/g,‘X‘);
"XX"
‘AbcdEfAbabEf‘.replace(/Ab(cd|ab)Ef/g,‘X‘);
"XX"

反向引用:
‘2016-12-21‘.replace(/(\d{4})-(\d{2})-(\d{2})/g,‘$2-$3-$1‘)
"12-21-2016"

前瞻(前面一个单词字符后面一个数字):
‘a2*3‘.replace(/\w(?=\d)/g,‘X‘)
"X2*3"
‘a2*34V8‘.replace(/\w(?=\d)/g,‘X‘)
"X2*X4X8"
‘a2*34VV‘.replace(/\w(?=\d)/g,‘X‘)
"X2*X4VV"
‘a2*34VV‘.replace(/\w(?!\d)/g,‘X‘)
"aX*3XXX"

对象属性:
g:global全文搜索;不添加,搜索到第一个匹配停止
i:ignore case忽略大小写,不添加,大小写敏感
m:multiple lines多行搜索
lastIndex:是当前表达式匹配内容的最后一个字符的下一个位置
source:正则表达式的文本字符串

test方法:
var reg1=/\w/;
var reg2=/\w/g;
reg1.test(‘a‘);
true
reg1.test(‘$‘);
false
reg2.test(‘a‘);
true
reg2.test(‘a‘);
false
reg2.test(‘a‘);
true
reg2.test(‘a‘);
false
while(reg2.test(‘ab‘)){
    console.log(reg2.lastIndex);
}

exec方法:
非全局调用:
var reg3=/\d(\w)\d/;
var reg4=/\d(\w)\d/g;
var ts=‘1a2b3c4d5e‘;
var ret=reg3.exec(ts);
console.log(reg3.lastIndex + ‘\t‘ +ret.index+ ‘\t‘ + ret.toString());
console.log(reg3.lastIndex + ‘\t‘ +ret.index+ ‘\t‘ + ret.toString());
while(ret=reg4.exec(ts)){
    console.log(reg4.lastIndex + ‘\t‘ +ret.index+ ‘\t‘ + ret.toString());
}
0   0   1a2,a
0   0   1a2,a
3   0   1a2,a
7   4   3c4,c

非全局下lastIndex不生效
toString()):第一个正则获取的字段,第二个正则中的分组的字段

全局下:
第一个数:第一次获取到之后的,下一个字符的位置
第二个数:从第几个字符后获取到和正则匹配的
第三个数:第一个正则获取的字段,第二个正则中的分组的字段

字符串对象方法:
var reg3=/\d(\w)\d/;
var reg4=/\d(\w)\d/g;
var ts=‘1a2b3c4d5e‘;
var ret=ts.match(reg3);
console.log(ret);
console.log(ret.lastIndex + ‘\t‘ +ret.index+ ‘\t‘);
ret=ts.match(reg4);
var ret=ts.match(reg4);
console.log(ret);
console.log(ret.lastIndex + ‘\t‘ +ret.index+ ‘\t‘);

‘a1b2c3d4‘.split(/\d/g)
时间: 2024-12-21 04:40:14

web前端之JavaScript正则表达式的相关文章

web前端之JavaScript高级程序设计六:事件

web前端之JavaScript高级程序设计六:事件 JavaScript 与 HTML 之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软件工程中被称为观察员模式的模型,支持页面的行为(JavaScript 代码)与页面的外观(HTML 和 CSS 代码)之间的松散耦合. 事件流: 事件流描述的是从页面中接收事件的顺序.但有意思的是, IE 和 Netscape 开发团队居然提出了

Web前端开发JavaScript提高(4)

JavaScript 一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它的解释器被称为JavaScript引擎,是浏览器的一部分,并且是被广泛用于客户端的脚本语言,JavaScript最早是在HTML网页上使用,它是属于网络的脚本语言,现在已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果,通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的,现在随着node.js引擎的出现,使得JavaScript逐步成为

Web前端之javascript

一.javascript的存在形式 方式一: <html> <head> <script> alert('Hello, world'); </script> </head> <body> ... </body> </html> 方式二: <html> <head> <script src="/static/js/abc.js"></script>

Python之路day13 web 前端(JavaScript,DOM操作)

参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容回顾: 1. HTML标签 html/head/body/ input div,span a p br span table > tr行 th表头列 td表头列 h form> action method enctype=;;; select option input系列: text passwo

web前端之JavaScript的变量和数据类型

JavaScript 变量 与代数一样,JavaScript 变量可用于存放值(比如 x=2)和表达式(比如 z=x+y). 变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume). 变量必须以字母开头 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做) 变量名称对大小写敏感(y 和 Y 是不同的变量) 提示:JavaScript 语句和 JavaScript 变量都对大小写敏感 程序演示: 1 <!DOCTYPE html>

web前端之Javascript的输出

操作 HTML 元素 如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法. 请使用 "id" 属性来标识 HTML 元素: 警告: 请使用 document.write() 仅仅向文档输出写内容. 如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖: 程序演示: 1 <!DOCTYPE html> 2 <html> 3 <head> 4

web前端之JavaScript之jquery中的回调函数

回调函数指的是被调用者完成处理后自动回调调用者预先传递的函数. 在类C语言中通常通过函数指针/引用的方式传递. jQuery也提供类似的回调函数机制.但是如何正确传递回调函数仍然值得一提. 在John(jQuery Founder)写的指南中有详细的介绍. 1.不带参数的回调 $.get('myhtmlpage.html', myCallBack); 其中myCallBack是函数名字.函数是javascript的基础.可以当作引用变量一样传递. 2.带参数的回调 很自然的,按照以往的经验,我们

【从0到1学Web前端】javascript中的ajax对象(一)

现在最流行的获取后端的(浏览器从服务器)数据的方式就是通过Ajax了吧.今天就来详细的来学习下这个知识吧.如果使用ajax来访问后段的数据,浏览器和浏览器端的js做了那些工作呢?我做了一个图,请大家看一下: 1.原生js的Ajax请求的方式 由上面的图我们大致的知道了ajax访问后端数据的一个过程.最重要的就是检测浏览器,创建XMLHttpRequest对象的过程: 代码如下: /* 判断是否支持XMLHttpRequest */ function createXHR() { if (typeo

web前端(四)——javascript高级

数组 定义数组的方法 //对象的实例创建 var aList = new Array(1,2,3); //直接量创建(首选) var aList2 = [1,2,3,'asd']; 操作数组中数据的方法 //获取数组的长度 var aList = [1,2,3,4]; alert(aList.length); // 弹出4 //用下标操作数组的某个数据 var aList = [1,2,3,4]; alert(aList[0]); // 弹出1 //将数组成员通过一个分隔符合并成字符串 var