从一道JavaScript题目学点正则

rollback 发布于2019-08-20 14:23 / 750人阅读

摘要：起因是看到一道题目的另外一种解法特别有意思，同时也做一点正则的笔记，好理解。

这是一篇普通的教程，同时也是我的一篇笔记。起因是看到一道题目的另外一种解法特别有意思，同时也做一点正则的笔记，好理解。

题目

我印象中的这道题目是：
有一组数组为[1,1,2,3,3,3,3,4,5,5,5,6,6]
使用js
把它变成[[1,1],2,[3,3,3],4,[5,5,5].[6,6]]

解法有很多，我这里只列出两种

解法一

我们平时的解法一般为：
数组嵌套，将含有相同的值得数组放入新数组里面
然后对新数组进行，对里面的嵌套数组进行个数判断并返回值，重新组成一个新数组
新数组就是答案

var arr = [1,1,2,3,3,3,3,4,5,5,5,6,6];
var tempArr = [];
var result = [];
var i,len,item,lastArr;

for(i = 0,len = arr.length;i < len;i++){
    item = arr[i];
    lastArr = tempArr.slice(-1)[0];

    if(!lastArr || lastArr[0] != item){
        lastArr = [];
        tempArr.push(lastArr);
    }

    lastArr.push(item);
}

for(i=0,len=tempArr.length;i 1 ? item : item[0]);
}

console.log(result);

解法二

如果我们用正则的话，那解法如下：

var arr = [1,1,2,3,3,3,3,4,5,5,5,6,6];

var result = "[" +
    (arr.toString() + ",")
        .replace(/(([^,]+,)2+)/g,"[$1],")
        .replace(/,(]|$)/g,"$1")
    + "]";

console.log(JSON.parse(result));

这样一下子就变得很高效，正则找出两个以上的相同值的位置，插入[]
然后打印出来即可。

从这段代码，我们可以看出，
先对把数组字符串化

var result = "[" +
    (arr.toString() + ",")
    + "]";

变成[1,1,2,3,3,3,3,4,5,5,5,6,6,]

然后匹配两个以互为相同的值，套上[]

var result = "[" +
    (arr.toString() + ",")
        .replace(/(([^,]+,)2+)/g,"[$1],")
    + "]";

最后是找到]前面多余的,

var result = "[" +
    (arr.toString() + ",")
        .replace(/(([^,]+,)2+)/g,"[$1],")
        .replace(/,(]|$)/g,"$1")
    + "]";

JSON.parse(result)转为数组对象，打印即可

正则表达式

通过解法二，我们有时候面对一些问题，其实还有更简单的解决方法

下面再补充一下正则的知识点

元字符

从.replace(/(([^,]+,)2+)/g,"[$1],")中，正则部分是/(([^,]+,)2+)/g

其中最前面的“/”与最后面的“/”是分隔符,表示正则表达式的开始与结束.

这里再补充元字符的说明

代码	含义
.	匹配除换行符以外的任意字符
w	匹配字母或数字或下划线或汉字
W	匹配任意不是字母或数字或下划线或汉字的字符
s	匹配任意的空白符
S	匹配任意非空白符
d	匹配数字
D	匹配非数字
	匹配单词的开始或结束
^	匹配字符串的开始
$	匹配字符串的结束

标志

最后的“g”标志表示正则表达式使用的global（全局）的状态.使用 global 标志表明在被查找的字符串中搜索操作将查找所有符合的项,而不仅仅是第一个.这也被称为全局匹配.【相关的标志还有i（ignoreCase,表示忽略大小写）、m（multiline,表示允许跨行）】，如下表所示

补充一下标志

标志	描述
g	全局搜索
i	不区分大小写搜索
m	多行搜索
y	执行“粘性”搜索,匹配从目标字符串的当前位置开始，可以使用y标志

限定符

然后我们再来看中间的主体部分(([^,]+,)2+)

字符组就是在[](方括号)中列举出所有的可能再去匹配，+是指匹配前面一个表达式1次或者多次，

补充一下限定符

代码	含义
*	复零次或更多次
+	重复一次或更多次
?	重复零次或一次
{n}	重复n次
{n,}	重复n次或更多次
{n,m}	重复n到m次

.replace(/(([^,]+,)2+)/g,"[$1],")中的$1匹配到的部分的替换，替换成[$1],

匹配的部分，值得是两个以上相同的值

.replace(/,(]|$)/g,"$1")就是去,]里的,

写得好乱···

我这篇文章也用到了对URL的正则匹配

idc机房托管专线服务 javascript教学点 js正则表达式题目 javascript 正则 javascript正则

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

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

一道小小的题目引发对javascript支持正则表达式相关方法的探讨

摘要：返回值返回值根据传入的参数类型和规则的不同，返回的内容不同，但总体来说，它是返回一个对象，而不是索引，如果没匹配到任何符合条件的字符串，则返回。本文发布在我的博客一道小小的题目引发对javascript支持正则表达式相关方法的探讨许可协议: 署名-非商业性使用-禁止演绎 4.0 国际转载请保留原文链接及作者。以前对于正则是非常惧怕的，因为看不懂和学不会。但最近项目中频繁的...

Scholer 2019-08-21 17:46 评论0 收藏0
AMD的一道面试题

摘要：之前的面试中，一直感觉模块化没有什么可以问的，不过昨天面试突然想到一个题目对于一个的模式下文件如下很多代码很多代码很多代码文件分别是什么时候加载的，如何加载的题目不难答案是和是在加载完后就加载。 showImg(https://segmentfault.com/img/bVseuJ); 模块化现在应该已经成为了稍微复杂一点前端开发的标配了。在es6中，都已经支持了的模块化。之前的...

xiaoqibTn 2019-08-19 17:23 评论0 收藏0
说说牛客上的一道 JavaScript 题目

摘要：原文牛客上有这么一道的题目。先来分析一下题目，和都从来，为什么同名的属性值不一样可以看出，是对这个函数的调用方式不一样，是函数的调用结果，而则是作为构造函数调用的结果。所以这题的重点应该是如何区分函数调用和构造函数调用。原文：http://blog.e10t.net/talk-abo... 牛客上有这么一道 JavaScript 的题目。 //填写内容让下面代码支持a.name = ...

jk_v1 2019-08-22 10:50 评论0 收藏0
前端优化 - 收藏集 - 掘金

摘要：虽然有着各种各样的不同，但是相同的是，他们前端优化不完全指南前端掘金篇幅可能有点长，我想先聊一聊阅读的方式，我希望你阅读的时候，能够把我当作你的竞争对手，你的梦想是超越我。如何提升页面渲染效率 - 前端 - 掘金Web页面的性能我们每天都会浏览很多的Web页面，使用很多基于Web的应用。这些站点看起来既不一样，用途也都各有不同，有在线视频，Social Media，新闻，邮件客户端...

VincentFF 2019-08-20 17:15 评论0 收藏0
JS中正则表达式研究（一）

摘要：因为做一道题，题目如下其中一个解答，引起了我对正则的研究兴趣，解答如下我对正则表达式中的正向肯定预查一直不带明白，所以趁这个机会研究一下。与此同时，对象的更新为下一次开始匹配的索引值。因为做一道题（http://www.codewars.com/kata/insert-dashes/solutions/javascript），题目如下： Write a function insert...

zhouzhou 2019-08-21 10:43 评论0 收藏0