面試必背系列—正則(下)
正則
引言
正則是一個前端必須掌握的知識。但是由於用的少,忘了記,記了忘,導致面試經常坐蠟。這裡上篇先介紹正則的規則,下篇結合一些具體題目,帶大家重新學習鞏固一下正則,爭取面試給自己加分。
面試題實戰
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>