JavaScript入门笔记7
写在前面
本文是我通过在网易云课堂上学习 叶建华 老师的 撩课-零基础玩转JavaScript 视频教程，整理、精炼其配套笔记总结而来的。附上视频教程地址：
https://study.163.com/course/courseMain.htm?courseId=1005973001
以下是我的所有js入门笔记
JavaScript入门笔记1：https://www.jianshu.com/p/ab044eb35c56
JavaScript入门笔记2：https://www.jianshu.com/p/348805d50b77
JavaScript入门笔记3：https://www.jianshu.com/p/2146931d6706
JavaScript入门笔记4：https://www.jianshu.com/p/e95f00b53343
JavaScript入门笔记5：https://www.jianshu.com/p/97a241434881
JavaScript入门笔记6：https://www.jianshu.com/p/fc091ce8924e
JavaScript入门笔记7：https://www.jianshu.com/p/ea33bfb83da1
本章节内容
1、js的正则表达式
---1.1、概念
---1.2、作用
---1.3、组成
---1.4、 正则表达式在线翻译
---1.5、常用案例
---1.6、使用
---1.7、与正则表达式相关的方法
---1.8、匹配
---1.9、提取
---1.10、分组匹配
---1.11、替换
---1.12、分割
---1.13、贪婪模式和非贪婪模式
1、js的正则表达式
1.1、概念
正则表达式是对字符串操作的一种逻辑公式，来表示具有某种规律的字符串
1.2、作用
- 匹配
- 提取
- 替换
1.3、组成
- 普通字符
“David123” - 元字符
正则表达式中有特殊意义的字符
\d匹配数字
\w匹配字母或数字或下划线
1.4、正则表达式在线翻译
1.5、常用案例
邮政编码
//以1-9的数字开头，再跟5个任意数字，并结尾
^[1-9]\d{5}$
日期2020-10-02
//四位数字 - 一到两位数字 - 一到两位数字，并结尾
^\d{4}-\d{1,2}-\d{1,2}$
简单的邮箱验证
//以任意字符开头并匹配任意个 @ 匹配任意个任意字符 . 匹配任意个任意字符，并结尾
^\w+@\w+\.\w+$
1.6、使用
正则表达式是js的内置对象，可以以创建对象的方式来使用
new RegExp(正则表达式, 匹配模式);
匹配模式有下面三种，如果要同时使用多种模式的采用连写，如 gi
1.6.1、使用方法一、创建正则表达式对象
var reg = new RegExp('ab[a-z]', 'i');
var str1 = "ABC";
var str2 = "AB3";
console.log(reg.test(str1)); // true
console.log(reg.test(str2)); // false
1.6.2、使用方法二、正则表达式字面量
var reg = /ab[a-z]/i;
var str1 = "ABC";
var str2 = "AB3";
console.log(reg.test(str1)); // true
console.log(reg.test(str2)); // false
1.7、与正则表达式相关的方法
- 针对RegExp对象
test()匹配
exec()提取 提取一个内容 - 针对String对象
match()提取 可以提取多个内容
replace()替换
split()切割
search()搜索
1.8、匹配
匹配日期
var dateStr = '2020-10-02';
var dateReg = /^\d{4}-\d{1,2}-\d{1,2}$/;
console.log(dateReg.test(dateStr)); // ture
匹配手机
var phoneStr = '18988888888';
//在 https://c.runoob.com/front-end/854 上找
var phoneReg = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
console.log(phoneReg.test(phoneStr)); // true
1.9、提取
// 这个方法一次只能提取一个满足条件的字符串，要
var qqStr = "David: 8888888, Rao: 9999999, UJ: 1010100";
var reg = /\d+/g;
var qqNumber = reg.exec(qqStr);
console.log(qqNumber);
console.log(qqNumber[0]); // 8888888
var qqNumber = reg.exec(qqStr);
console.log(qqNumber[0]); // 9999999
3个qq号都提取出来
var qqStr = "David: 8888888, Rao: 9999999, UJ: 1010100";
var reg = /\d+/g;
do{
var qqNumber = reg.exec(qqStr);
if(qqNumber)
console.log(qqNumber[0]);
}while(qqNumber)
使用match
var qqStr = "David: 8888888, Rao: 9999999, UJ: 1010100";
var reg = /\d+/g;
var qqArr = qqStr.match(reg);
console.log(qqArr); // [8888888, 9999999, 1010100]
1.10、分组匹配
把正则表达式中括号里的字符分组提取出来
var dateStr = '2020-10-02';
var dateReg = /^(\d{4})-(\d{1,2})-(\d{1,2})$/;
if(dateReg.test(dateStr)){
console.log(RegExp.$1); // 2020
console.log(RegExp.$2); // 10
console.log(RegExp.$3); // 02
}
1.11、替换
var str = ' JS is my favorite programming language. ';
console.log(str);
str = str.replace(/\s/g, '*');
console.log(str); // ********JS*is*my*favorite*programming*language ********.
替换开头空格，替换结尾空格
var str = ' JS is my favorite programming language. ';
console.log(str);
str1 = str.replace(/^\s*/g, '*');
console.log(str1); // *JS is my favorite programming language.
str2 = str.replace(/\s*$/, '*');
console.log(str2); // JS is my favorite programming language.*
1.12、分割
var dateStr = '2020-10-02';
console.log(dateStr.split('-')); // [2020, 10, 02]
1.13、贪婪和非贪婪模式
概念
贪婪：尽可能多地匹配量词、+、？或{}后面的字符
非贪婪：尽可能少地匹配量词、+、？或{}后面的字符
语法
贪婪：缺省？则非贪婪
非贪婪：将？紧跟在任何量词*、+、？或{}后面
var str = 'aaaaabbbbbaaa';
var greed = str.match(/a.*b/); // 尽可能多地匹配b
console.log(greed[0]); // aaaaabbbbb
var notGreed = str.match(/a.*?b/); // 尽可能少地匹配b
console.log(notGreed[0]); // aaaaab
写在最后
如果您觉得文章对您有帮助，不要吝惜您的“点赞”呀！
