摘要：正則引言正則是一個前端必須掌握的知識。但是由于用的少，忘了記，記了忘，導致面試經常坐蠟。這里上篇先介紹正則的規則，下篇結合一些具體題目，帶大家重新學習鞏固一下正則，爭取面試給自己加分。

正則是一個前端必須掌握的知識。但是由于用的少，忘了記，記了忘，導致面試經常坐蠟。這里上篇先介紹正則的規則，下篇結合一些具體題目，帶大家重新學習鞏固一下正則，爭取面試給自己加分。

let regx = /^[u4e00-u9fa5]{0,}$/

 let reg = /^[u4e00-u9fa5]{2,4}$/

把aaabbbccc變成abc
思路1，轉換成數組，利用set去重，再join
思路2，正則(有局限性，必須是重復元素挨一起的，且不是這種鑲嵌的"abac")

let a = "aabbbccc"
let b = a.replace(/(S)1+/g,function (res) { //這里1指的是第一個分組
    return res[0]
})
console.log(b) //"abc"

var s1 = "get-element-by-id"; 給定這樣一個連字符串，寫一個function轉換為駝峰命名法形式的字符串 getElementById

    let a = "get-element-by-id"
    // 這個題目如果想分割單詞是比較麻煩的
    let f = function(s) {
        return s.replace(/-w/g, function(x) {
            return x.slice(1).toUpperCase();
        })
    }
    console.log(f(a)) //getElementById

2017-05-11轉換成5/11/2017

let a = "2017-05-11"
let reg = /(d{4})-(d{2})-(d{2})/g
b=a.replace(reg,function (res, g1, g2, g3) {
    return `${g2.slice(1)}/${g3}/${g1}`
})
console.log(b) //5/11/2017

    var a = "1234567"
    var reg = /d{1,3}(?=(d{3})+$)/g
    var b = a.replace(reg,function (res,group,index) { //如果有？的話分組指的是最后一個
    console.log(res,group,index)   //所以group永遠是4，5，6
        return res + ","
    })
    console.log(b) //1,234,567

寫個vue項目里面經常使用的千分位過濾方法

//全局注冊
Vue.filter("toThousands", function(num) {
 const strArr = (num + "").split(".")
  strArr[0] = strArr[0].replace(/d{1,3}(?=(d{3})+$)/g, (match) => {
    return match + ","
  })
  return strArr.join(".")
})
// {{1234|toThousands}}  ==>渲染為 1,234
// {{1234.23|toThousands}}  ==>渲染為 1,234.23

let url = "www.baidu.com?age=11&name=fyy"
let reg = /([^?&=]+)=([^?&=]+)/g
var obj = {}
url.replace(reg,function(){
    obj[arguments[1]] = obj[arguments[2]]
})
console.log(obj)

身份證號碼可能為15位或18位，15位為全數字，18位中前17位為數字，最后一位為數字或者X

let reg = /(^d{15}$)|(^d{18}$)|(^d{17}(d|X|x)$)/

“Is is the cost of of gasoline going up up” => ""is the cost of gasoline going up""

let a = "Is is the cost of of gasoline going up up"
let reg = /([a-z]+) 1/ig 
//注意不能寫成這樣let reg = /(w)+ 1/ig 匹配單個字符是錯的，只會匹配到最后一個
//(w+) 1/ig 這么寫也行
let b = a.replace(reg,function (res) {
    return res.split(" ")[0]
})
console.log(b) // Is the cost of gasoline going up

var a = "0001230000"
var b=a.replace(/(d)1+$/ig,function(res){
    return res.replace(/0/g,"x") //replace改變不了原字符串
})
console.log(b) //000123xxxx

.可以出現可也以不出現，但是一旦出現后面必須跟一位或者多位數字
最開始可以有+/-也可以沒有
整數部分，一位數可以是0-9，多位數不能以0開頭

let reg = /^-?(d|([1-9]d+))(.d+)?$/

將"20151214"轉化為繁體"貳零壹伍壹貳壹肆"

var str = "20151214"
var ary = ["零","壹","貳","叁","肆","伍"]
str =str.replace(/d/g,function () {
    return ary[arguments[0]]  //參數的第一個元素就是匹配的內容
})
console.log(str) //->貳零壹伍壹貳壹肆

let str = "zzzzzzzzzguowoaini"
let obj = {}
str.replace(/[a-z]/ig,function () {
    let val = arguments[0]
    obj[val] >=1?obj[val]+=1:obj[val] =1
})
let max = 0
for(let key in obj){
    obj[key]>max?max=obj[key]:null
}
console.log(max)   //-->9

現在我要做一個搜索高亮功能，需要一個拆分的正則來篩選出需要高亮的文本／比如我輸入1，我需要"賬戶A同步B 121"拆分成這個數組[‘賬戶A同步B ’,"1","2",1"] 前面的1和后面的1都要高亮

let reg = /(?<=1)|(?=1)/g
"賬戶A同步B 121".split(reg)
//["賬戶A同步B ", "1", "2", "1"]

我們選用一個經典的模版引擎pug,進入它的入門指南，pug.compileFile根據傳入的字符串模版，生成了一個方法compiledFunction，compiledFunction根據傳入的數據參數，生成不同的html代碼。問題來了，怎么實現compiledFunction這個函數？

//- template.pug
p #{name}的 Pug 代碼！

const pug = require("pug");

// 編譯這份代碼
const compiledFunction = pug.compileFile("template.pug");
// 渲染一組數據
console.log(compiledFunction({
  name: "李莉"
}));
// "
李莉的 Pug 代碼！
"
// 渲染另外一組數據
console.log(compiledFunction({
  name: "張偉"
}));
// "
張偉的 Pug 代碼！
"

分析：compileFile這個函數接受一個對象參數，根據屬性值，執行相應的正則替換

function compiledFunction (args) {
        let template =  "p #{age1}的 Pug 代碼！"
        //第一步，先生成標簽 
{name}的 Pug 代碼！

        let a = template.replace(/^([a-z]) (.+)/g,function () { //S沒辦法匹配空格，.可以
            return `<${arguments[1]}>${arguments[2].slice(1)}<${arguments[1]}/>`
        })
        //第二步，再替換內容
        a = a.replace(/{(.+)}/g,function (pat,group1) {
            return args[group1]
        })
        console.log(a) //
fyy的 Pug 代碼！

    }
    
    compiledFunction ({age1:"fyy"}) //
fyy的 Pug 代碼！