目录
欢迎关注 『Javascript基础重点』 专栏，持续更新中
欢迎关注 『Javascript基础重点』 专栏，持续更新中
介绍一些Javascript的基础重点知识，包括并不限于函数作用域与提前声明和对象的构造函数等问题。
1. 什么是正则表达式
正则表达式
- admin@atguigu.com
- admin@.com adminatguigu.com
- 邮件的规则：
1.前边可以是xxxx乱七八糟
2.跟着一个@
3.后边可以是xxxx乱七八糟
4…com获取其他的乱七八糟 - 正则表达式用于定义一些字符串的规则，
计算机可以根据正则表达式，来检查一个字符串是否符合规则，
获取将字符串中符合规则的内容提取出来
2. 创建正则表达式的两种方法
2.1 使用构造函数创建更加灵活
- var 变量 = new RegExp(“正则表达式”,“匹配模式”);
- 使用typeof检查正则对象，会返回object
- var reg = new RegExp(“a”); 这个正则表达式可以来检查一个字符串中是否含有a
- 在构造函数中可以传递一个匹配模式作为第二个参数，可以是
- i 忽略大小写
- g 全局匹配模式（不仅仅是第一个，而是全部内容）
- 省略默认g 忽略大小写
<script>
var reg = new RegExp("ab", "i");//忽略大小写,匹配要求内容含有“ab”
var reg2 = new RegExp("ab", "g");//全局匹配
</script>
2.2 使用字面量的方式创建更加简洁
如果不指定匹配模式，默认全局模式
<script>
var reg = new RegExp("a", "i");
var reg2 = /a/i;
</script>
3. 用test()方法测试表达式
正则表达式的方法：
- test()
- 使用这个方法可以用来检查一个字符串是否符合正则表达式的规则，
如果符合则返回true，否则返回false
- 使用这个方法可以用来检查一个字符串是否符合正则表达式的规则，
<script>
var reg = new RegExp("ab", "i");
var str = "a";
var result = reg.test(str);
console.log(result); //false
var str2 = "abc";
var result2 = reg.test(str2);
console.log(result2); //true
</script>
4. 检查一个字符串中是否有指定字符
| 表示或的意思
| 规则写法 | 意义 |
|---|---|
| [] | []里的内容是或的关系 |
| [ab] | a |
| [a-z] | 任意小写字母 |
| [A-Z] | 任意大写字母 |
| [A-z] | 任意字母 |
| [0-9] | 任意数字 |
| [^ ] | 除了,但是必须得在括号中使用 |
<script>
var str = "b123";
var str2 = "a123";
var reg = /a|b/;//等同 var reg = /[ab]/;
var result = reg.test(str);
console.log(result); //true
var result2 = reg.test(str2);
console.log(result2); //true
</script>
- 范围匹配
<script>
var str = "b123";
var str2 = "a456";
var reg = /[0-3]/;
var result = reg.test(str);
console.log(result); //true
var result2 = reg.test(str2);
console.log(result2); //false
</script>
- 除了 ^
除了的意思是，包含有其他的字符返回true，如果只有其中的字符返回false
<script>
console.log(/[^ab]/.test("ab")); //false//检查一个字符串中是否有除了ab外的其他字符
console.log(/[^ab]/.test("abc")); //true//检查一个字符串中是否有除了ab外的其他字符
</script>
- 字符串带括号匹配
<script>
console.log(/a[bde]c/.test("abc123")); //true//检查一个字符串中是否含有 abc 或 adc 或 aec
</script>
5. 字符串与正则结合的常用方法
5.1 split() 正则分割字符串为数组
- split()
- 可以将一个字符串拆分为一个数组
- 方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串
- 这个方法即使不指定全局匹配，也会全都插分
<script>
var str = "1a2b3c4d5e6f7";
var result = str.split(/[A-z]/);
console.log(result); //(7) ["1", "2", "3", "4", "5", "6", "7"]
</script>
5.2 search() 正则搜索字符串中是否含有指定内容
- search()
- 可以搜索字符串中是否含有指定内容
- 如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1
- 它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串
- serach()只会查找第一个，即使设置全局匹配也没用
<script>
var str = "hello abc hello aec afc";
var result = str.search(/a[bef]c/); //搜索字符串中是否含有abc 或 aec 或 afc
console.log(result); //6 返回的是第一次出现子串的 索引位置6
</script>
5.3 match() 正则提取字符串中含有的指定内容
- match()
- 可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
- 默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索
我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容
可以为一个正则表达式设置多个匹配模式，且顺序无所谓 - match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果
<script>
var str = "1a2a3a4a5e6f7A8B9C";
var result = str.match(/[a-z]/gi); //设置多个匹配模式
console.log(result); //(9) ["a", "a", "a", "a", "e", "f", "A", "B", "C"]
result = str.match(/[a-z]/i); //不全局匹配，只要找到第一个a就结束了
console.log(result); //["a", index: 1, input: "1a2a3a4a5e6f7A8B9C", groups: undefined]
</script>
5.4 replace() 正则将字符串中指定内容替换为新的内容
- replace()
- 可以将字符串中指定内容替换为新的内容
- 参数：
1.被替换的内容，可以接受一个正则表达式作为参数
2.新的内容 - 默认只会替换第一个
<script>
var str = "1a2a3a4a5e6f7A8B9C";
var result = str.replace(/[a-z]/gi, ""); //小写字母替换为""（也就是删除）
console.log(result); //123456789
result = str.replace(/[a-z]/gi, "@_@"); //小写字母替换为@_@
console.log(result); //1@_@2@_@3@_@4@_@5@_@6@_@7@_@8@_@9@_@
</script>
6. 正则的量词
- 量词
- 通过量词可以设置一个内容出现的次数
- 量词只对它前边的一个内容起作用
- {n} 正好出现n次
- {m,n} 出现m-n次
- {m,} m次以上
-
- 至少一个，相当于{1,}
-
- 0个或多个，相当于{0,}
- ? 0个或1个，相当于{0,1}
<script>
var reg = /a{3}/; //a出现3次，形如aaa
//ababab
reg = /(ab){3}/; //形如 ababab
reg = /b{3}/; //形如bbb
reg = /ab{1,3}c/; //形如 abc,abbc,abbbc ，b出现[1，3]次
reg = /ab{3,}c/; //形如 abbbc c,abbbbbbc,b连续出现3次及以上
reg = /ab+c/; //形如 abc,abbc, ```+ 至少一个，相当于{1,}
reg = /ab*c/; //形如 ac,abc,abbbbc```* 0个或多个，相当于{0,}
reg = /ab?c/; //形如 ac,abc ? 0个或1个，相当于{0,1}
</script>
</script>
7. 正则开头结尾匹配
- 检查一个字符串中是否以a开头。
- ^ 表示开头！！！注意，在中括号中的^表示除非，不在中括号中的表示开头匹配
- $ 表示结尾
<script>
var reg;
reg = /^a/; //匹配开头的a
console.log(reg.test("bbca")); //false
reg = /a$/; //匹配结尾的a
console.log(reg.test("bbca")); //true
</script>
8. 正则表达式中的转移字符与特殊字符
-
检查一个字符串中是否含有 .
. 表示任意字符
在正则表达式中使用\作为转义字符
. 来表示.
\ 表示
* -
注意：使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符
如果要使用\则需要使用\来代替 -
\w
- 任意字母、数字、_ [A-z0-9_]
-
\W
- 除了字母、数字、_ [^A-z0-9_]
-
\d
- 任意的数字 [0-9]
-
\D
- 除了数字 [^0-9]
-
\s
- 空格
-
\S
- 除了空格
-
\b
- 单词边界
-
\B
- 除了单词边界
利用单词边界，检查一个字符串中是否含有单词child
<script>
//创建一个正则表达式检查一个字符串中是否含有单词child
reg = /\bchild\b/;
console.log(reg.test("hello child "));//true
</script>
9. 实战之检测手机号规范性
- 手机号的规则：
1 3 567890123 （11位）- 以1开头
- 第二位3-9任意数字
- 三位以后任意数字9个
<script>
var phoneStr = "13888888888";
var phoneReg = /^1[3-9][0-9]{9}$/; //首位是1，第二位[3-9]，剩余9位量词匹配[0,9]
console.log(phoneReg.test(phoneStr)); //true
</script>
10. 实战之检测用户输入
要求去掉输入中的空格
- 接收一个用户的输入
- 去除掉字符串中的前后的空格，去除空格就是使用""来替换空格
- 去除开头的空格，去除结尾的空格
<script>
//var str = prompt("请输入你的用户名:"); //可以是输入的方式
var str = " he llo ";
console.log(str);
//str = str.replace(/\s/g, ""); //去除掉字符串中的前后的空格,去除空格就是使用""来替换空格
//str = str.replace(/^\s*/, "");//去除开头的空格
//str = str.replace(/\s*$/, "");//去除结尾的空格
// /^\s*|\s*$/g 匹配开头和结尾的空格
str = str.replace(/^\s*|\s|\s*$/g, ""); //合在一起写一行结束，分别是去除了 |开头|中间|结尾| 的空格
console.log(str);
</script>
11. 实战之检测邮箱格式
-
电子邮件
- hello .nihao @ abc .com.cn
- 任意字母数字下划线 .任意字母数字下划线 @ 任意字母数字 .任意字母（2-5位） .任意字母（2-5位）
-
简单的qq邮箱
<script>
//qq数字邮箱 2023@qq.com
//qq英文邮箱 csdn2023@qq.com
var reg = /\w*@qq.com/;
console.log(reg.test("2023@qq.com"));//true
console.log(reg.test("csdn2023@qq.com"));//true
</script>
- 其他的复杂邮箱
<script>
//这个邮箱格式仅供参考，随便胡诌的一个格式，练习用
var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
// ^\w{3,} 开头匹配3位以上的字母数字下划线
// (\.\w+)* (.+至少一个的字母数字下划线)这个组合可以有0或多个
// @ @
// [A-z0-9]+ 任意字母数字1位以上
// (\.[A-z]{2,5}){1,2}$ 结尾匹配检查，有1-2个（.任意字母）
var email = "abc.hello@163.com";
console.log(emailReg.test(email));
</script>
总结
大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！
版权声明：
发现你走远了@mzh原创作品，转载必须标注原文链接
Copyright 2023 mzh
Crated：2023-3-1
欢迎关注 『Javascript基础重点』 专栏，持续更新中
欢迎关注 『Javascript基础重点』 专栏，持续更新中
『1.提前声明问题，你苦恼写了js函数代码但是不会生效的问题吗？』
『2.易错点之函数形参与函数作用域的坑』
『3.了解原型对象优雅地构造函数の“JS中的Java继承” 提高运行效率，优雅地使用对象』
『4.JS垃圾回收机制简析』
『5.以toString()为例学习JS中的java方法重写』
『6.数组的常用方法与数组遍历』
『7.函数进阶之call()和apply()与arguments』
『8.Date类与利用时间戳来测试代码的执行的性能』
『9.Math类方法』
『10.包装类』
『11.字符串的方法』
『12.正则表达式介绍 邮件正则表达式写法』
『13.dom的应用』
『未完待续』
2723
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
