创建正则表达式
方式一：通过调用RegExp对象的构造函数创建
var regexp = new RegExp(/123/);
console.log(regexp);
方式二：利用字面量创建 正则表达式
var reg = /abc/; 含义：只要包含abc就可以
test() 正则对象方法，用于检测字符串是否符合该规则，该对象会返回 true 或 false，其参数是测试字符串
var rg = /123/;
console.log(rg.test(123));//匹配字符中是否出现123 出现结果为true
console.log(rg.test('abc'));//匹配字符中是否出现123 未出现结果为false
正则表达式中的特殊字符
个正则表达式可以由简单的字符构成，比如 /abc/，也可以是简单和特殊字符的组合，比如 /ab*c/ 。其中特殊字符也被称为元字符，在正则表达式中是具有特殊意义的专用符号，如 ^ 、$ 、+ 等。 正则表达式：简单字符 和 特殊字符【元字符】 特殊字符非常多，可以参考： MDN jQuery 手册：正则表达式部分 正则测试工具
边界符
正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符 ^ : 表示匹配行首的文本（以谁开始）【/^abc/：以abc为开头】 /：只能是abc】
- 如果 ^和 $ 在一起，表示必须是精确匹配。
var rg = /abc/; // 正则表达式里面不需要加引号 不管是数字型还是字符串型
// /abc/ 只要包含有abc这个字符串返回的都是true
console.log(rg.test('abc'));
console.log(rg.test('abcd'));
console.log(rg.test('aabcd'));
console.log('---------------------------');
var reg = /^abc/;
console.log(reg.test('abc')); // true
console.log(reg.test('abcd')); // true
console.log(reg.test('aabcd')); // false
console.log('---------------------------');
var reg1 = /^abc$/; // 精确匹配 要求必须是 abc字符串才符合规范
console.log(reg1.test('abc')); // true
console.log(reg1.test('abcd')); // false
console.log(reg1.test('aabcd')); // false
console.log(reg1.test('abcabc')); // false
字符类
符类表示有一系列字符可供选择，只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内。
[] 方括号
表示有一系列字符可供选择，只要匹配其中一个就可以了【多选1】
[abcdefg]
var rg = /[abc]/; // 只要包含有a 或者 包含有b 或者包含有c 都返回为true
console.log(rg.test('andy'));//true
console.log(rg.test('baby'));//true
console.log(rg.test('color'));//true
console.log(rg.test('red'));//false
var rg1 = /^[abc]$/; // 三选一 只有是a 或者是 b 或者是c 这三个字母才返回 true
console.log(rg1.test('aa'));//false
console.log(rg1.test('a'));//true
console.log(rg1.test('b'));//true
console.log(rg1.test('c'));//true
console.log(rg1.test('abc'));//true
----------------------------------------------------------------------------------
var reg = /^[a-z]$/ //26个英文字母任何一个字母返回 true - 表示的是a 到z 的范围
console.log(reg.test('a'));//true
console.log(reg.test('z'));//true
console.log(reg.test('A'));//false
-----------------------------------------------------------------------------------
//字符组合
var reg1 = /^[a-zA-Z0-9]$/; // 26个英文字母(大写和小写都可以)任何一个字母返回 true
------------------------------------------------------------------------------------
//取反 方括号内部加上 ^ 表示取反，只要包含方括号内的字符，都返回 false 。
var reg2 = /^[^a-zA-Z0-9]$/;
console.log(reg2.test('a'));//false
console.log(reg2.test('B'));//false
console.log(reg2.test(8));//false
console.log(reg2.test('!'));//true
/^[^a-z]$/：两个^，括号外面的是便边界，括号里面的是取反的含义
量词符
词符用来设定某个模式出现的次数。
量词 说明
* 重复0次或更多次【>=0次】/^[a-z]*$/
+ 重复1次或更多次【>=1次】【/^[a-z]+$/】
? 重复0次或1次
{n} 重复n次
{n,} 重复n次或更多次
{n,m} 重复n到m次
注意：{n,m}n和m之间不准有空格
边界符：^，$
中括号：[]：被中括号包含的东西只能选1个
量词符：*，+，?，{n,m}
-
用户名表单验证
-
功能需求:
- 如果用户名输入合法, 则后面提示信息为: 用户名合法,并且颜色为绿色
- 如果用户名输入不合法, 则后面提示信息为: 用户名不符合规范, 并且颜色为红色
-
<style>
.right {
color: green;
font-weight: bold;
}
.error {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
用户名：<input type="text">
<span></span>
</body>
<script>
// 获取元素
var input = document.querySelector('input');
var span = document.querySelector('span');
//创建正则
var reg = /^[a-zA-Z0-9_-]{6,16}$/;
// 添加事件
input.onblur = function () {
if (reg.test(this.value)) {
span.innerHTML = '输入正确';
span.className = 'right';
}else {
span.innerHTML = '错误内容';
span.className = 'error';
}
}
</script>
括号总结
-
1.大括号 量词符. 里面表示重复次数{}
-
2.中括号 字符集合。匹配方括号中的任意字符. []
-
3.小括号表示优先级()
预定义类
预定义类指的是某些常见模式的简写方式.
