360前端星计划学习笔记0410

360前端星计划学习笔记（五）正则的三个应用场景–王峰老师
360前端星计划学习笔记（六）NodeJS基础入门

文章目录

正则
- 正则表达式的创建和使用
- - 创建正则表达式的两种方式
  - 正则表达式的常见用法
- 场景一：正则与数值
- - 数值判断
  - - /[0-9]+/
    - /^\d+$/
    - /^[+-]?\d(\.\d+)?$/
    - /^[+-]?(?:\d*\.)?\d+$/
  - 完整的数值正则
  - 用正则处理数值
  - - 数值的解析
- 场景二：正则与颜色
- - 16进制表示法
  - rgb/rgba表示法
  - hsl
  - 用正则处理颜色
- 场景三：正则与URL
- - 用正则解析URL
  - 用正则解析Search
  - 总结
NodeJS
- NodeJS简介
- Node.js基础
- - 模块
  - 模块类型
  - 模块路径查找
  - js模块解析
  - 模块缓存
- NPM
- - NPM 包管理器
  - package.json
  - 包依赖
  - NPM 问题
- 基于Node.js的Web开发
- - Koa框架
  - ThinkJS
  - 使用ThinkJS做TODO
- NodeJS调试
- Node 开发角色转换

正则

正则表达式的创建和使用

创建正则表达式的两种方式

字面量

const reg=/[a-z]\d+[a-z]/i

优点：①简单方便；②不需要考虑二次转义；

缺点：①子表达式无法复用②过长的正则可读性降低

使用RegExp构造函数

const alphabet='[a-z]'
const reg = new RegExp(`${alphabet}\\d+${alphabet}`,'i')

需要注意\d使用转义

优点：①子内容可以重复使用；②可以通过控制子内容的粒度提高可读性

缺点：二次转义的问题非常容易导致bug

const reg = new RegExp(`\d`)
reg.test('1')//false
reg.test('ddd')//true

正则表达式的常见用法

RegExp.prototype.test()

const reg = /[a-z]\d+[a-z]/i;reg.test('a1a'); // true
reg.test('1a1'); // false
reg.test(Symbol('a1a')); // TypeError

内容如果无法隐式转为字符串会抛出TypeError

RegExp.prototype.source和RegExp.prototype.flags
```
const reg = /[a-z]\d+[a-z]/ig;reg.source; // "[a-z]\d+[a-z]"
reg.flags; // "gi"
```
- RegExp.prototype.source
  
  返回当前正则表达式的模式文本的字符串
- RegExp.prototype.flags
  
  es2015新增，返回当前正则表达式的修饰符的字符串，会对修饰符按照字母升序进行排序（gimsuy）
RegExp.prototype.exec()和String.prototype.match()

输入输出
- 输入：
  
  RegExp.prototype.exec 要求输入字符串，遇到非字符串类型会尝试转换
  
  String.prototype.match 要求输入正则表达式，遇到其它类型会先尝试转成字符串，再以字符串为 source 创建正则表达式

输出

匹配成功，返回匹配结果

匹配失败，返回 null

   const reg = /[a-z]\d+[a-z]/i;reg.exec('a1a'); // ["a1a", index: 0, input: "a1a", groups: undefined]
reg.exec('1a1'); // null'a1a'.match(reg); // ["a1a", index: 0, input: "a1a", groups: undefined]
'1a1'.match(reg); // nullconst reg1 = /(a)/g;reg1.exec('a1a'); // ["a", "a", index: 0, input: "a1a", groups: undefined]'a1a'.match(reg1); // ["a", "a"]

特殊：当正则表达式含有 g 修饰符时，RegExp.prototype.exec 每次只返回一个匹配结果，数据格式和不含 g 修饰符相同。

String.prototype.match 会返回所有的匹配结果，数据格式会变为字符串数组。

由于 String.prototype.match 返回的数据格式不固定，因此大多数情况都建议使用 RegExp.prototype.exec

RegExp.prototype.lastIndex;

 const reg = /(a)/g;const str = 'a1a';reg.lastIndex; // 0reg.exec('a1a'); // ["a", "a", index: 0, input: "a1a", groups: undefined]reg.lastIndex; // 1reg.exec('a1a'); // ["a", "a", index: 2, input: "a1a", groups: undefined]reg.lastIndex; // 3reg.exec('a1a'); // nullreg.lastIndex; // 0

当前正则表达式最后一次匹配成功的结束位置（也就是下一次匹配的开始位置）

注意：lastIndex 不会自己重置，只有当上一次匹配失败才会重置为 0 ，因此，当你需要反复使用同一个正则表达式的时候，请在每次匹配新的字符串之前重置 lastIndex！

5.String.prototype.replace()、String.prototype.search()、String.prototype.split()

'a1a'.replace(/a/, 'b'); // 'b1a'
'a1a'.replace(/a/g, 'b'); // 'b1b''a1a'.search(/a/); // 0
'a1a'.search(/a/g); // 0'a1a'.split(/a/); // ["", "1", ""]
'a1a'.split(/a/g); // ["", "1", ""]

