在不会正则的时候,我们寻找字符串某些规律或者截取部分特殊字符的时候,我们需要写很多行代码来获取我们想要的字符串,在使用正则之后,代码量会大量简洁很多

1.字符串的比较,判断是否数字类型的字符串,我们用字符编码范围来判断

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script> //alert( 'a'<'b' ); var str = '5'; if( str <= '9' && str >= '0' ){
alert('是数字类型的字符串');
}
else{
alert('不是数字类型的字符串');
} </script>
</head> <body>
</body>
</html>

2.找出字符串中的所有数字,在未使用正则的时候,我们只能通过循环字符串的每个字符,然后找出所有的数字

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script> var str = 'haj123sdk54hask33dkhalsd879'; function findNum(str){ var arr = []; var tmp = ''; for(var i=0;i<str.length;i++){
if( str.charAt(i)<='9' && str.charAt(i)>='0' ){
tmp += str.charAt(i);
}
else{
if(tmp){
arr.push(tmp);
tmp = '';
}
}
} if(tmp){
arr.push(tmp);
tmp = '';
} return arr; } alert( findNum(str) ); //[123,54,33,879] </script>
</head> <body>
</body>
</html>

3.通过正则找出字符串中的所有数字,

/\d+/g  :\d+是至少有1个数字的字符串,g是global缩写,代表找出所有的符合\d+的字符串
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script> var str = 'haj123sdk54hask33dkhalsd879'; function findNum(str){
return str.match(/\d+/g);
} alert( findNum(str) ); //[123,54,33,879] </script>
</head> <body>
</body>
</html>

4.了解正则的含义:

正则 : 也叫做规则,让计算机能够读懂人类的规则

正则都是操作字符串的

5.正则的基本写法

//  或者 new RegExp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script> var arr = [];
var arr = new Array(); var obj = {};
var obj = new Object(); //正则: var re = /a/;
var re = new RegExp('a'); </script>
</head> <body>
</body>
</html>

6.正则的方式之test(test的写法 : 正则.test(字符串))

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script> //test : 正则去匹配字符串,如果匹配成功就返回真,如果匹配失败就返回假 //test的写法 : 正则.test(字符串) /*var str = 'abcdef'; var re = /b/; alert( re.test(str) );*/ //转义字符: //alert('a\nb'); /*n \n
r \r
t \t*/ /*\s : 空格
\S : 非空格
\d : 数字
\D : 非数字
\w : 字符 ( 字母 ,数字,下划线_ )
\W : 非字符*/ var str = '374829348791'; var re = /\D/; if( re.test(str) ){
alert('不全是数字');
}
else{
alert('全是数字');
} </script>
</head> <body>
</body>
</html>

7.正则的方法search(字符串.search(正则))

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script> //search : 正则去匹配字符串 , 如果匹配成功,就返回匹配成功的位置,如果匹配失败就返回 -1 //search的写法 : 字符串.search(正则) //正则中的默认 : 是区分大小写的 //如果不区分大小写的话,在正则的最后加标识 i var str = 'abcdef'; var re = /B/i; //var re = new RegExp('B','i'); alert( str.search(re) ); </script>
</head> <body>
</body>
</html>

8.正则的方法match(字符串.match(正则))

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script> //match : 正则去匹配字符串,如果匹配成功,就返回匹配成功的数组,如果匹配不成功,就返回null //match的写法 : 字符串.match(正则) //正则默认:正则匹配成功就会结束,不会继续匹配
//如果想全部查找,就要加标识 g(全局匹配) //量词 : 匹配不确定的位置
//+ : 至少出现一次 var str = 'haj123sdk54hask33dkhalsd879'; var re = /\d+/g; alert( str.match(re) ); //[1] </script> </head> <body>
</body>
</html>

9.正则的方法replace(字符串.replace(正则,新的字符串))

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script> //replace : 正则去匹配字符串,匹配成功的字符去替换成新的字符串 //replace的写法 : 字符串.replace(正则,新的字符串) var str = 'aaa';
var re = /a+/g; str = str.replace(re,'b'); alert(str); </script>
</head> <body>
</body>
</html>

