正则表达式入门实践（一）

chanthuang 发布于2019-08-22 13:45 / 1227人阅读

摘要：一前言正则表达式入门实践系列文章适合熟悉至少使用过正则表达式的同学，在文章开始的时候我们都会带着问题去思考如何正确应用正则表达式解决出现的问题，在解决问题的过程中增长你的知识，提高你的实践能力。

一前言

正则表达式入门实践系列文章适合熟悉至少使用过正则表达式的同学，在文章开始的时候我们都会带着问题去思考如何正确应用正则表达式解决出现的问题，在解决问题的过程中增长你的知识，提高你的实践能力。所以该系列文章是偏实践的文章，读者一定要手动编写正则表达式提高自己的记忆。笔者能力有限，文章有疏漏之处，还请留言指正。

二正文 1.从一道面试题谈正则表达式

问题：正则表达式将阿拉伯数字每隔三位为一逗号分离
例如：11500000 -> 11,500,000

提示：正则表达式都是从左向右匹配的，而这个问题好像是从右向左的规则。但是不要忘了JS字符串强大的反转能力。最重要的是如何正确处理三个数字一组，零宽项断言用过吗？

"11500000".split("").reverse().join("").replace(/(d{3})(?=[^$])/g, "$1,").split("").reverse().join("");
(1). (?=[^$]) 会匹配除字符除末尾所有的位置
(2). /(d{3})(?=[^$])/ 会匹配连续的三个数字，并且这三个数字不能在字符串的末尾
(3)replace(/(d{3})/g, "$1,")，如果字符串长度刚好是三的倍数，那最后三个字符后也会加上逗号。比如 123456789.replace(/(d{3})/g, "$1,"); // 123,456,789,

这里用到的正则表达式就是：

const pattern = /(d{3})(?=[^$])/g;

//千万不要写成：
//const pattern = "/(d{3})(?=[^$])/g";
//这样pattern就不是正则了，而是真正的字符串

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

（1）字面量形式，用//包裹着，如上：/(d{3})(?=[^$])/，其中的g代表全局匹配
（2）函数的形式，如：new RegExp("(d{3})(?=[^$])","g");

(1)与(2)的区别：

1）最重要的一点，（2）函数形式第一个参数是以字符串的形式传入的，这就为动态创建正则表达式提供了可能，在标题2中你可以领略到它的威力。
2）利用函数创建正则表达式的时候要注意一些字符的转义，比如d,以为我们并不是匹配一个一个d，d要用在一起表示匹配所有的数字，所以这里的需要转义，转义的方式也很简单，就是加一个""
3)注意它们创建的方式。（2）函数中的第一个参数和（1）//里面的内容对应，第二个参数和g修饰符对应。

2.用正则实现lodash.js的_chunk函数

Example：

_.chunk(["a", "b", "c", "d"], 2);
// => [["a", "b"], ["c", "d"]]
 
_.chunk(["a", "b", "c", "d"], 3);
// => [["a", "b", "c"], ["d"]]

_.chunk函数传入两个参数，根据第二个size把第一个参数数组切分。有没有觉得这个和1.面试题有点像呢？只不过这里size不一定是3.
传统的思考方法是：遍历这个数组，递增size，使用slice函数生成新的数组返回。

function chunk(array,size){
    const length = array.length;
    const block = Math.floor(length/size);
    console.log(block);
    const extra = length % size;
    const newArray = [];
    const index = 0;
    for(let i=1;i<=block;i++){
        newArray.push(array.slice((i-1)*size,i*size));
    }
    if(extra > 0){//处理末尾不足size的情况
        newArray.push(array.slice(-extra))
    }
    return newArray;
}

那么思考如何用正则来实现呢？根据1.的正则表达式你能试着写一下吗？
思考30秒～～～～～～～～～～～～～～～～～～～～～～～～～～～

其实答案很简单：

const chunk =(array,size) =>{
    const reg = new RegExp(`(w{${size}})(?=[^$])`,"g");
   return  array.join("").replace(reg,"$1-").split("-");
}

使用函数的方式创建正则表达式就可以实现。只不过这里使用的是w详相当于[0-9a-zA-Z].

源码上的处理兼容了多种可能。
下面附上库中源码：

function chunk(array, size) {
  size = Math.max(size, 0)
  const length = array == null ? 0 : array.length
  if (!length || size < 1) {
    return []
  }
  let index = 0
  let resIndex = 0
  const result = new Array(Math.ceil(length / size))

  while (index < length) {
    result[resIndex++] = slice(array, index, (index += size))
  }
  return result
}

3.开启真正的正则表达式

经过两个问题的引导，我们开始正式的正则表达式学习。
推荐几篇文章，大家可以先看一下了解正则表达式的基本知识。
参考链接：
全面讲解：https://segmentfault.com/a/11...

三后记

GPU云服务器云服务器正则表达式入门 python正则实践正则正则表达式正则匹配正则表达式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92396.html

正则表达式简单入门 & 实践

摘要：说到邮箱格式，我们简单分析下邮箱的命名方式一般分为三部分邮件地址邮箱域名地址邮件地址部分的规则如下英文字母数字下划线中划线点举几个栗子根据以上规则，我们先写一下邮件地址部分图示没什么问题继续往下走。前言平时的工作中有很多地方都要用到正则表达式，不得不说，正则的表达式非常强大，比如，我们常用的jquery选择器，非常方便，jquery的源码中，选择器部分应用了大量的正则表达式。然而很...

superw 2019-08-20 14:00 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
正则表达式

摘要：本文内容共正则表达式火拼系列正则表达式回溯法原理学习正则表达式，是需要懂点儿匹配原理的。正则表达式迷你书问世了让帮你生成和解析参数字符串最全正则表达式总结验证号手机号中文邮编身份证地址等是正则表达式的缩写，作用是对字符串执行模式匹配。 JS 的正则表达式正则表达式一种几乎可以在所有的程序设计语言里和所有的计算机平台上使用的文字处理工具。它可以用来查找特定的信息（搜索），也可以用来查...

bang590 2019-08-22 13:59 评论0 收藏0
前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

jsbintask 2019-08-21 12:05 评论0 收藏0