正则入门
正则表达式:验证 字符串是否满足某个规则
// 创建正则表达式
var reg = new RegExp(/'123'/);
console.log(reg); //===>/'123'/
var reg1 = /clx/
// replace(regwx,''/function)
var str = '一半,两半,三半';
// 找到str中所有的'半' 并替换成'个'
// g 全局匹配 在整个字符中匹配
// 没有g 当遇到第一个匹配结果的时候 结束匹配
var reg2 = /[半]/g;
str = str.replace(reg2,'个')
console.log(str);//===>一个,两个,三个
修饰符
// 修饰符:
// g 全局匹配
// i 忽略英文字母大小写
// m 多行匹配
// 注意:修饰符可以多个同时使用
var str = 'aaaaAAAAAabbbbbbbdsfqwerqwe34r23r2342134234fsafsd'
var reg = /[a]/
var reg1 = /[a]/g
var reg2 = /[a]/gi
// str.match(regxp) 返回正则匹配的结果
// 如果没有满足正则条件的,那么返回null
// 用途:
// 1.搜索字符串中是否存在某个字符
// 2.输出正则匹配的所有字符
console.log(str.match(reg)); //==>["a"]
console.log(str.match(reg1)); //==>["a", "a", "a", "a", "a", "a"]
console.log(str.match(reg2)); //==>["a", "a", "a", "a", "A", "A", "A", "A", "A", "a", "a"]
字符类
一般情况下,一个字符对应一个字符串
特殊:需要配[某类]字符
- 使用[]来构建简单的类
- 所谓的类是指符合某些特性的对象;一个泛指:而
不是特定某个字符
例如[abc]匹配 a或b或c中其中一类就可以
例如:a,b,c,ab,ac,bc
/abc/则只能匹配带有abc的字符
var reg = /[中国人]/g
// 匹配的是'中国人'字符
var reg1 = /中国人/g
// 在str中有没有'中,国,人'三个字符
var str = '我在中间的国家的人,是中国人'
// console.log(str.match(reg)); // ====>["中", "国", "人", "中", "国", "人"]
// console.log(str.match(reg1)); // ====>["中国人"]
范围类
var reg3 = /[a-z]/;
var reg4 = /A-Z/;
var reg5 = /[a-zA-Z]/g;
var reg6 = /a-zA-Z/g;
// console.log(str1.match(reg3)); //26个英文小写字母
// console.log(str1.match(reg4)); //只能打印出'A-Z'一样的字符串
// console.log(str1.match(reg5)); //26个英文大小写字母
// console.log(str1.match(reg6)); //只能打印出'a-zA-Z'一样的字符串
// var reg7 = /[1234567890]/
var reg7 = /[0-9]/g //===>'1','2','3','4','5','6','7','8','9','0'中任意一个
var reg8 = /1234567890/g //===>只匹配'1234567890'样式的字符串
// 匹配数字字母下划线中任意一个字符,匹配结果,字符长度为1
var reg9 = /[a-zA-Z0-9_]/g
// console.log(str1.match(reg7)); //==>["0", "8", "9", "3", "4", "2", "5", "6"]
// console.log(str1.match(reg8)); //==>null
// console.log(str1.match(reg9)); //==>打印出str1中所有的数字字母下划线
元字符
. 匹配除换行符以外的任意字符
\w 匹配字母或数字或下划线或汉字
\s 匹配任意的空白符
\d 匹配数字
\b 匹配单词的开始或结束
^ 匹配字符串的开始
$ 匹配字符串的结束
反义代码
\W 匹配任意不是字母,数字,下划线,汉字的字符
\S 匹配任意不是空白符的字符
\D 匹配任意非数字的字符
\B 匹配不是单词开头或结束的位置
[^x] 匹配除了x以外的任意字符
[^aeiou] 匹配除了aeiou这几个字母以外的任意字符
取反
var str = 'fjslajfljwoiAWRTCerio21 34217349,-==+++f'
var reg1 = /[^a-zA-Z]/g // 除了英文字母其他都匹配
console.log(str.match(reg1));
console.log(str.match(/\s/g)); //所有的空格
console.log(str.match(/[' ']/g)); //所有的空格
console.log(str.match(/\S/g)); //所有的非空格字符
console.log(str.match(/[^' ']/g)); //所有的非空格字符
// 删除str所有空格
var res = str.replace(/\s/g, '')
量词
量词:是匹配一个字符的长度多少?
{n,m} 匹配字符长度,在n到m之间
{n,} 匹配字符长度,最小为n
{n} 匹配字符长度为n
+ === {1,}
* === {0,}
? === {0,1 }
注意:以上都是贪婪匹配
var str = '354ij5tgHG'; //待匹配字符
console.log(str.match(/[0-9]+/g))
console.log(str.match(/[0-9]*/g))
console.log(str.match(/[0-9]?/g))
console.log(str.match(/[0-9]+?/g)) //匹配所有长度为1的数字
console.log(str.match(/[0-9]{1,}/g))
console.log(str.match(/[0-9]{1,4}/g))
// 长度为1到6的数字字符
var reg3 = /[0-9]{1,6}/g;
var reg4 = /[0-9]{1,6}[a-z]/g;
console.log(str.match(reg3)); //["354", "5"]
console.log(str.match(reg4)); //["354i", "5t"]
匹配的规律是什么?
计算机中的所有的运算都是从右往左运算的
人的思维运算,都是从左往右运算的
目的:帮助大家理解为什么输出结果,正则运算都是模糊运算
规律
1:待匹配字符 2:匹配的结果
第一步:是什么模式匹配? 贪婪模式 与 非贪婪模式
第二步:看你的表达式中 需要匹配几个字符,每个字符长度是多少?
第三步:正则表达 待匹配字符 从左往右匹配,不回头,被匹配的字符不会再次匹配
// 手机号
// 以数字字符长度为9 结尾
// ^[1] 表示以1开头
// 匹配三个字符
// 第一个字符 以1开头 长度为1 匹配1
// 第二个字符 配置长度为 3或4或5或6 ....
// 第三个字符 匹配0-9长度为9的数字字符结尾
// 表达式接轨 以1开头,九个数字结尾,字符长度为11的字符串
var iphoneReg = /^[1][3-9][0-9]{9}$/;
var str1 = '14583339248'
console.log(str1.match(iphoneReg));
console.log(iphoneReg.test(str1));
// /.*/; //匹配任意字符 长度大于0
// /.+/; //匹配任意字符 长度大于1
//练习:
var res = ' abcdrew yufwqeufdu '
// 去除开头结尾的空格,中间的保留
// | 或
// /^\s*|\s*$/g 匹配开头空格或者结尾空格
// console.log(res.replace(/^\s*|\s*$/g,''))
贪婪模式和非贪婪模式
// 默认贪婪模式
// 量词+? 为非贪婪模式 尽可能少的匹配
// 量词 贪婪模式(默认模式) 尽可能多的匹配
var reg = /\d+/; //贪婪
var reg1 = /[0-9]{3,5}/g; //贪婪模式
var reg2 = /[0-9]{3,5}?/g; //非贪婪模式
var str = '3456rtgyhuj723543523468rtrvgy7256254626'
console.log(str.match(reg1))
console.log(str.match(reg2));
replace使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<h2>{{test}}</h2>
<h3>{{num}}</h3>
</div>
<script>
var data = {
msg: 'hellow world',
test: '这是测试数据',
num: '123'
}
var app = document.querySelector('#app')
var html = app.innerHTML
// 方式一
// var templateReg = /\{\{(.+)\}\}/g
// var arr = html.match(templateReg);
// for (var i = 0; i < arr.length; i++) {
// html = html.replace((/\{\{(.+)\}\}/), function (a) {
// $1 是匹配html的$1
// return data[RegExp.$1]
// })
// }
// app.innerHTML = html
// 方式二
html = html.replace((/\{\{(.+)\}\}/g), function (a) {
// 重新写一个正则,匹配a
var reg = /\{\{(.+)\}\}/;
a.match(reg)
// $1 对于一个字符 匹配对比 , 多次输出最后一次匹配
console.log(RegExp.$1);
//解决方式:匹配多个字符,每个字符匹配一次 解决$1为num
return data[RegExp.$1] //$1是reg匹配a的$1
})
app.innerHTML = html
// 转义字符:{} () / $ # & * . //1、特殊字符,都要加转义\
// 点符号:var reg2=/img\.jpg/g //转义字符 \n //2、.和+是特殊字符,原意匹配要加\转义
// |符号:var reg1=/javascript|php|java/g //3、|表或者
var str = '34567tyguuh88897'
var reg = /\w{3}/g
// replace(reg,callback)
// 正则匹配几次 回调函数执行几次
var res = str.replace(reg, function (a, b, c) {
// console.log(a); //匹配结果
// console.log(b); //从str中开始匹配的索引的位置
// console.log(c); //待匹配字符
//return 将匹配的结果 a替换为返回值
return '哈'
})
console.log(res);
var str1 = ' aaa 1 '
var res1 = str1.replace(/^\s+|\s+$/g,function(a,b){
// console.log(a,b);
// console.log(a.length);
return ''
})
console.log(res1);
</script>
</body>
</html>