复习字符串操作:
search 查找
substring 获取子字符串
charAt 获取某个字符
split 分割字符串,获取数组
1 var str = 'abcdefghijk'; 2 alert(str.search('b')); //返回1,表示b在字符串中的位置是1,不存在的字符返回-1 3 alert(str.substring(2,5)); //包含开头不包含结尾,所以返回cde 4 alert(str.substring(3)); //返回defghijk 5 alert(str.charAt(3)); //d 6 alert(str.split('')); //返回“a,b,c,d,e,f,g,h,i,j,k”
找出字符串中的所有数字
用传统字符串操作完成
1 //找出str1中的所有数字 2 var str1 = '12 sfdg-=/*sfgh85gdhj8745'; 3 var arr = []; 4 var tmp = ''; 5 6 for (var i = 0; i < str1.length; i++) { 7 if (str1.charAt(i) >= '0' && str1.charAt(i) <= 9) { 8 tmp+=str1.charAt(i); 9 } else { 10 if (tmp){ 11 arr.push(tmp); 12 tmp = ''; 13 } 14 } 15 } 16 if (tmp){ 17 arr.push(tmp); 18 tmp = ''; 19 } 20 alert(arr); //返回12,85,8745
用正则表达式完成
1 var str1 = '12 sfdg-=/*sfgh85gdhj8745'; 2 alert(str1.match(/d+/g)); //返回12,85,8745,其中d表示实数,g=global(全局、全部)
什么是正则表达式:
什么是正则:其实就是一种规则或模式,比如说邮箱的表示规则是:"一串英文、数字和下划线组合@一串英文数字组合.一串英文"
正则表达是也是一种,强大的字符串匹配工具,是一种正常人类很难读懂的文字
RegExp对象
JS风格——new RegExp('a', 'i');
perl风格——/a/i
字符串与正则表达式:
search:字符串搜索
返回出现的位置
忽略大小写:i——ignore
判断浏览器类型
1 // var re = new RegExp('a', 'i'); //最简单的正则表达式,什么也不表示,就表示一个“a”本身,JS风格的写法,其中i=ignore表示忽略大小写 2 var re = /a/i; //另一种写法,意义与上句相同,是一种perl风格的写法,其中i=ignore表示忽略大小写 3 var str = 'abcdef'; 4 alert(str.search(re)); //返回“0”,表示a在字符串的第0位
match:获取匹配的项目
量词:表示个数,即被求项目的个数;
+:表示若干
量词变化:d、dd和d+
全局匹配:g——global
例子:找出所有数字
1 //找第一个数字出现的位置, 2 var str = 'abf ,=-1sdf65'; 3 var re = /d/g; //其中d表示数字,g=global,找到全部 4 alert(str.match(re)); //返回1,6,5 5 6 var re1 = /d+/g; //所以上面不带加号,表示一个数字一个数字获取的,而现在是一串数字一串数字获取的 7 alert(str.match(re1)); //返回1,65
replace
替换所有匹配
返回替换后的字符串
1 //replace的使用 2 var str = 'alghqaerghjcvbagc'; 3 // alert(str.replace('a','0')); //返回0lghqaerghjcvbagc,可见该句只把字符串中的第一个a替换成了0,qita没变 4 5 //当我们用正则表达式时: 6 // var re = /a/; 7 // alert(str.replace(re, '0')); //返回0lghqaerghjcvbagc,与上面一样 8 9 var re = /a/g; 10 alert(str.replace(re, '0')); //返回0lghq0erghjcvb0gc,此时a全部被替换成0
例子:敏感词过滤
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>敏感词过滤</title> 6 <script> 7 window.onload = function () { 8 var oTxt1 = document.getElementById('txt1'); 9 var oTxt2 = document.getElementById('txt2'); 10 var oBtn = document.getElementById('btn1'); 11 12 oBtn.onclick = function () { 13 var re = /a|g|j|d|S/gi; //把agjS作为敏感词过滤掉,g表示全部,i表示忽略大小写,gi或ig不影响 14 15 oTxt2.value = oTxt1.value.replace(re, '***'); 16 }; 17 }; 18 </script> 19 </head> 20 <body> 21 <textarea id="txt1" rows="10" cols="40"></textarea><br> 22 <button id="btn1">过滤</button><br> 23 <textarea id="txt2" rows="10" cols="40"></textarea> 24 </body> 25 </html>
字符串:[]在正则表达式中被称作元字符,具有以下功能
任意字符:
[abc]:表示“或”——任选的意思,即任选一个“[]”内的字母,例子:o[usb]t——ost、obt、out
范围:
[a-z]、[0-9](相当于d)例子:id[0-9]——id0、id5
排除:
[^a](除了a以外的其他字符)例子:o[^0-9]t——oat、o?t、o t(除了数字之外)、[^a-z0-9](除了英文和数字)
组合:
[a-z0-9A-Z]
实例:采集小说,说白了就是偷小说,在原来网站上打开某个小说,然后查看打开网页的源码,然后把文字复制出来。然后再把文本里面掺杂的HTML标签过滤掉,下面是实现方法
自定义innerText方法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>采集网页小说</title> 6 <script> 7 window.onload = function () { 8 var oTxt1 = document.getElementById('txt1'); 9 var oTxt2 = document.getElementById('txt2'); 10 var oBtn = document.getElementById('btn1'); 11 12 oBtn.onclick = function () { 13 var re = /<[^<>]+>/g; //<内部除了“<>”外的所有字符+> 14 oTxt2.value = oTxt1.value.replace(re, ''); 15 }; 16 }; 17 </script> 18 </head> 19 <body> 20 <textarea id="txt1" rows="10" cols="100"></textarea><br> 21 <button id="btn1">过滤</button><br> 22 <textarea id="txt2" rows="10" cols="100"></textarea> 23 </body> 24 </html>
转义字符:
. (点:通配符,表示任意字符):尽量少用或不用,因为容易出错
d(数字,即0-9——[0-9])
w(英文、数字和下划线——[a-z0-9_])
s(空白字符:空格、Tab等)
D(除了数字——[^0-9])
W(除了英文、数字和下划线——[^a-z0-9_])
S(除了空白字符:空格、Tab等)
量词:其实就是指某个值出现的次数
常用量词:
{n,m},至少出现n次,最多m次
{n,} 至少n次
* 任意次,相当于{0,},不建议使用,经常出错,所以几乎用不到
? 0次或一次,即可有可无,等价于{0,1}
+ 一次或任意次,即至少一次,等价于{1,}
{n} 正好出现n次
例子:查找QQ号(目前QQ号大多是为5-11为,且第一个数字不能为0),则有:[1-9]d{4,10}
1 <script> 2 window.onload = function () { 3 var oTxt = document.getElementById('txt1'); 4 var oBtn = document.getElementById('btn1'); 5 6 oBtn.onclick = function () { 7 var txt = oTxt.value; 8 var re = /^[1-9]d{4,10}$/; 9 if (txt.match(re)) { 10 alert("这串数字符合QQ号的规则!"); 11 } else { 12 alert("这串数字不符合QQ号的规则!"); 13 } 14 }; 15 }; 16 </script> 17 <body> 18 <input id="txt1" type="text"/> 19 <button id="btn1">检查一串数字是否符合QQ号的规则</button> 20 </body>
再如:固定电话的号码:区号(第一位为0,共3-4为)(区号可有可无)-号码(一般为8为,首位不能为0)-分机号(一般不超过5位,可有可无),则有:(0d{2,3}-)?[1-9]d{7}(-d{1,5})?
常用正则例子:邮箱(一串英文、数字和下划线组合@一串英文数字组合.一串英文)校验——(w+@[a-z0-9]+.[a-z]——其中“.”表示对“.”的转义,因为“.”在正则表达式中有特殊含义)
行首:字符串的开头,在正则表达式中用“^”表示行首
行尾:字符串的结尾,在正则表达式中用“$”表示行尾
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>邮箱校验</title> 6 <script> 7 window.onload = function () { 8 var oTxt = document.getElementById('txt1'); 9 var oBtn = document.getElementById('btn1'); 10 11 oBtn.onclick = function () { 12 var re = /^w+@[a-z0-9]+.[a-z]+$/i; 13 14 if (re.test(oTxt.value)) { //正则自带测试匹配的函数 test 15 alert("是合法邮箱!"); 16 } else { 17 alert("邮箱不合法!"); 18 } 19 }; 20 }; 21 //但是test()有一个小问题:只要字符串的部分符合要求,它就返回true,所以我们要把行首和行尾封住, 22 // 如“/^w+@[a-z0-9]+.[a-z]+$/i”,意思就是说,只有和行首和行尾中间的东西匹配成功,才表示匹配成功 23 </script> 24 </head> 25 <body> 26 <input id="txt1" type="text"/> 27 <button id="btn1">邮箱校验</button> 28 </body> 29 </html>