正则表达式

目标：1，说出正则表达式的作用
2，能使用一些简单的正则表达式
3，使用正则表达式对表单进行验证
4，使用正则表达式替换内容

正则表达式简介

正则表达式（Regular Expression ：有规则的表达式）是用于匹配字符串组合的模式，在JS中正则表达式也是对象；
作用：字符串匹配，替换，提取等等
正则表达式的特点：
1，灵活性，逻辑性和功能性非常强。
2，可以讯速地简单的方式达到字符串的复杂控制。
3，实际开发，一般复制写好的正则表达式，从网上找，或查手册等；

正则表达式如何使用

1，利用RegExp对象来创建正则表达式
var regexp = new RegExp(/123/);
console.log(regexp);
2,利用字面量创建正则表达式
var rg =/123/;

边界符

两个特殊字符：^ （以什么开头或取反），$ (什么用来结尾)

特殊字符：[] (一系列字符可供选择，字符串中只要有其中一个就返回ture)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>正则表达式</title>
</head><body><script>var rg = /abc/;//正则表达里面不需要加引号，不管是数字型还是字符串型// /abc/只要包含有abc这个字符串返回的都是trueconsole.log(rg.test("abc"));//trueconsole.log(rg.test("abcd"));//trueconsole.log(rg.test("aabcd"));//trueconsole.log("-----------------------1");var reg = /^abc/;//^表示以什么开头,不是边界符则表示取反console.log(reg.test("abc"));//trueconsole.log(reg.test("abcd"));//trueconsole.log(reg.test("aabcd"));//falseconsole.log("-----------------------2");var reg1 = /^abc$/;//$表示以什么结尾，这个正则表达式必须是"abc"才匹配成功console.log(reg1.test("abc"));//trueconsole.log(reg1.test("abcd"));//falseconsole.log(reg1.test("aabcd"));//falseconsole.log(reg1.test("abcabc"));//falseconsole.log("-----------------------3");var rg2 = /[abc]/;//[]表示有一系列字符可供选择，只要匹配其中一个就可以了console.log(rg2.test("andy"));//trueconsole.log(rg2.test("baby"));//trueconsole.log(rg2.test("color"));//trueconsole.log(rg2.test("red"));//falseconsole.log("-----------------------4");var rg3 = /^[abc]$/;//三选一只有是a或者是b或者是c,这个三个字母才返回trueconsole.log(rg3.test("a"));//trueconsole.log(rg3.test("c"));//trueconsole.log(rg3.test("e"));//falseconsole.log(rg3.test("mm"));//falseconsole.log("-----------------------5");var rg4 = /^[a-z]$/;//-表示范围,rg4表示a-z的字符才返回trueconsole.log(rg4.test("a"));//trueconsole.log(rg4.test("A"));//falseconsole.log(rg4.test("g"));//trueconsole.log(rg4.test("gg"));//falseconsole.log(rg4.test("1"));//falseconsole.log(rg4.test("abc"));//falseconsole.log("-----------------------6");var rg5 = /^[a-zA-Z0-9_-]$/;//26个英文字母小写大写都行，数字，下划线，-中的唯一字符返回trueconsole.log(rg5.test("a"));//trueconsole.log(rg5.test("B"));//trueconsole.log(rg5.test("6"));//trueconsole.log(rg5.test("_"));//trueconsole.log(rg5.test("-"));//trueconsole.log(rg5.test("#"));//falseconsole.log(rg5.test("@@"));//falseconsole.log("-----------------------7");var rg6 = /^[^a-zA-Z0-9_-]$/;//第一个^为边界符表以什么开头，第二个^表示取反，rg6表示不能有数字字母下划线console.log(rg6.test("a"));//falseconsole.log(rg6.test("B"));//falseconsole.log(rg6.test("8"));//falseconsole.log(rg6.test("88"));//falseconsole.log(rg6.test("_"));//falseconsole.log(rg6.test("-"));//falseconsole.log(rg6.test("@"));//trueconsole.log(rg6.test("!!"));//falseconsole.log("-----------------------8");</script>
</body></html>

