正则表达式
/*
什么是正则表达式
对字符串内容,进行格式和内容的验证
对于正则表达式,我们不用自己去写,所有常用的正则表达式,在网上都可以搜到
我们只需要能看懂,会使用
所有的计算机语言,正则表达式,都是相同的,通用
*/
// 正则表达式的基本语法
// 1,字面量(常用)
// 使用 // 来包裹表达式内容
// var 变量 = /正则表达式/
// 2,构造函数
// var 变量 = RegExt('正则表达式');
// 正则表达式的使用方法
// 1,验证
// 判断字符串内容是否符合正则表达式的规范
// 执行结果是 布尔类型
// 语法 : 正则表达式.test('字符串内容');
// 2,捕获
// 捕获获取字符串中符合正则表达式规范的内容
// 执行结果是捕获获取到的符合规范的字符串内容
// 语法 : 正则表达式.exec('字符串内容')
常用语法规范
<script>
// 正则表达式,常用语法规范
// 正则表达式中,不要随便写空格,也会作为验证格式的一部分
// 1,元字符
// 使用一些符号,来表示规范
// \d 表示数值,数字,
// \D 表示非数字,
// \w 表示数字,字母,下划线
// \W 表示非数字,字母,下划线
// \s 表示空格
// \S 表示非空格
// . 表示非换行
// 字符串中的换行,使用 转义符 \n 表示
// 提示 正则表达式和转义符,都是 \内容的形式
// JavaScript会自动识别,如果是 \内容 符合正则表达式,就按照正则表达式来执行
// 符合转义符,就按照转义符的形式执行
// 正则表达式和转义符不会冲突
// 只要有数字即可,不用都是数字
var reg1 = /\d/ ;
// console.log(reg1.test('123456')) ;
// console.log(reg1.test('abcd')) ;
// console.log(reg1.test('1234abcd')) ;
var reg2 = /\D/;
// console.log(reg2.test('123456')) ;
// console.log(reg2.test('abcd')) ;
// console.log(reg2.test('1234abcd')) ;
var reg3 = /\w/;
// console.log( reg3.test('123avbc_') );
// console.log( reg3.test('!@#$%^') );
// console.log( reg3.test('1234!@#$%^') );
var reg4 = /\W/;
// console.log( reg4.test('123avbc_') );
// console.log( reg4.test('!@#$%^') );
// console.log( reg4.test('1234!@#$%^') );
var reg5 = /\s/;
// console.log( reg5.test(' ') );
// console.log( reg5.test('312斤kfjisa') );
// console.log( reg5.test('312斤 kfjisa') );
var reg6 = /\S/;
// console.log( reg6.test(' ') );
// console.log( reg6.test('312斤kfjisa') );
// console.log( reg6.test('312斤 kfjisa') );
var reg7 = /./;
console.log( reg7.test('\n') );
</script>
限定符号
<script>
// 限定符号
// 边界符
// ^ 表示开头
// $ 表示结尾
// 以数字开头即可,之后的内容,不做限定
var reg1 = /^\d/;
// console.log(reg1.test('123'));
// console.log(reg1.test('123abc'));
// console.log(reg1.test('abc123'));
// 以数字结尾,就看结尾,之前有什么内容不管
var reg2 = /\d$/;
// console.log(reg2.test('123'));
// console.log(reg2.test('123abc'));
// console.log(reg2.test('abc123'));
// 如果开头结尾都加上了,限定效果就不同了
// 只能有一个字符串,并且这个字符是数字 只能有一个数字字符
// 字符个数,内容,不符合都不行
var reg3 = /^\d$/;
// console.log(reg3.test('1'));
// console.log(reg3.test('-1'));
// console.log(reg3.test('a'));
// console.log(reg3.test('123'));
// console.log(reg3.test('123abc'));
// console.log(reg3.test('abc123'));
// console.log(reg3.test('123abc123'));
// 限定符 限定出现次数
// 一般都要和边界符配合使用,否则执行效果有问题
// * 表示允许的次数是 0 至 正无穷次 有没有都行
// + 表示允许的次数是 1 至 正无穷次 至少有一个
// ? 表示允许的次数是 0 至 1 最多有一次
// {n} 表示允许的次数是 n 次 n的数值,是自定义数值
// {n,} 表示允许的次数是 n 次以上,包括n次 最少是n次,多个不管
// 也就是 n 至 正无穷 次
// {n,m} 表示允许的次数是 n 至 m 次 包括n和m
// 只能是数字字符,字符个数没有要求
var reg4 = /^\d*$/;
// console.log( reg4.test('1') );
// console.log( reg4.test('') );
// console.log( reg4.test('123') );
// console.log( reg4.test('123abc') );
// console.log( reg4.test('123abc123') );
// 必须是数字字符,至少出现1个数字字符
// var reg5 = /^\d+$/;
// console.log( reg5.test('1') );
// console.log( reg5.test('') );
// console.log( reg5.test('123') );
// console.log( reg5.test('123abc') );
// console.log( reg5.test('123abc123') );
// 必须是数字字符,最多只能有0个或者1个字符
var reg6 = /^\d?$/;
// console.log( reg6.test('1') );
// console.log( reg6.test('') );
// console.log( reg6.test('123') );
// console.log( reg6.test('123abc') );
// console.log( reg6.test('123abc123') );
// 只能是3个数字字符
var reg7 = /^\d{3}$/;
// console.log( reg7.test('1') );
// console.log( reg7.test('') );
// console.log( reg7.test('123') );
// console.log( reg7.test('123abc') );
// console.log( reg7.test('123abc123') );
// 必须都是数字字符,并且至少有一个数字字符
var reg8 = /^\d{1,}$/;
// console.log( reg8.test('1') );
// console.log( reg8.test('') );
// console.log( reg8.test('123') );
// console.log( reg8.test('123abc') );
// console.log( reg8.test('123abc123') );
// 都是数字,1至3次
var reg9 = /^\d{1,3}$/;
// console.log( reg9.test('1') );
// console.log( reg9.test('') );
// console.log( reg9.test('123') );
// console.log( reg9.test('123abc') );
// console.log( reg9.test('123abc123') );
</script>
特殊符号
<script>
// 正则表达式的特殊符号
// 1, \ 可以表示正则表达式的规范,或者是转义符
// 设定是不冲突的,符合哪个就执行哪个
// 2, | 表示逻辑或的关系
// 表示两个规范,满足哪个都可以
// 如果要表示多种内容,并且限定字符个数
// 公式 : (内容1|内容2|内容3...){次数限定}
// 3, () 将()中的内容作为一个整体,来执行,确保执行正确
// 4, [] 在[]中设定的内容,任意满足其中一个就可以 abcd
// 5, - 表示在这个范围内的就可以 a-d
// 6, [^内容] 表示 非内容
// 必须写在 / / 之外 /正则表达式/i /正则表达式/g
// 一般是与其他的函数配合使用
// 7, i 忽略大小写
// 7, g 全局匹配
// 逻辑或的判定
// 1,内容的判断,正常的判断
// 2,个数的判断,只要是包含个数就可以
// 内容,可以是数字,字母,下划线,字符只要是3个就行,不能少,可以多
// 实际上是一种错误的语法形式
// var reg1 = /^\d{3}|\w{3}$/;
// 数字或者数字字符下划线,并且个数只能是三个
// var reg1 = /^(\d|\w){3}$/;
// 也可以
var reg1 = /^\d{3}$|^\w{3}$/;
// console.log( reg1.test( '123' ) );
// console.log( reg1.test( 'abc' ) );
// console.log( reg1.test( '1234' ) );
// console.log( reg1.test( 'abcd' ) );
// console.log( reg1.test( '1!1' ) );
// console.log( reg1.test( 'a&b' ) );
// console.log( reg1.test( 'ab' ) );
// console.log( reg1.test( '12' ) );
// console.log( reg1.test( '12&12' ) );
// console.log( reg1.test( 'ab&ab' ) );
// 内容只能是 a b c d 4个字符,多了不可以
var reg2 = /^[abcd]$/;
// console.log( reg2.test('a') );
// console.log( reg2.test('b') );
// console.log( reg2.test('c') );
// console.log( reg2.test('d') );
// console.log( reg2.test('ab') );
// console.log( reg2.test('abc') );
// console.log( reg2.test('abcd') );
// console.log( reg2.test('bc') );
// console.log( reg2.test('bcd') );
// console.log( reg2.test('cd') );
// a-d之间的字符,只能是一个
var reg3 = /^[a-d]$/;
// console.log( reg3.test('a') );
// console.log( reg3.test('b') );
// console.log( reg3.test('c') );
// console.log( reg3.test('d') );
// console.log( reg3.test('ab') );
// console.log( reg3.test('abc') );
// console.log( reg3.test('abcd') );
// console.log( reg3.test('bc') );
// console.log( reg3.test('bcd') );
// console.log( reg3.test('cd') );
// 字符范围不再 a-d 之前,并且是一个字符
var reg4 = /^[^(a-d)]$/;
console.log( reg4.test('a') );
console.log( reg4.test('b') );
console.log( reg4.test('c') );
console.log( reg4.test('d') );
console.log( reg4.test('ab') );
console.log( reg4.test('abc') );
console.log( reg4.test('abcd') );
console.log( reg4.test('bc') );
console.log( reg4.test('bcd') );
console.log( reg4.test('cd') );
console.log( reg4.test('z') );
</script>
其他配合函数
<script>
// 1, search()
// 字符串查找函数,在字符串中,查找是否有符合的内容,如果有,返回下标,没有返回-1
// 返回的是第一个符合内容的索引下标
// indexOf() 也是查找,也返回索引下标,但是不支持正则表达式
var str1 = 'abcdefgab';
// 默认是区分大小写的
// console.log( str1.search('ab') );
// console.log( str1.search('B') );
// 正则表达式,不区分大小写
// console.log( str1.search(/B/i) );
// console.log( str1.indexOf('b') );
// indexOf() 不支持正则表达式
// console.log( str1.indexOf(/B/i) );
// 2, match()
// 找到符合规范的字符串,并且返回内容
// 默认只会执行一次,并且返回第一次符合规范的内容
var str2 = 'abcdefgabcdefg';
var arr1 = str2.match('ab');
// 正则表达式,匹配全局
var arr2 = str2.match(/ab/g);
// console.log(arr1);
// console.log(arr2);
// 3, replace()
// 字符串替换,默认只替换第一个符合的内容
var str3 = 'abcd曹abcd曹abcd曹abcd';
// 默认值替换第一个
// str3 = str3.replace('曹' , '*');
// 正则表达式,替换全局
str3 = str3.replace( /曹/g , '*');
console.log(str3);
</script>
案例替换
</head>
<body>
<div id="box">
<div id="header">
<input name="search" type="text" placeholder="搜索内容" class="search"/>
<input type="button" value="搜索" class="but1"/>
<input type="text" placeholder="替换内容" class="replace"/>
<input type="button" value="替换" class="but2"/>
<input type="button" value="重置" class="but3"/>
</div>
<div id="text">
<p>张家界，原名大庸市，湖南省辖地级市，辖2个市辖区(永定区、武陵源区)、2个县(慈利县、桑植县)。位于湖南西北部，澧水中上游，属武陵山区腹地，
张家界因旅游建市，是中国重要的旅游城市之一是湘鄂渝黔革命根据地的发源地和中心区域。</p>
<p>1982年9月，张家界国家森林公园为第一个国家森林公园</p>
<p>1988年8月，张家界 武陵源被列入国家第二批40处重点风景名胜区之内。1992年，
由张家界武陵源自然风景区被联合国教科文组织列入《世界自然遗产名录》</p>
</div>
</div>
<script>
// 1,实现搜索
// 功能:搜索对应的内容,添加背景颜色
// 原理:替换查找内容,将查找内容,替换为标签+查找内容,并且给标签添加样式
// 步骤:
// 1,获取需要查找的变量
// 2,获取内容
// 3,在内容中进行替换
// 4,将替换好的内容,重新写入标签
// var str = '北京你好';
// var oDiv = document.querySelector('div');
// oDiv.innerHTML = str;
// var oBtn = document.querySelector('button');
// oBtn.addEventListener('click' , function(){
// // 将 字符串北京 替换为 span标签,标签的内容是北京,样式是背景红色
// str = str.replace( '北京' , '<span style="background:red">北京</span>' );
// // 把新的字符串,写入到标签中
// oDiv.innerHTML = str;
// })
// 1,获取标签对象以及数据
// 内容标签
var oText = document.querySelector('#text');
// 搜索input
var oIptSear = document.querySelector('[name="search"]');
// 搜索button
var oBtnSear = document.querySelector('[value="搜索"]');
// 内容标签中的所有相关内容
var str = oText.innerHTML;
// 搜索input的数据,必须是点击 button按钮时获取
// var val = oIptSear.value;
// 给button按钮添加事件
oBtnSear.addEventListener('click' , function(){
// 搜索input的数据
var val = oIptSear.value;
// 执行字符串替换,而且是全局替换
// 先定义正则表达式变量
// 通过模板字符串,解析获取到的input数据变量
// 先在为了解析变量,将 正则表达式,写成字符串的形式
// 看着像是正则,本质还是字符串
// 如果需要当做正则表达式执行,必须使用 eval() 来进行执行运行
var reg = `/${val}/g`;
// 如果没有符合的内容,弹出提示内容
// 先看字符串中是否有符合的内容
// 有内容是 true 没有内容 false
// 没有内容,false 取反! 结果是 true 执行代码
if( !( eval(reg).test(str) ) ){
// 弹出提示内容
window.alert('没有符合的内容');
// 并且终止之后的程序执行
return;
}
// 在 replace() 中, reg这个正则表达式变量,不会解析,因为虽然看起来是一个正则表达式,但是实际上只是一个字符串
// 必须要用 eval() 来解析 reg ,才能执行为正确的正则表达式
// 如果不是用 eval() , replace() 只会将 reg中存储的表示正则表达式的字符串,只是当做字符串处理,不会执行为是正则表达式
// 就相当于 对象.属性不解析变量 对象[属性] 是解析变量的
// 在全局中,查找输入的字符内容,替换为span标签,标签有背景样式设定,内容还是原始搜索内容
// 执行效果是,页面中内容,不变,但是会添加背景颜色
str = str.replace( eval(reg) , `<span style="background:red">${val}</span>` );
// 将字符串写到标签中
oText.innerHTML = str;
})
</script>