10.敏感词过滤

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script> //菲称仁爱礁附近17艘中国船均在菲军监视之下 //| : 或的意思 //replace : 第二个参数:可以是字符串,也可以是一个回调函数 window.onload = function(){
var aT = document.getElementsByTagName('textarea');
var oInput = document.getElementById('input1'); var re = /菲称|中国船|监视之下/g; oInput.onclick = function(){ //aT[1].value = aT[0].value.replace(re,'*'); aT[1].value = aT[0].value.replace(re,function(str){
//函数的第一个参数:就是匹配成功的字符 //alert( str ); var result = ''; for(var i=0;i<str.length;i++){
result += '*';
} return result; }); }; }; </script>
</head> <body>
替换前<br />
<textarea>
</textarea><br />
替换后<br />
<textarea>
</textarea><br />
<input type="button" value="确定" id="input1" />
</body>
</html>

11.匹配子项

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script> //匹配子项 : 小括号 () (还有另外一个意思,分组操作) //1+1*2
//(1+1)*2 //把正则的整体叫做(母亲)
//然后把左边第一个小括号里面的正则,叫做这个第一个子项(母亲的第一个孩子)
//第二个小括号就是第二个孩子 var str = '2013-6-7'; var re = /(\d+)(-)/g; str = str.replace(re,function($0,$1,$2){
//第一个参数:$0(母亲),第二个参数 : $1(第一个孩子)
//,第二个参数 : $1(第二个孩子) //alert( $2 ); //return $1 + '.'; return $0.substring(0,$0.length-1) + '.'; }); alert( str ); //2013.6.7 </script>
</head> <body>
</body>
</html>

12.匹配子项

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script> var str = 'abc'; var re = /(a)(b)(c)/; alert( str.match(re) ); //[abc,a,b,c](当match不加g的时候才可以获取到子项的集合) </script>
</head> <body>
</body>
</html>

13.字符类

任意字符
[abc]
例子:o[usb]t——obt、ost、out
范围
[a-z]、[0-9]
例子:id[0-9]——id0、id5
排除
[^a]
例子:o[^0-9]t——oat、o?t、o t
组合
[a-z0-9A-Z]
实例:偷小说
过滤HTML标签
自定义innerText方法


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script> //字符类 : 一组相似的元素 [] 中括号的整体代表一个字符 /*var str = 'abdc'; var re = /a[bde]c/; alert( re.test(str) );*/ //排除 : ^ 如果^写在[]里面的话,就代表排除的意思 /*var str = 'abc'; var re = /a[^bde]c/; alert( re.test(str) );*/ var str = 'abc'; var re = /a[a-z0-9A-Z]c/; alert( re.test(str) ); </script>
</head> <body>
</body>
</html>

14.过滤标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script> window.onload = function(){
var aT = document.getElementsByTagName('textarea');
var oInput = document.getElementById('input1'); //var re = /<\w+>/g; var re = /<[^>]+>/g; oInput.onclick = function(){ aT[1].value = aT[0].value.replace(re,''); }; }; </script>
</head> <body>
替换前<br />
<textarea>
</textarea><br />
替换后<br />
<textarea>
</textarea><br />
<input type="button" value="确定" id="input1" />
</body>
</html>

15.转义字符

转义字符
.(点)——任意字符
\d、\w、\s 、\b
\D、\W、\S 、\B
\1 重复子项
例子
获取class元素
找重复项最多的字符和个数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script> //. : 任意字符
//\. : 真正的点 /*var str = 'a.c'; var re = /a\.c/; alert(re.test(str));*/ //\b : 独立的部分 ( 起始,结束,空格 )
//\B : 非独立的部分 var str = 'onetwo'; var re = /one\b/; alert( re.test(str) ); </script>
</head> <body>
</body>
</html>

16.获取class的方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script> //alert('\''); window.onload = function(){
var aLi = getByClass(document,'box1'); for(var i=0;i<aLi.length;i++){
aLi[i].style.background = 'red';
} /*function getByClass(oParent,sClass){
var arr = [];
var aEle = oParent.getElementsByTagName('*'); for(var i=0;i<aEle.length;i++){
if( aEle[i].className == sClass ){
arr.push( aEle[i] );
}
} return arr; }*/ function getByClass(oParent,sClass){
var arr = [];
var aEle = oParent.getElementsByTagName('*'); //var re = /sClass/; //当正则需要传参的时候,一定要用全称的写法
var re = new RegExp('\\b'+sClass+'\\b'); for(var i=0;i<aEle.length;i++){
if( re.test(aEle[i].className) ){
arr.push( aEle[i] );
}
} return arr; } }; </script>
</head> <body>
<ul>
<li class="box1">111</li>
<li>111</li>
<li class="box1box2">111</li>
<li>111</li>
<li class="box1 box2">111</li>
</ul>
</body>
</html>

