美文网首页
JavaScript入门笔记7

JavaScript入门笔记7

作者: David_Rao | 来源:发表于2019-11-22 23:55 被阅读0次

写在前面

本文是我通过在网易云课堂上学习 叶建华 老师的 撩课-零基础玩转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的正则表达式

https://www.w3school.com.cn/jsref/jsref_obj_regexp.asp

1.1、概念

正则表达式是对字符串操作的一种逻辑公式,来表示具有某种规律的字符串

1.2、作用

  1. 匹配
  2. 提取
  3. 替换

1.3、组成

  1. 普通字符
    “David123”
  2. 元字符
    正则表达式中有特殊意义的字符
    \d匹配数字
    \w匹配字母或数字或下划线

1.4、正则表达式在线翻译

https://c.runoob.com/front-end/854

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、与正则表达式相关的方法

  1. 针对RegExp对象
    test()匹配
    exec()提取 提取一个内容
  2. 针对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

写在最后

如果您觉得文章对您有帮助,不要吝惜您的“点赞”呀!

相关文章

  • JavaScript入门笔记7

    写在前面 本文是我通过在网易云课堂上学习 叶建华 老师的 撩课-零基础玩转JavaScript 视频教程,整理、精...

  • jest 入门笔记

    jest 入门笔记 Jest is a delightful JavaScript Testing Framewo...

  • JavaScript的组成部分

    该部分笔记记录关于JavaScript基础的学习。今天先从入门了解一下JavaScript的组成。JavaScri...

  • 回味JS(导论)

    本系列文章为阮一峰老师的JavaScript教程的学习笔记。 参考链接: JavaScript教程-入门篇以及参考...

  • MapServer 笔记一:简单入门

    MapServer 笔记一:简单入门 ArcGIS Server 深度入门 Geoserver 深度入门 版本为7...

  • TypeScript学习记录- 数据类型基础

    TS 学习笔记记录 相关文档 TypeScript 入门教程-xcatliu JavaScript高级程序设计(第...

  • 【笔记】javaScript 基础入门(三)

    上一篇笔记《javascript基础入门(二)》里,我主要写了javascript的数据类型之间的转换,操作符(算...

  • JavaScript入门笔记

    数字 在 JavaScript 中定义数字实际上非常简单。数字数据类型包括任何正负整数以及小数。向控制台中输入数字...

  • JavaScript入门笔记

    为方便阅读,该内容需具备一定的HTML+CSS基础。 为什么学习JavaScript 一、为什么JavaScrip...

  • JavaScript入门笔记

    目录 基础知识 数据类型 操作符和表达式 语句 函数 数组与字符串 定时器 数学对象 时间与日期 DOM文档对象模...

网友评论

      本文标题:JavaScript入门笔记7

      本文链接:https://www.haomeiwen.com/subject/vyjqwctx.html