文章目录
正则
-
正则表达式,又名 “规则表达式”
-
由我们自己来书写 “规则”,专门用来检测 字符串 是否符合 “规则” 使用的
-
我们使用一些特殊的字符或者符号定义一个 “规则公式”,然后用我们定义好的 “规则公式” 去检测字符串是不是合格
创建一个正则表达式
- 想制定 “规则”,必须要按照人家要求的方式来制定
- 把一些字母和符号写在
//
中间的东西,叫做正则表达式,比如/abcdefg/
- 创建正则表达式有两个方式 字面量 和 构造函数创建
字面量创建
// 下面就是字面量创建一个正则表达式
var reg = /abcdefg/
- 这个正则表达式就可以去检测字符串了
构造函数创建
// 下面就是构造函数创建一个正则表达式
var reg = new RegExp('abcdefg')
console.log(reg) // /abcdefg/
- 使用构造函数方式创建的和字面量创建的,得到的结果一样
正则表达式里面的符号
元字符
.
: 匹配 非换行 的任意字符,不能有空格,只有换行返回false
,否则返回true
\
: 转译符号- 把有意义的 符号 转换成没有意义的 字符
- 把没有意义的 字符 转换成有意义的 符号
\s
: 匹配 空白 字符(空格/制表符/…)\S
: 匹配 非空白 字符\d
: 匹配 数字,只要内容包含数字就可以\D
: 匹配 非数字\w
: 匹配 数字字母下划线\W
: 匹配 非数字字母下划线
var reg = /\s/; // 匹配空白字符, 只要有就返回true
var str = 'a b';
var str2 = 'ab';
console.log(reg.test(str)); //=> true
console.log(reg.test(str2)); //=> false
var reg = /\d/; // 匹配数字,只要有就返回true
var str = 'abc1';
var str2 = 'abc';
console.log(reg.test(str)); //=> true
console.log(reg.test(str2)); //=> false
let reg2 = /\D/ ; // 匹配非数字,只要有非数字就返回true
console.log( reg2.test( '11111' ) ); //=> false
console.log( reg2.test( '111a11北京' ) ); //=> true
var reg = /\w/; // 匹配数字字母下划线,只要有就返回true
var str = 'a1';
var str2 = '#@$';
console.log(reg.test(str)); //=> true
console.log(reg.test(str2)); //=> false
let reg3 = /./ ; // 匹配非换行的任意字符,只有换行返回false,否则返回true
console.log( reg3.test( 'fdsafdsfa' ) ) ; //=> true
console.log(reg3.test(`<br>`));
//=> 这只是个标签,他只是执行结果是换行,输出还是true
console.log( reg3.test( `
` ) ) ; //=> false
console.log( reg3.test( `
` ) ) ; //=> true
// 这里不只有换行,还有空格
console.log( reg3.test( '\n' ) ) ; //=> false
// 转义符,\n 表示换行
限定符
*
: 前一个内容重复至少 0 次,也就是可以出现 0 ~ 正无穷 次+
: 前一个内容重复至少 1 次,也就是可以出现 1 ~ 正无穷 次?
: 前一个内容重复 0 或者 1 次,也就是可以出现 0 ~ 1 次{n}
: 前一个内容重复 n 次,也就是必须出现 n 次{n,}
: 前一个内容至少出现 n 次,也就是出现 n ~ 正无穷 次{n,m}
: 前一个内容至少出现 n 次至多出现 m 次,也就是出现 n ~ m 次
var reg = /\d*/; // 验证数字出现 0 ~ 正无穷次都可以
console.log(reg.test('abc')); //=> true
console.log(reg.test('abc1')); //=> true
console.log(reg.test('abc123')); //=> true
var reg = /\d+/; // 验证数字出现 1 ~ 正无穷次都可以
var reg = /\d?/; // 验证数字出现 0 ~ 1 次都可以
var reg = /\d{3}/; // 验证数字只出现3次
var reg = /\d{3,}/; // 验证数字出现 3 ~ 正无穷次
var reg = /\d{3,5}/; // 验证数字只能出现 3 ~ 5 次
边界符
-
^
: 表示开头 -
$
: 表示结尾 -
边界符是限定字符串的 开始 和 结束 的
let reg1 = /^a/; // 必须以a字母起始 console.log( reg1.test('bcde') ); //=> false console.log( reg1.test('a321321fdsa') ); //=> true // 必须以a字母结束 let reg2 = /a$/ ; console.log( reg2.test('bcde') ); //=> false console.log( reg2.test('a321321fdsa') ); //=> true // 从开头到结束, 只能有 a 字母, 并且只能有一个 let reg3 = /^a$/ ; console.log( reg3.test('bacsde') ); //=> false console.log( reg3.test('aaa') ); //=> false console.log( reg3.test('a') ); //=> true // 整个字符串 只能有一个数字 let reg4 = /^\d$/ ; console.log( reg4.test('bcde') ) ; //=> false console.log( reg4.test('111') ) ; //=> false console.log( reg4.test('8') ) ; //=> true var reg = /^\d{3,5}$/; //从开头到结尾只能有数字,并且出现 3 ~ 5 次 console.log(reg.test('abc')); //=> false console.log(reg.test('abc123')); //=> false console.log(reg.test('1')); //=> false console.log(reg.test('1234567')); //=> false console.log(reg.test('123')); //=> true console.log(reg.test('12345')); //=> true
特殊符号
()
: 将 () 中的内容作为一个整体判断[]
: 字符集合,表示写在[]
里面的任意一个都行[^内容]
: 反字符集合,表示除了写在[^]
里面的内容之外的任意一个都行-
: 范围,比如a-z
表示从字母 a 到字母 z 都可以|
: 或,正则里面的或:a|b
,表示字母 a 或者 b 都可以
let reg1 = /^(\d{6})|(\w{3})$/ ; // 内容是 6位数字或者 3位字母
let reg2 = /^(\d|\w){6}$/ ; // 内容是 6位数字或字母
let reg2 = /^\d|\w{6}$/ ; // 内容是 1位数字或 6位字母
let reg3 = /^a|b|c$/ ; // 是 a b c 任意一个字符
let reg4 = /^[a,b,c]$/ ; // 是 a b c 任意一个字符
let reg5 = /^a|b|c....|z$/; // 任意的小写英文字符(里面省略号内容要自己补全)
let reg6 = /^[a-z]$/; // 任意的小写英文字符
-
现在我们就可以把若干符号组合在一起使用了
// 下面是一个简单的邮箱验证 // 非_$开头,任意字符出现至少6次,一个@符号,(163|126|qq|sina)中的任意一个,一个点,(com|cn|net)中的任意一个 var reg = /^[^_$].{5,}@(163|126|qq|sina)\.(com|cn|net)$/
标识符
i
: 表示忽略大小写- 这个 i 是写在正则的最后面的
/\w/i
- 就是在正则匹配的时候不去区分大小写
g
: 表示全局匹配- 这个 g 是写在正则的最后面的
/\w/g
- 就是全局匹配字母数字下划线
正则表达式的方法
- 正则提供了一些方法给我们使用
- 用来检测和捕获字符串中的内容的
test
-
test
是用来检测字符串是否符合我们正则的标准 -
语法:
正则.test(字符串)
-
返回值: boolean
- 如果符合,返回值是 true
- 如果不符合,返回值是 false
console.log(/\d+/.test('123')) // true console.log(/\d+/.test('abc')) // false
exec
-
exec
是把字符串中符合条件的内容捕获出来 -
语法:
正则.exec(字符串)
-
返回值: 把字符串中符合正则要求的第一项以及一些其他信息,以数组的形式返回
var reg = /\d{3}/ var str = 'hello123world456你好789' var res = reg.exec(str) console.log(res) /* ["123", index: 5, input: "hello123world456你好789", groups: undefined] 0: "123" groups: undefined index: 5 input: "hello123world456你好789" length: 1 __proto__: Array(0) */
- 数组第 0 项就是匹配到的字符串内容
- index 属性表示从字符串的索引几开始是匹配的到字符串
字符串的方法
- 字符串中有一些方法也是可以和正则一起使用的
search
-
search
是查找字符串中是否有满足正则条件的内容 -
语法:
字符串.search(正则)
-
返回值 : 有的话返回搜索到的第一个字符串对应的索引下标,没有返回 -1
-
效果和
indexOf
相同,只是可以配合正则表达式var reg = /\d{3}/ var str = 'hello123' var str2 = 'helloE' console.log(str.search(reg)); //=> 5 console.log( str.indexOf( '123' ) ); //=> 5 console.log(str2.search(reg)); //=> -1 console.log( str2.indexOf( '123' ) ); //=> -1 console.log( str.search( /E/i ) );//=> 1(查询E或者a, 返回第一个索引下标)
match
-
match
找到字符串中符合正则条件的内容返回 -
语法:
字符串.match(正则)
-
返回值 :
- 没有标示符 g 的时候,是和 exec 方法一样
- 有标示符 g 的时候,是返回一个数组,里面是匹配到的每一项
var reg = /\d{3}/ var str = 'hello123world456' var str2 = 'hello' console.log(str.match(reg)) // ["123", index: 5, input: "hello123wor456", groups: undefined] console.log(str2.match(reg)) // null
var reg = /\d{3}/g var str = 'hello123world456' var str2 = 'hello' console.log(str.match(reg)) // ["123", "456"] console.log(str2.match(reg)) // null
replace
-
replace
是将字符串中满足正则条件的字符串替换掉 -
语法:
字符串.replace(正则,要替换的字符串)
-
返回值 : 替换后的字符串
var reg = /\d{3}/ var str = 'hello123world456' var str2 = 'hello' console.log(str.replace(reg,'666')) //=> hello666world456 console.log(str.replace(reg)) //=> helloundefinedworld456 console.log(str2.replace(reg,'666')) //=> hello var reg = /\d{3}/g var str = 'hello123world456' var str2 = 'hello' console.log(str.replace(reg,'666')) //=> hello666world666 console.log(str2.replace(reg,'666')) //=> hello
正则表达式中的变量解析
带有变量的正则表达式
使用 `` 模板字符串配合 ${} 解析变量,生成字符串格式的正则表达式内容。但结果只是 字符串,没有正则表达式功能, 需要在函数中使用 eval() 来执行字符串,eval() 会 按照 字符串内容 对应的 JavaScript程序来执行。
<body>
<div>abcdefgabcdefgabcdefgabcdefgoldStr</div>
输入您要替换的旧字符 : <input type="text"><br>
输入您要替换的新字符 : <input type="text"><br>
<button>替换</button>
<script>
const oDiv = document.querySelector('div');
const oIptOld = document.querySelectorAll('input')[0];
const oIptNew = document.querySelectorAll('input')[1];
const oBtn = document.querySelector('button');
oBtn.addEventListener('click' , function(){
let oDivStr = oDiv.innerHTML ;
let oldStr = oIptOld.value ;
let newStr = oIptNew.value ;
/*
/oldStr/g 正则表达式不能解析变量,定义的变量名称只会被认为是字符串内容.
1、使用模板字符串和${}解析变量,解析结果是字符串类型,不是正则表达式类型
*/
let reg = `/${oldStr}/g` ;
console.log( reg ) ; //=> /abc/g(黑色的,是字符串类型)
console.log( /a/g ) ; //=> /a/g(橙色的,是正则表达式类型)
/*
reg目前只是字符串格式,没有正则表达式的功能,
需要使用 eval()来执行reg字符串的内容,
eval()会将字符串内容按照可以执行的 JavaScript程序来运行,
也就是将 reg字符串的内容,按照正则表达式的功能来执行
*/
let res = oDivStr.replace( eval(reg) , newStr );
oDiv.innerHTML = res ;
})
console.log( 5+7 ); //=> 12
console.log( eval('5+7') ); //=> 12
</script>
</body>