学习来源:尚硅谷JavaScript基础&实战丨JS入门到精通全套完整版
文章目录
- 📚正则表达式
- 📚正则表达式字面量方式
- 📚字符串&正则表达式
- 🐇split()
- 🐇search()
- 🐇match()
- 🐇replace()
- 📚正则表达式相关语法
- 🐇量词
- 🐇检查开头结尾
- 🐇手机号规则
- 🐇邮件检测
- 🐇检测字符
📚正则表达式
- 正则表达式用于定义一些字符串的规则,计算机可以根据正则表达式,来检查一个字符串是否符合规则,或者将字符串中符合规则的内容提取出来。
- 创建正则表达式的对象:
var 变量 = new RegExp("正则表达式","匹配模式");
,例如:var reg = new RegExp("a");
这个正则表达式可以来检查一个字符串中是否含有a。 - 使用typeof检查正则对象,会返回object。
test()
方法:这个方法可以用来检查一个字符串是否符合正则表达式的规则,如果符合则返回true,否则返回false。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//建一个忽略大小写的正则表达式对象,匹配模式为 "ab"
var reg = new RegExp("ab","i");
var str = "a";
var result = reg.test(str);
// "ab" 中的 "b" 并不在字符串 "a" 中存在,以下同理
console.log(result);//false
console.log(reg.test("Ac"));//false
</script>
</head>
<body>
</body>
</html>
📚正则表达式字面量方式
- 语法:
var 变量 = /正则表达式/匹配模式
- 使用字面量的方式创建更加简单,使用构造函数创建更加灵活。
[]
里的内容也是或的关系[ab]
== a|b[a-z]
任意小写字母[A-Z]
任意大写字母[A-z]
任意字母[0-9]
任意数字[^ ]
除了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//var reg = new RegExp("a","i");
var reg = /a/i;
console.log(reg.test("abc"));//true
//创建一个正则表达式,检查一个字符串中是否有a或b
//使用 | 表示或者的意思
reg = /a|b|c/;
//创建一个正则表达式检查一个字符串中是否有字母
reg = /[A-z]/;
//检查一个字符串中是否含有 abc 或 adc 或 aec
reg = /a[bde]c/;
//[^ ] 除了
reg = /[^ab]/;
reg = /[^0-9]/;
//包含字母"a",而不仅仅是数字
console.log(reg.test("12a3456"));//true
</script>
</head>
<body>
</body>
</html>
📚字符串&正则表达式
🐇split()
- 可以将一个字符串拆分为一个数组。
- 方法中可以传递一个正则表达式作为参数,这样方法将会根据正则表达式去拆分字符串。
- 这个方法即使不指定全局匹配,也会全都插分。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var str = "1a2b3c4d5e6f7";
//根据任意字母来将字符串拆分
var result = str.split(/[A-z]/);
console.log(result);
</script>
</head>
<body>
</body>
</html>
🐇search()
- 可以搜索字符串中是否含有指定内容。
- 如果搜索到指定内容,则会返回第一次出现的索引,如果没有搜索到返回-1。
- 它可以接受一个正则表达式作为参数,然后会根据正则表达式去检索字符串。
- serach()只会查找第一个,即使设置全局匹配也没用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
str = "hello abc hello aec afc";
//搜索字符串中是否含有abc 或 aec 或 afc
result = str.search(/a[bef]c/);
console.log(result);//6
</script>
</head>
<body>
</body>
</html>
🐇match()
- 可以根据正则表达式,从一个字符串中将符合条件的内容提取出来。
- 默认情况下我们的match只会找到第一个符合要求的内容,找到以后就停止检索。
- 我们可以设置正则表达式为全局匹配模式,这样就会匹配到所有的内容。
- 可以为一个正则表达式设置多个匹配模式,且顺序无所谓。
- match()会将匹配到的内容封装到一个数组中返回,即使只查询到一个结果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
str = "1a2a3a4a5e6f7A8B9C";
result = str.match(/[a-z]/ig);
console.log(result);
</script>
</head>
<body>
</body>
</html>
🐇replace()
- 可以将字符串中指定内容替换为新的内容。
参数
:- 1.被替换的内容,可以接受一个正则表达式作为参数
- 2.新的内容
- 默认只会替换第一个
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
str = "1a2a3a4a5e6f7A8B9C";
result = str.replace(/[a-z]/gi , "@_@");
console.log(result);
//1@_@2@_@3@_@4@_@5@_@6@_@7@_@8@_@9@_@
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var str = prompt("请输出任意的内容:");
str = str.split("").reverse().join("");
alert(str);
</script>
</head>
<body>
</body>
</html>
📚正则表达式相关语法
🐇量词
- 通过量词可以设置一个内容出现的次数
- 量词只对它前边的一个内容起作用
{n}
正好出现n次{m,n}
出现m~n次{m,}
m次以上+
至少一个,相当于{1,}*
0个或多个,相当于{0,}?
0个或1个,相当于{0,1}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// 创建一个正则表达式检查一个字符串中是否含有aaa
var reg = /a{3}/;
// false,"abbc"中不含有连续的三个'a'
console.log(reg.test("abbc"));
// true,"aaabbc"中含有连续的三个'a'
console.log(reg.test("aaabbc"));
reg = /ab{1,3}c/;
// true,"abaabbc"中含有'a'后跟着1到3个'b',再后是'c'
console.log(reg.test("abaabbc"));
reg = /a{3,}c/;
// false,"aaabbc"中含有连续的三个'a',但接着是'b'
console.log(reg.test("aaabbc"));
reg = /ab+c/;
// true,"aaabbc"中含有'a'后跟着至少一个'b',再后是'c'
console.log(reg.test("aaabbc"));
reg = /ab*c/;
// true,"aaabbc"中含有'a'后跟着任意个'b'(可能是0个),再后是'c'
console.log(reg.test("aaabbc"));
// false,"aaabbc"中含有'a',但后跟着不是0或1个'b',再后是'c'
reg = /ab?c/;
console.log(reg.test("aaabbc"));
</script>
</head>
<body>
</body>
</html>
🐇检查开头结尾
^
表示开头$
表示结尾
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
reg = /^a/; //匹配开头的a
console.log(reg.test("abcabca"));//true
reg = /a$/; //匹配结尾的a
console.log(reg.test("abcabca"));//true
//如果在正则表达式中同时使用^ $则要求字符串必须完全符合正则表达式
reg = /^a$/;
console.log(reg.test("bbca"));//false
</script>
</head>
<body>
</body>
</html>
🐇手机号规则
- 以1开头
- 第二位3-9任意数字
- 三位以后任意数字9个
^1 [3-9] [0-9]{9}$
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//创建一个正则表达式,用来检查一个字符串是否是一个合法手机号
var Str = "13067890123";
var Str2 = "12345678909"
var phoneReg = /^1[3-9][0-9]{9}$/;
console.log(phoneReg.test(Str));//true
console.log(phoneReg.test(Str2));//false
</script>
</head>
<body>
</body>
</html>
🐇邮件检测
- 任意字母数字下划线 .任意字母数字下划线 @ 任意字母数字 .任意字母(2-5位) .任意字母(2-5位)
\w{3,} (\.\w+)* @ [A-z0-9]+ (\.[A-z]{2,5}){1,2}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
var email = "abc.hello@163.com";
console.log(emailReg.test(email));//true
</script>
</head>
<body>
</body>
</html>
🐇检测字符
.
表示任意字符- 在正则表达式中使用
\
作为转义字符,\.
来表示.
,\\
表示\
- 注意:使用构造函数时,由于它的参数是一个字符串,而****是字符串中转义字符,如果要使用\则需要使用
\\
来代替。 \w
:任意字母、数字,_ [A-z0-9_]
\W
:除了字母、数字,_ [^A-z0-9_]
\d
:任意的数字,[0-9]
\D
:除了数字,[^0-9]
\s
:空格\S
:除了空格\b
:单词边界\B
:除了单词边界
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//创建一个正则表达式检查一个字符串中是否含有单词child
reg = /\bchild\b/;
console.log(reg.test("hello child "));
//接收一个用户的输入
var str = prompt("请输入你的用户名:");
//去除空格
str = str.replace(/\s/g , "");
console.log(str);
//去除开头的空格
//str = str.replace(/^\s*/, "");
//去除结尾的空格
//str = str.replace(/\s*$/, "");
</script>
</head>
<body>
</body>
</html>