正则表达式
基础认知
## 正则表达式
-表单数据校验
-替换内容
匹配字符串中字符组合的模式:敏感词汇等
创建:
var regexp = new RegExp(/123/);
console.log(regexp);
var regexp2 = /abc/;
console.log(regexp2);
test():检测某字符串是不是符合规则
返回值:true,表示有符合的字符组合
false,无
## 正则表达式的特殊字符
边界符:
^ 匹配行首的文本
$ 匹配行尾的文本
字符类 [] 表示有一系列字符可以选择 只需要匹配一个就可以
var rg = /[xyz]/; //字符串有x、y、z三个其中一个字符
var rg3 = /^[^0-9a-z]$/; // [^]:表示取反
量词类
* 0或多次
+ 1或多次
? 0或1次
{n} 重复n次
{n,} 至少n次
{n,m} n-m次
ex:
var reg = /^c*$/; 严格匹配——表示可以出现0次或多次 /^c{0,}$/
var reg = /^c+$/; 严格匹配——表示可以出现1次或多次 /^c{1,}$/
var reg = /^c?$/; 严格匹配——表示可以出现1次或0次 /^c{0,1}$/
var reg = /^c{3}$/; 严格匹配——表示可以出现3次
var reg = /^c{3,}$/; 严格匹配——表示至少出现3次
var reg = /^c{3,5}$/; 严格匹配——表示出现3次~5次
## 正则表达式测试工具
预定义类:
\d === [0-9]
\D === [^0-9]
\w === [a-zA-Z0-9_]
\W === [^a-zA-Z0-9_]
\s === 匹配空格 [\t\r\n\f] \f:空格符
\S === 匹配非空格字符 [^\t\r\n\f]
案例:
校验北京电话号码:\d{3}-\d{8}|\d{4}-\d{8}
[]——匹配任意字符
{}——出现次数
()——精确匹配次数
var rg = /^[xyz]{3}$/;
console.log(rg.test('xxx'));
console.log(rg.test('xyz'));
console.log(rg.test('zzz'));
console.log(rg.test('zzzx'));
console.log(rg.test('zzzaaa'));
console.log('*******************');
var rg = /^xyz{3}$/;
console.log(rg.test('xxx'));
console.log(rg.test('xyz'));
console.log(rg.test('zzz'));
console.log(rg.test('xyzxyzxyz'));
//xy+z*3
console.log(rg.test('xyzzz'));
console.log('*******************');
var rg = /^(xyz){3}$/;
console.log(rg.test('xyzxyzxyz'));
console.log(rg.test('xyz'));
console.log(rg.test('zzz'));
========================================
true
括号.html:18 true
括号.html:19 true
括号.html:20 false
括号.html:21 false
括号.html:22 *******************
括号.html:25 false
括号.html:26 false
括号.html:27 false
括号.html:28 false
括号.html:30 true
括号.html:31 *******************
括号.html:33 true
括号.html:34 false
括号.html:35 false
案例:
<input type="text" name="" id="uname"><span id="tips"></span>
<script>
var eleInput = document.querySelector('#uname');
var eleSpan = document.querySelector('#tips');
// var rg = /^[a-zA-Z0-9_-]$/;
//检测用户名是否合法
var rg = /^[a-zA-Z0-9_-]{6,16}$/;
eleInput.onblur = function() {
if (rg.test(this.value)) {
eleSpan.className = "right";
eleSpan.innerHTML = "输入合法";
} else {
eleSpan.className = "wrong";
eleSpan.innerHTML = "输入不合法";
}
}
</script>
textarea tips
rows
和cols
属性,用于声明<textarea>
的精确尺寸。这对于一致性非常有帮助,因为不同浏览器的默认值常常不一样。- 位于开始标签和闭合标签之间的默认内容。
<textarea>
不支持value
属性
正则全部替换
eleText.value = eleText.value.replace(/贸易战/gi, '***'); // g: 全局匹配 i: 忽略大小写 gi: 全局匹配 + 忽略大小写
查找连续的四个数字,如:3569
var reg=/\d\d\d\d/gi; \d{4}
查找连续的相同的四个数字,如:1111
var reg=/(\d)\1\1\1/gi;
查找数字,如:1221,3443
Var reg=/(\d)(\d)\2\1/gi;
查找字符,如:AABB,TTMM
Var reg=/(\w)\1(\w)\2/gi;
查找连续相同的四个数字或四个字符
Var reg=/(\w)\1\1\1/gi;
. :匹配除 “\n” 之外的任何单个字符 如果想匹配任意字符 [.\n]
s: 如果设定了此修正符,模式中的圆点元字符(.)匹配所有的字符,包括换行符。
转义需要的转义字符:
(
)
[
]
{
}
\
.
/
*
+
?
^
$