17.转义字符

转义字符
.(点)——任意字符
\d、\w、\s 、\b
\D、\W、\S 、\B
\1 重复子项
例子
获取class元素
找重复项最多的字符和个数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script> //\1 : 重复的第一个子项
//\2 : 重复的第二个子项 /*var str = 'abca'; var re = /(a)(b)(c)\2/; alert( re.test(str) );*/ /*var re = /\w\w/; c9
var re = /(\w)\1/; cc 99 <p></p>
<div></div>
*/
</script>
</head> <body>
</body>
</html>

18.找重复项最多的字符和个数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script> var str = 'assssjdssskssalsssdkjsssdss'; var arr = str.split(''); str = arr.sort().join(''); //alert(str); var value = '';
var index = 0; var re = /(\w)\1+/g; str.replace(re,function($0,$1){ //alert($0); if(index<$0.length){
index = $0.length;
value = $1;
} }); alert('最多的字符:'+value+',重复的次数:'+index); </script>
</head> <body>
</body>
</html>

19.量词

什么是量词
出现的次数
{n,m},至少出现n次,最多m次
例子:查找QQ号
常用量词
{n,} 至少n次
* 任意次 {0,}
? 零次或一次 {0,1}
+ 一次或任意次{1,}
{n} 正好n次
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script> //量词 : {} /*{4,7} : 最少出现4次,最多出现7次
{4,} : 最少出现4次
{4} : 正好出现4次 + : {1,} //\d{1,}
? : {0,1} : 出现0次或者1次
* : {0,} : 至少出现0次*/ var str = 'ac';
var re = /ab*/; alert(re.test(str)); </script>
</head> <body>
</body>
</html>

20.判断是不是QQ号

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script> //^ : 正则的最开始位置,就代笔起始的意思
//$ : 正则的最后位置 , 就代笔结束的意思 window.onload = function(){
var aInput = document.getElementsByTagName('input'); var re = /^[1-9]\d{4,11}$/; aInput[1].onclick = function(){ if( re.test(aInput[0].value) ){
alert('是QQ号');
}
else{
alert('不是QQ号');
} }; }; </script>
</head> <body>
<input type="text" /><input type="button" value="确定" />
</body>
</html>

21.去掉前后空格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script> var str = ' hello '; alert( '('+trim(str)+')' ); function trim(str){ var re = /^\s+|\s+$/g; return str.replace(re,''); } //now777@qq.com
//^\w+@[a-z0-9]+(\.[a-z]+){1,3}$ /*var re = {
qq : /[1-9][0-9]{4,9}/,
email : /^\w+@[a-z0-9]+(\.[a-z]+){1,3}$/,
number : /\d+/
}; re.email*/ </script>
</head> <body>
</body>
</html>

22.高级表单验证

高级表单校验
匹配中文:[\u4e00-\u9fa5]
行首行尾空格:^\s*|\s*$
Email:^\w+@[a-z0-9]+(\.[a-z]+){1,3}$
网址:[a-zA-z]+://[^\s]*
QQ号:[1-9][0-9]{4,9}
邮政编码:[1-9]\d{5}
身份证:[1-9]\d{14}|[1-9]\d{17}|[1-9]\d{16}x

23.知识要点

字符串操作包括哪些?举例说明
什么是正则表达式?如何创建正则对象?
正则有几种选项?分别是什么意思?
Test,search、match、replace是做什么的?怎么用?
字符类([])包括几种情况?
正则有哪些转义字符?分别是什么意思?
什么是量词?各个量词分别有什么作用?
举几个正则表达式的例子,比如:邮件、中文等
什么叫“命名空间”,有什么作用?
基础
检测字符串中是否有字母a
检测字符串中是否有数字
找出字符串中所有的数字
必做
将字符串中所有数字都替换成***
删除文本中所有的html标签
将以前所写的所有公共方法放入命名空间
选做
完整的用户表单校验,检查用户的各种输入是否合法
用户名只能是字母、数字和下划线
密码只能是字母,并且两次要相同
邮箱
QQ号只能是数字
年龄只能是数字,并且大于12岁,小于100岁
电话:区号-数字

