從一道JavaScript題目學點正則

rollback 發布于2019-08-20 14:23 / 833人閱讀

摘要：起因是看到一道題目的另外一種解法特別有意思，同時也做一點正則的筆記，好理解。

這是一篇普通的教程，同時也是我的一篇筆記。起因是看到一道題目的另外一種解法特別有意思，同時也做一點正則的筆記，好理解。

題目

我印象中的這道題目是：
有一組數組為[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的正則匹配

云服務器 GPU云服務器 javascript教學點 js正則表達式題目 javascript 正則 javascript正則

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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