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

2023-09-18 阅读 21 评论 0

摘要：正则表达式目标：1，说出正则表达式的作用 2，能使用一些简单的正则表达式 3，使用正则表达式对表单进行验证 4，使用正则表达式替换内容正则表达式简介 js正则表达式特殊字符。正则表达式（Regular Expression ：有规则的表达式

正则表达式

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

正则表达式简介

js正则表达式特殊字符。正则表达式（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>