量词符：用来设定某个模式（字符或其它式子）出现的次数

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>正则表达式2_量词符</title>
</head><body><script>var rg = /^a$/;//1， * 相当于式子出现次数可以>=0var rg1 = /^a*$/;console.log(rg1.test(" "));//trueconsole.log(rg1.test("a"));//trueconsole.log(rg1.test("b"));//falseconsole.log(rg1.test("aaa"));//trueconsole.log("---------------1");//2， + 相当于式子出现次数可以>=1var rg2 = /^a+$/;console.log(rg2.test(" "));//falseconsole.log(rg2.test("a"));//trueconsole.log(rg2.test("b"));//falseconsole.log(rg2.test("aaa"));//trueconsole.log("---------------2");//3， ？ 相当于1||0var rg3 = /^a$/;console.log(rg3.test(""));//trueconsole.log(rg3.test("a"));//trueconsole.log(rg3.test("b"));//falseconsole.log(rg3.test("aaa"));//falseconsole.log("---------------3");//4， {n} 相当于须重复n次var rg4 = /^a{3}$/;console.log(rg4.test(""));//falseconsole.log(rg4.test("a"));//falseconsole.log(rg4.test("b"));//falseconsole.log(rg4.test("aaa"));//trueconsole.log("---------------4");//5， {n,} 相当于式子出现次数大于等于nvar rg5 = /^a{3,}$/;console.log(rg5.test(""));//falseconsole.log(rg5.test("a"));//falseconsole.log(rg5.test("b"));//falseconsole.log(rg5.test("aaa"));//trueconsole.log(rg5.test("aaaa"));//trueconsole.log("---------------5");//6， {3,6} 相当于式子出现次数大于等于3并且小于等于6var rg6 = /^a{3,6}$/;console.log(rg6.test(""));//falseconsole.log(rg6.test("a"));//falseconsole.log(rg6.test("b"));//falseconsole.log(rg6.test("aaa"));//trueconsole.log(rg6.test("aaaa"));//trueconsole.log(rg6.test("aaaaaaaa"));//falseconsole.log("---------------6");</script>
</body></html>

正则表达式之匹配总结

1，大括号：量词符，里面表示式子的重复次数；
2，中括号：字符集合，匹配方括号（即：[]）中的任意字符；
3，小括号：表示优先级；

正则表达式中的特殊字符

预定义类

预定义类指的是某些常见模式的简写方式；

菜鸟工具网址：http://c.runoob.com/
菜鸟工具网址
var rg = /^[3|4|5|7|8]\d{9}$/;/手机号码的正则表达式
var rg = /^[1-9]\d{4,}$/;/QQ号码的正则表达式
var rg = /^[3|4|5|7|8]\d{9}$/;/手机号码的正则表达式

//验证提示内容及样式改变
this.nextElementSibling.innerHTML ="<i class="right"><i>输入正确";

实例：表单验证——用户名验证

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单验证——用户名验证</title>
</head>
<style>.right {color: green;}.wrong {color: red;}
</style><body><input type="text" class="uname"><span>请输入用户名</span><script>var reg = /^[a-zA-Z0-9_-]{6,16}$/;//这个模式用户只能输入英文，数字，下划线，短横线var uname = document.querySelector(".uname");var span = document.querySelector("span");uname.onblur = function () {if (reg.test(this.value)) {console.log("正确的");span.className = "right";span.innerHTML = "用户名输入合法"} else {console.log("错误的");span.className = "wrong";span.innerHTML = "用户名输入不合法"}}</script>
</body></html>

正则表达式中的替换