场景一：正则与数值

数值判断

/[0-9]+/

[] 字符集，使用连字符 - 表示指定的字符范围，如果想要匹配连字符，需要挨着方括号放置，或进行转义，0-9 表示匹配从 0 到 9 的数字字符，常用的还有 a-z 匹配小写字母，\u4e00-\u9fa5 匹配汉字等，如果只是匹配数字，还可以使用字符集缩写 \d

+ 限定符一个或多个

该表达式缺点：不是全字符匹配，存在误判，如 /[0-9]+/.test(‘a1’) === true

/^\d+$/

^匹配字符串开始位置，当结合 m 修饰符时，匹配某一行开始位置

$匹配字符串结束位置，当结合 m 修饰符时，匹配某一行结束位置

该表达式缺点：

不能匹配带符号的数值，如+1，-2

不能匹配小数，如：3.14159

/^{1?\d(.\d+)?$/}

^{() 圆括号内是一个子表达式，当圆括号不带任何修饰符时，表示同时创建一个捕获组

？？在正则中有多种含义，作为限定符时，表示匹配零到一个

\. .可以匹配除换行符之外的任意字符，当结合s修饰符时，可以匹配包括换行符在内的任意字符

该表达式缺点：不能匹配无整数部分的小数，如.123会匹配失败；捕获组会有额外的开销}

^{/^{2?(?:\d*.)?\d+$/}}

^{(?:) 创建一个非捕获组}

^{*限定符，匹配零个或多个}

^{缺点：不能匹配无小数部分的数值；不能匹配科学计数法，如 1e2、3e-1、-2.e+4}

^{完整的数值正则}

^{/^[+-]?(?:\d+\.?|\d*\.\d+)(?:e[+-]?\d+)?$/i}

^{用正则处理数值}

^{数值的解析}

^{const reg = /[+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?(?=px|\s|$)/gi;function execNumberList(str) {reg.lastIndex = 0;let exec = reg.exec(str);const result = [];while (exec) {result.push(parseFloat(exec[0]));exec = reg.exec(str);}return result;// let array=str.split(" ");// res=array.map(item=>parseFloat(item,10));// return res.length?res.join(','):null //不会用正则的我
}console.log(execNumberList('1.0px .2px -3px +4e1px')); // [1, 0.2, -3, 40]
console.log(execNumberList('+1.0px -0.2px 3e-1px')); // [1, -0.2, 0.3]
console.log(execNumberList('1px 0')); // [1, 0]
console.log(execNumberList('-1e+1px')); // [-10]}

^{(?=expression)}

^{正向肯定环视 / 顺序肯定环视 / 先行断言}

^{用于匹配符合条件的位置, 匹配到位置为止}

^{类似的语法还有：}

^{(?!expression) 正向否定环视 / 顺序否定环视 / 先行否定断言}

^{(?<=expression) 反向肯定环视 / 逆序肯定环视 / 后行断言，es2018 新增}

^{(?<!expression) 反向否定环视 / 逆序否定环视 / 后行否定断言，es2018 新增}

^{全局匹配，用于取出目标字符串中所有符合条件的结果}

^{需要注意的点：}

^{按照 CSS 规范，只有数值为 0 才可以省略单位，这种情况没有必要靠正则来过滤}
^{这个例子中只验证了 px 单位，实际还存在 pt、em、vw 等单位，并且没有考虑百分比的情况}
^{实际工作中，要根据需求追加处理逻辑}

^{数值转货币格式}

^{//数值转货币
function formatCurrency(str) {// ……const reg=/(\d)(?=(\d{3})+(,|$))/greturn str.replace(reg,`$1,`)}
// js方式function formatCurrency1(str) {// ……let res=''let count=0;for(let i=str.length-1;i>=0;i--){if(count==2&&i!=0){res=','+str[i]+res;count=-1;}else{res=str[i]+res}count++;}return res;}}

^{const reg = /(\d)(?=(?:\d{3})+(?:,|$))/g;
function formatCurrency(str) {return str.replace(reg, '$1,');
}}

^{n}

^{限定符，表示重复 n 次，n 必须是非负整数}

^{类似的语法还有：}

^{{n, m} 表示重复 n 到 m 次，n 和 m 都必须是非负整数，且 n <= m}

^{{n,} 表示重复 n 次以上}

^$n

^{用于 replace 的字符串中，表示第 n 个捕获组，n 可以从 1 到 9}

^{$& 表示本次完整的匹配，所以这段代码还可以改写为：}

^{const reg = /\d(?=(?:\d{3})+(?:,|$))/g;
function formatCurrency(str) {return str.replace(reg, '$&,');
}}

^{在ES2018以上的环境，还可以使用反向环视}

^{const reg = /(?<=\d)(?=(?:\d{3})+(?:,|$))/g;
function formatCurrency(str) {return str.replace(reg, ',');
}}

^{其它注意事项}

^{环视中的圆括号也会生成捕获组，所以都要采用 (?}