交互: 当用户对网页上的表单超链进行鼠标和键盘操作,网页将根据用户的不同操作反馈相应的信息
双向的信息传递
正则表达式
功能: 匹配字符
通配符匹配技术 按照某种规则去匹配符合条件的字符串
小写和大写是与非的关系
字符类
^ 开头
$ 结尾
\b 单词边界
\B 非单词边界
\w 匹配任何ASCII单字符 [a-zA-Z0-9]
\W 匹配任何ASCII单字符之外的字符
\s 匹配任何Unicode空白符
\S 匹配任何Unicode空白符之外的字符
\d 匹配任何数字[0-9]
\D 匹配任何数字之外的字符
[...] 匹配方括号中的所有字符
[^...] 匹配非方括号中的所有字符
. [^\r\n] 除了回车换行符之外的所有字符
\u4e00-\u9fa5 汉字
重复类
{n} 匹配前一项n次
{n,} 匹配前一项至少n次,至多不限
{n,m}匹配前一项至少n次 至多m次
? 匹配前一项0次或者1次
+ 匹配前一项至少1次
* 匹配前一项0次或者多次
贪婪模式 (尽可能多的匹配直到匹配失败)(默认)
非贪婪模式 (让正则表达式尽可能少的匹配,一旦成功匹配不再继续尝试)
在量词后面加 ? 即可
"123456".match(/\d{2,4}/); //12
反向引用
"2015-12-24".replace(/(\d{4})-(\d{2})-(\d{2})/,"$2/$3/$1");
//"12/24/2015"
选择符
| 分割可以用来选择的文字
eg: var re= /a|b/i 匹配 a字符或者b字符
定位符
^ 匹配 字符串的开头 var re=/^a/i 必须匹配 字符串开头的a
$ 匹配字符串的结尾 var re=/a$/i 必须匹配字符串结尾的a
\b 匹配一个单词的边界
\B 与\b相反,匹配一个非单词边界
分组
(...) 将几个项目组合成一个单元
(?: ...) 与(...)类似,只是不记忆与该组合所匹配的内容
| 或
标志
i 匹配时不区分大小写
g 匹配时执行全局匹配
m 匹配时执行多行匹配
前瞻
正则表达式从文本头部向尾部开始解析,文本尾部方向称为"前"
前瞻就是正则表达式匹配到规则的时候,向前检查是否符合断言
后顾/后瞻方向相反
Javascript 不支持后顾
符合和不符合特定断言称为肯定/正向匹配 和 否定/负向匹配
断言: (并不参与替换)
正向前瞻 : exp(?=assert)
负向前瞻: exp(?!assert)
"a2*3".replace(/\w(?=\d)/g,"x");
// "x2*3"
正则表达式的对象属性
global : 是否全文搜索 默认false
ignore case: 是否大小写敏感 默认false
multiline: 多行搜索 默认是false
laseIndex: 当前表达式匹配内容的最后一个字符的下一个位置
source: 正则表达式的文本字符串
方法
test() 用于测试字符串参数中是否存在匹配正则表达式模式的字符串
每使用一次同一个全文搜索的正则表达式的变量,会改变lastIndex属性
var reg2=/\d/g;while(reg2.test("12")){ console.log(reg2.lastIndex)}
//1 2
exec() 执行正则表达式的匹配,返回一个数字
使用正则表达式模式对字符串执行搜索,并将更新全局RegExp对象的属性以反映匹配结果。
如果没有匹配的文本则返回null,否则返回一个结果数组 :
index 生命匹配文本的第一个字符的位置
input 存放被检索的字符串string
非全局调用
非全局的RegExp对象的exec()时,返回数组
第一个元素是与表达式相匹配的文本
第二个元素是与RegExpObject的第一个子表达式相匹配的文本(如果有的话)
第三个元素 - - - - - - - - - - - - - - - - -第二个- - - - - - - -
var reg3=/\d(\w)\d/; var ts="1a2b3c4d43"; var ret=reg3.exec(ts); // ["1a2","a"] 返回一个数组,数组有两个对象 console.log(reg3.lastIndex+"\t"+ret.index+"\t"+ret.toString()); // 0 0 1a2 a //在非全局exec()下lastIndex 不生效
全局调用
1 var reg4=/\d(\w)(\w)\d/g; 2 var ts="$1az2bb3cy5dd5ee"; 3 4 while(ret=reg4.exec(ts)){ 5 console.log(reg4.lastIndex+"\t"+ret.index+"\t"+ret.toString()); 6 }
console.log(ret);
// ["1az2", "a", "z", index: 1, input: "$1az2bb3cy5dd5ee"] 7 //5 1 1az2,a,z 8 //11 7 3cy5,c,y
toSource() 返回RegExp对象的源代码
toString() 将RegExp 对象转换成字符串
字符串对象和正则表达式相关的方法
search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串
方法返回第一个匹配结果index,有多个则返回第一个,查找不到返回 -1
search()方法不执行全局匹配,它忽略标志g,并且总是从字符串的开始进行检索
match() 方法将检索字符串,以找到一个或多个与regexp匹配的文本
regexp 是否具有标志g对结果影响很大
非全局调用
如果regexp没有标志g,那么match()方法就只能在字符串中执行一次匹配
如果没有找到任何匹配的文本,将返回null
否则它将返回一个数组,其中存放了与它找到的匹配文本有关的信息
返回数组的第一个元素存放的是匹配文本,而其余的元素存放的是与正则表达式的子表达式匹配的文本
除了常规的数组元素之外,返回的数组还含有2个对象属性
index: 声明匹配文本的起始字符在字符串的位置
input: 声明对stringObject 的引用 与 reg.exec()结果相同
var ts="$1a2b3c4d5e"; var reg3=/\d(\w)\d/; var ret=ts.match(reg3); conole.log(ret)
//["1a2", "a", index: 1, input: "$1a2b3c4d5e"] console.log(ret.index+"\t"+reg3.lastIndex) // 1 0
全局调用
如果 regexp 具有标志g 则match()方法将执行全局检索,找到字符串中的所有匹配子字符串
- 没有找到任何匹配的子串,则返回null
- 如果找到了一个或多个匹配子串,则返回一个数组
数组元素中存放的是字符串中所有的匹配子串,而且没有index和input属性
没有分组信息
var reg4=/\d(\w)\d/g; var ts="$1a2b3c4d5e"; var ret=ts.match(reg4); console.log(ret); // ["1a2", "3c4"] console.log(ret.index+"\t"+reg4.lastIndex) // undefined 0
Split()
我们经常使用split 方法把字符串分割为字符数组
console.log("a,b,c,d".split(","));
//["a","b","c","d"]
console.log("a1b2c3d".split(/\d/)); 2 // ["a","b","c","d"]
replace()
string.prototype.replace(str,replaceStr);
string.prototype.replace(reg,replaceStr);
"a1b1c1".replace("1",2); //"a2b1c1" "a1b1c1".replace(/1/g,2); //"a2b2c2"
string.prototype.replace(reg,function);
function 参数含义: function会在每次匹配替换的时候调用,有四个参数
1. 匹配字符串
2. 正则表达式分组内容,没有分组则没有该参数
3. 匹配项在字符串中的index
4. 原字符串
1 "a1b2c3d4e5".replace(/(\d(\w(\d)/g, 2 function(match,group1,group2,group3,index,origin){ console.log(match); 3 return group1; }) 4 //1b2 5 //3d4 6 //"a1c3e5" 7 "a1b2c3d4e5".replace(/(\d(\w(\d)/g, 8 function(match,group1,group2,group3,index,origin){ console.log(match); 9 return group2; }) 10 //1b2 11 //3d4 12 //"abcde5" 13 13 function(match,group1,group2,group3,index,origin){ console.log(match); 14 return group3; }) 15 //1b2 16 //3d4 17 //"a2c4e5"