1.精通前端系列技术之js正则表达式的更多相关文章

  1. 2.精通前端系列技术之JS模块化开发-深入学习seaJs(四)

    深入学习seajs 配置信息 alias : 别名配置 paths : 路径配置 vars : 变量配置 map : 映射配置 preload : 预加载项 debug : 调试模式 base : 基 ...

  2. 2.精通前端系列技术之seajs和gruntJs结合开发(三)

    1.我们先来了解下模块化历史 模块化历史 nodeJS的出现(http://nodejs.org/) commonJS规范(http://www.commonjs.org/) 浏览器JS的模块化? A ...

  3. 3.精通前端系列技术之深入学习Jquery(一)

    使用Jquery的好处: •简化JS的复杂操作 •不再需要关心兼容性(原生js获取元素样式.事件需要做兼容性) •提供大量实用方法 1.选择网页元素 <!DOCTYPE html PUBLIC ...

  4. 2.精通前端系列技术之seajs模块化使工作更简单(二)

    drag.js // JavaScript Document //B开发 define(function(require,exports,module){ function drag(obj){ ; ...

  5. 2.精通前端系列技术之JavaScript模块化开发 seajs(一)

    在使用seajs模块化开发之前,直接在页面引用js会容易出现冲突及依赖相关的问题,具体问题如下 问题1:多人开发脚本的时候容易产生冲突(比如全局参数冲突,方法名冲突),可以使用命名空间降低冲突,不能完 ...

  6. [技术学习]js正则表达式汇总

    一.常用正则表达式关键字 ".":任意字符 "*":任意个数 "+":任意个数,至少一个 "?":0-1个 " ...

  7. 最常用的15个前端表单验证JS正则表达式

    在表单验证中,使用正则表达式来验证正确与否是一个很频繁的操作,本文收集整理了15个常用的JavaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份 ...

  8. 大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app

    大前端技术系列:TWA技术+TensorFlow.js => 集成原生和AI功能的app ( 本文内容为melodyWxy原作,git地址:https://github.com/melodyWx ...

  9. Python之路-(js正则表达式、前端页面的模板套用、Django基础)

    js正则表达式 前端页面的模板套用 Django基础 js正则表达式: 1.定义正则表达式 /.../  用于定义正则表达式 /.../g 表示全局匹配 /.../i 表示不区分大小写 /.../m ...

随机推荐

  1. JAVA学习提高之----安装多个JDK版本的问题

    我的机器上最开始安装的是jdk1.6,后来因为工作需要又安装了jdk1.4.但是,环境变量我并未更改,还是指向jdk1.6的路径的.可是,在cmd窗口输入 Java -version 却得到是1.4. ...

  2. org.apache.hadoop.hbase.TableExistsException: hbase:namespace

    Problem is here : https://community.cloudera.com/t5/Storage-Random-Access-HDFS/HMaster-not-starting- ...

  3. Js_动画显示背景图片

    jAni是一个可以动画显示背景图片的jQuery插件.这个插件基本上是GIF动画的一个替代品,但是他有他的好处.所有浏览器都支持GIF形式的动画格式,而且也不需要额外的javaScript代码和标记. ...

  4. foreach 相关

    20 Nov 08 深入理解PHP原理之foreach 作者: Laruence(   ) 本文地址: http://www.laruence.com/2008/11/20/630.html 转载请注 ...

  5. 日期操作类--GregorianCalendar类

    GregorianCalendar--API JavaTM Platform Standard Ed. 6 GregorianCalendar类 Calendar类实现了公历日历,GregorianC ...

  6. laravel 中 与前端的一些事1

    首先安装node.js 在命令行中敲node -v 可以查看node的版本信息 还需要安装npm,相当于php中的composer node.js中5.0版本后的都已经将npm打包进node了 还要安 ...

  7. Gradle 教程:第一部分,安装【翻译】

    原文地址:http://rominirani.com/2014/07/28/gradle-tutorial-part-1-installation-setup/ 在这篇教程里,我们将主要讲解如何在我们 ...

  8. navigator.userAgent.indexOf来判断浏览器类型

    navigator.userAgent.indexOf来判断浏览器类型 (2011-03-03 11:30:40) 转载▼ 标签: 杂谈   来源:http://xtaai5233.blog.163. ...

  9. js节点问题

    转载 http://dwt1220.blog.51cto.com/1028523/745402 本文出自 “dwt1220” 博客,请务必保留此出处http://dwt1220.blog.51cto. ...

  10. python 练习 16

    #!/usr/bin/python # -*- coding: UTF-8 -*- import time myD = {1: 'a', 2: 'b'} for key, value in dict. ...