面試必背系列—正則（下）
正則
引言
正則是一個前端必須掌握的知識。但是由於用的少，忘了記，記了忘，導致面試經常坐蠟。這裡上篇先介紹正則的規則，下篇結合一些具體題目，帶大家重新學習鞏固一下正則，爭取面試給自己加分。
面試題實戰
1. 匹配漢字
let regx = /^[\u4e00-\u9fa5]{0,}$/
2. 中國真實姓名
let reg = /^[\u4e00-\u9fa5]{2,4}$/
3. 字串去重
把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'
4.轉駝峰
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
5. 日期格式化
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
6. JS實現千位分隔符
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
7. 獲取 url 中的引數
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. 驗證身份證號
身份證號碼可能為15位或18位，15位為全數字，18位中前17位為數字，最後一位為數字或者X
let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
9. 句子去重複單詞
“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 = /\b([a-z]+) \b\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
10. 寫一個方法使得數字末尾的連續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. 有效數字驗證：整數負數0小數
.可以出現可也以不出現，但是一旦出現後面必須跟一位或者多位數字
最開始可以有+/-也可以沒有
整數部分，一位數可以是0-9，多位數不能以0開頭
let reg = /^-?(\d|([1-9]\d+))(\.\d+)?$/
12. 字元整體替換
將'20151214'轉化為繁體'貳零壹伍壹貳壹肆'
var str = '20151214'
var ary = ['零','壹','貳','叄','肆','伍']
str =str.replace(/\d/g,function () {
return ary[arguments[0]]//引數的第一個元素就是匹配的內容
})
console.log(str) //->貳零壹伍壹貳壹肆
13. 出現字元最多的次數
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.搜尋高亮功能的正則分割
現在我要做一個搜尋高亮
功能，需要一個拆分的正則來篩選出需要高亮的文字／比如我輸入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"]
15.pug模版引擎的基本原理
我們選用一個經典的模版引擎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: '李莉'
}));
// "<p>李莉的 Pug 程式碼！</p>"
// 渲染另外一組資料
console.log(compiledFunction({
name: '張偉'
}));
// "<p>張偉的 Pug 程式碼！</p>"
分析：compileFile這個函式接受一個物件引數，根據屬性值，執行相應的正則替換
function compiledFunction (args) {
let template ='p #{age1}的 Pug 程式碼！'
//第一步，先生成標籤 <p>{name}的 Pug 程式碼！<p/>
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) //<p>fyy的 Pug 程式碼！<p/>
}
compiledFunction ({age1:'fyy'}) //<p>fyy的 Pug 程式碼！</p>