replace()方法可以实现替换字符串操作，用来替换的参数可以是一个字符串或是一个正则表达式。
stringObject.replace(regexp/substr,replacement);
1，第一个参数：被替换的字符串或者正则表达式；
2，第二个参数：替换为字符串
3，返回值是一个替换完毕的新字符串；

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>正则表达式_替换</title>
</head><body><script>var text = document.querySelector("textarea");var btn = document.querySelector("button");var div = document.querySelector("div");btn.onclick = function () {//把"激情"和"gay"敏感词替换为"**"div.innerHTML = text.value.replace(/激情|gay/g, "**");}</script>
</body></html>

@沉木

ES6/05/正则表达式简介，正则表达式如何使用，正则表达式中的特殊字符（边界符，量词符），预定义类，正则表达式中的替换相关推荐

Emacs 正则表达式简介(From 水木清华)
Emacs 正则表达式简介(From 水木清华) 发信人: dddkk (进化的鱼), 信区: Emacs 标题: Emacs 的正则表达式发信站: BBS 水木清华站 (Thu Mar ...
正则表达式中的特殊字符
正则表达式中的特殊字符组成一个正则表达式可以由简单的字符构成,比如 /abc/,也可以是简单和特殊字符的组合,比如 /ab*c/ .其中特殊字符也被称为元字符,在正则表达式中是具有特殊意义的专用符 ...
JavaScript正则表达式：正则表达式中的特殊字符
正则表达式的组成一个正则表达式可以由简单的字符构成,比如 /abc/,也可以是简单和特殊字符的组合,比如 /ab*c/ .其中特殊字符也被称为元字符,在正则表达式中是具有特殊意义的专用符号,如 ^ ...
golang 正则表达式简介
目录语法简介单一复合重复分组位置标记转义序列可以将"命名字符类"作为"字符类"的元素说明 "Perl 类"取值 " ...
正则表达式发明者_正则表达式 – 简介
正则表达式 - 简介除非您以前使用过正则表达式,否则您可能不熟悉此术语.但是,毫无疑问,您已经使用过不涉及脚本的某些正则表达式概念. 例如,您很可能使用 ? 和 * 通配符来查找硬盘上的文件.通配符 ...
【转】正则表达式简介及在C++11中的简单使用教程
[转]正则表达式简介及在C++11中的简单使用教程正则表达式Regex(regular expression)是一种强大的描述字符序列的工具.在许多语言中都存在着正则表达式,C++11中也将正则表达 ...
正则表达式简介 -- 整理 by Emerald 绿色学院 - Green Institute
目录: ------------------------------------------------------------------------------------ 1.正则表达式 2.早 ...
Linux正则表达式简介
Linux正则表达式简介一.为什么要学习正则表达式 Linux运维操作主要面对的即是含有大量的字符串的文本,而我们也经常会迫切的需要从大量的字符串中去找到特定的文本信息,正则表达式就是为过滤这样的字 ...
正则表达式简介及在C++11中的简单使用
正则表达式(regular expression)是计算机科学中的一个概念,又称规则表达式,通常简写为regex.regexp.RE.regexps.regexes.regexen. 正则表达式是一种 ...

ES6/05/正则表达式简介，正则表达式如何使用，正则表达式中的特殊字符（边界符，量词符），预定义类，正则表达式中的替换

正则表达式

正则表达式简介

正则表达式如何使用

边界符

两个特殊字符：^ （以什么开头或取反），$ (什么用来结尾)

特殊字符：[] (一系列字符可供选择，字符串中只要有其中一个就返回ture)

量词符：用来设定某个模式（字符或其它式子）出现的次数

正则表达式之匹配总结

正则表达式中的特殊字符

预定义类

正则表达式中的替换

@沉木

ES6/05/正则表达式简介，正则表达式如何使用，正则表达式中的特殊字符（边界符，量词符），预定义类，正则表达式中的替换相关推荐

最新文章

热门文章

ES6/05/正则表达式简介，正则表达式如何使用，正则表达式中的特殊字符（边界符，量词符），预定义类，正则表达式中的替换

正则表达式

正则表达式简介

正则表达式如何使用

边界符

两个特殊字符：^ （以什么开头或取反），$ (什么用来结尾)

特殊字符：[] (一系列字符可供选择，字符串中只要有其中一个就返回ture)

量词符 ：用来设定某个模式（字符或其它式子）出现的次数

正则表达式之匹配总结

正则表达式中的特殊字符

预定义类

正则表达式中的替换

@沉木

ES6/05/正则表达式简介，正则表达式如何使用，正则表达式中的特殊字符（边界符，量词符），预定义类，正则表达式中的替换相关推荐

最新文章

热门文章

量词符：用来设定某个模式（字符或其它式子）出现的次数