正则表达式是字符串(包括普通字符)a 到 z 之间的字母)和特殊字符(称为元字符)的逻辑公式是一个规则字符串,用于表达字符串的过滤逻辑。JavaScript正则表达式也是一种对象。
它经常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单,用户名输入框只能输入英文字母、数字、下划线。昵称输入框中可以输入中文。此外,正则表达式还用于过滤掉页面中的一些敏感词,或从字符串中获取我们想要的特性部分。
1.灵活性强,逻辑性强,功能性强。
2.字符串的复杂控制可以以极简单的方式快速实现。
3.对于刚接触的人来说,比较晦涩难懂。
4.实际开发一般是直接复制的正则表达式,但要求使用正则表达式并根据实际情况进行修改。
//1.利用regexp对象创建正则表达式 var regexp = new RegExp(/123/) console.log(regexp); //2.用字面量创建正则 表达式 var rg = /123/
其中,test该方法用于检测字符串是否符合正则表达式要求。
符合返回true,反之返回false。
如下:
var rg = /123/ console.log(rg.test(123)); console.log(rg.test('abc'));
正则表达式可以由简单的字符串组成,如/abc/。也可以是简单和特殊字符的组合,如/ab*c/.其中,特殊字符又称元字符,是正则表达式中具有特殊意义的特殊符号,如$ ^ 等。
正则表达式中的边界符用于提示字符的位置,主要有两个字符。
注:边界符^假如出现在[ ]内部则表示取反 不同于这里的边界符意义
[ ]只要匹配其中一个,就有一系列的字符可供选择。
如下例子:
// var rg = /abc/ 只要包含abc就可 // 字符类:[ ]只要匹配其中一个,就有一系列的字符可供选择。 var rg = /[abc]/ //只要包含a 或b 或c 都返回true console.log(rg.test('andy')); //true console.log(rg.test('red')); //false console.log(rg.test('box')); //true var rg1 = /^[abc]$/ //只有a 或只有b 或只有c 直到这三个字母返回true console.log(rg1.test('a')); //true console.log(rg1.test('b')); //true console.log(rg1.test('c')); //true console.log(rg1.test('ab')); //false console.log(rg1.test('abcd')); //false console.log(rg1.test('abc')); //false var reg = /^[a-z]$/ //26英文字母 一切都回来了true -表示a到z的范围 console.log(reg.test('a')); //true console.log(reg.test('z')); //true console.log(reg.test('1')); //false console.log(reg.test('A')); //false var reg1 = /^[a-zA-Z0-9-_]$/ //26英文字母(大小写均包含) 0-9 和 - _ 任何一个 console.log(reg1.test('a')); //true console.log(reg1.test(8); //true console.log(reg1.test('); //true console.log(reg1.test('_')); //true console.log(reg1.test('A')); //true var reg2 = /^[^a-zA-Z0-9-_]$/ //在[]内部^表示取反 这里的意思是 不能包含任何描述的内容 console.log(reg1.test('a')); //false console.log(reg1.test(8); //false console.log(reg1.test('); //false console.log(reg1.test('_')); //false console.log(reg1.test('A')); //false
// *相当于 >=0 可出现0次或多次 var reg = /^a*$/ console.log(reg.test('); //true console.log(reg.test('a')); //true console.log(reg.test('aaaaa')); //true console.log('---------------------'); // 相当于 >=1 可以出现 1次或多次 var reg1 = /^a $/ console.log(reg1.test('); //false console.log(reg1.test('a')); //true console.log(reg1.test('aaaaa')); //true console.log('---------------------'); // ?相当于 1 || 0 一次或0次 var reg2 = /^a?$/ console.log(reg2.test('); //true console.log(reg2.test('a')); //true console.log(reg2.test('aaaaa')); //false // {3} 就是重复3次 var reg3 = /^a{3}$/ console.log(reg3.test('); //false console.log(reg3.test('a')); //false console.log(reg3.test('aaa')); //true console.log('---------------------'); // {3,} 大于等于3次 var reg4 = /^a{3,}$/ console.log(reg4.test('); //false console.log(reg4.test('a')); //false console.log(reg4.test('aaa')); //true console.log(reg4.test('aaaaaa')); //true console.log('---------------------'); // {3,15} >=3 && <=16 次 var reg5 = /^a{3,16}$/ console.log(reg5.test('); //false console.log(reg5.test('a')); //false console.log(reg5.test('aaa')); //true console.log(reg5.test('aaaaaa')); //true console.log(reg5.test('aaaaaaaaaaaaaaaaaaaaaaaaa')); //false
将量词与字符结合起来 构成完整用户名单的正则表达式
// 量词: 用来设定某个模式出现的次数。
var reg = /^[a-zA-Z0-9-_]{6,15}$/ //{6,15}的左侧不能有空格
console.log(reg.test('andy123')); //true
console.log(reg.test('007-_AZC')); //true
console.log(reg.test('andy123456!')); //false
console.log(reg.test('andy1234678921521010')); //false
1.大括号、量词符里边表示重复次数。
2.中括号,字符集合,匹配方括号中的任意字符。
3.小括号表示优先级。
这里有相关小括号的例子:
var reg = /^abc{3}$/ //他只是让c重复3次
console.log(reg.test('abccc')); //true
console.log(reg.test('abc')); //true
console.log(reg.test('abcabc')); //false
console.log('-------------------------------');
var reg1 = /^(abc){3}$/
console.log(reg1.test('abccc')); //false
console.log(reg1.test('abc')); //false
console.log(reg1.test('abcabcabc')); //true
利用预定义类进行座机号码验证:
//座机号码验证 两种格式 010-12345678 0530-1234567
var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/ // | 在正则表达式中是或的意思
replace替换:
replace()方法可以实现替换字符串操作,用来替换的参数可以是一个字符串或一个正则表达式。
语法格式:
stringObject.replace(regexp/substr,replacement)
var str = 'andy和baby'
var newStr = str.replace('andy','baby')
console.log(newStr);
它将andy替换成了baby ,不会影响原来的字符串,而是返回一个新的字符串。
/表达式/[switch]
switch也称为修饰符(按照什么样的模式来匹配),有三种值:
p:全局匹配; g是global的意思
i:忽略大小写;
gi:全局匹配+忽略大小写。
例子:将textarea中的内容在按下按钮后替换我们规定的字符为**。并显示在div里。
<!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>
<style>
div {
background-color: #ccc;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<textarea name="" id="" cols="30" rows="10" class="text"></textarea><button>提交</button>
<div></div>
<script>
// var str = 'andy和baby'
// var newStr = str.replace('andy','baby')
// console.log(newStr);
// console.log(str);
var text =document.querySelector('.text')
var btn = document.querySelector('button')
var div = document.querySelector('div')
btn.onclick = function() {
div.innerHTML = text.value.replace(/激情|gay/g,'**')
}
</script>
</body>
</html>
<!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>
<style>
.right {
color: greenyellow;
}
.wrong {
color: red;
}
</style>
</head>
<body>
<input type="text" class="uname"/>
<span>请输入用户名</span>
<script>
// 量词: 用来设定某个模式出现的次数。
var reg = /^[a-zA-Z0-9-_]{6,15}$/ //{6,15}的中间不能有空格
var uname = document.querySelector('.uname')
var span = document.querySelector('span')
uname.onblur = function() {
if(reg.test(this.value)) {
span.innerHTML = '用户名格式输入正确'
span.className = 'right'
} else {
span.innerHTML = '用户名格式输入有误,请重新输入'
uname.value = ''
span.className = 'wrong'
}
}
</script>
</body>
</html>
输入正确时:
输入有误时:
菜鸟工具 - 不止于工具。