JS核心知識點(diǎn)梳理——正則篇（下）

jemygraw 發(fā)布于2019-08-26 13:47 / 1866人閱讀

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

正則

引言

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

面試題實(shí)戰(zhàn) 1. 匹配漢字

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

2. 中國真實(shí)姓名

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

3. 字符串去重

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

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

4.轉(zhuǎn)駝峰

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

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

5. 日期格式化

2017-05-11轉(zhuǎn)換成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

6. JS實(shí)現(xiàn)千位分隔符

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

寫個(gè)vue項(xiàng)目里面經(jīng)常使用的千分位過濾方法

//全局注冊
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

7. 獲取 url 中的參數(shù)

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)

8. 驗(yàn)證身份證號

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

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

9. 句子去重復(fù)單詞

“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 匹配單個(gè)字符是錯(cuò)的，只會(huì)匹配到最后一個(gè)
//(w+) 1/ig 這么寫也行
let b = a.replace(reg,function (res) {
    return res.split(" ")[0]
})
console.log(b) // Is the cost of gasoline going up

10. 寫一個(gè)方法使得數(shù)字末尾的連續(xù)0變成x如0001230000變成000123xxxx

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

11. 有效數(shù)字驗(yàn)證：整數(shù)負(fù)數(shù)0小數(shù)

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

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

12. 字符整體替換

將"20151214"轉(zhuǎn)化為繁體"貳零壹伍壹貳壹肆"

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

13. 出現(xiàn)字符最多的次數(shù)

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

14.搜索高亮功能的正則分割

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

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

15. pug模版引擎的基本原理

我們選用一個(gè)經(jīng)典的模版引擎pug,進(jìn)入它的入門指南，pug.compileFile根據(jù)傳入的字符串模版，生成了一個(gè)方法compiledFunction，compiledFunction根據(jù)傳入的數(shù)據(jù)參數(shù)，生成不同的html代碼。問題來了，怎么實(shí)現(xiàn)compiledFunction這個(gè)函數(shù)？

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

const pug = require("pug");

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

分析：compileFile這個(gè)函數(shù)接受一個(gè)對象參數(shù)，根據(jù)屬性值，執(zhí)行相應(yīng)的正則替換

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

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

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