高频率出现的正则表达式面试题

1.提取连续重复的字符

币安原题 将有重复的字符提取出来，例如12323454545666，提取[ '23', '45', '6' ]

正则结果

const collectRepeatStr = (str) => {
  let repeatStrs = []
  const repeatRe = /(.+)\1+/g
  
  str.replace(repeatRe, ($0, $1) => {
    $1 && repeatStrs.push($1)
  })
  
  return repeatStrs
}

分析过程

• 题目中有几个关键信息是
• 连续重复的字符

连续重复的字符数的长度是不限的(如23、45是两位、6是一位)

那什么是连续重复呢?

11是连续重复、22也是连续重复、111当然也是。也就是说某些字符X之后一定也是跟着X，就叫连续重复。如果很明确知道X就是1，那么/11+/也就可以匹配了，但关键是这里的X是不明确的，怎么办呢?。

使用反向引用的正则知识可以很方便解决这个问题。

第一步，写出表示有一个字符重复的正则

// 这里的X可用.来表示，即所有的字符，并用括号进行引用，紧跟着反向应用\1，也就是体现了连续重复的意思啦
let repeatRe = /(.)\1/
 
console.log(repeatRe.test('11')) // true
console.log(repeatRe.test('22')) // true
console.log(repeatRe.test('333')) // true
console.log(repeatRe.test('123')) // false

第二步，写出表示有n个字符重复的正则

因为并不确定是要匹配11还是45 45所以括号内需要用量词+来体现n个重复字符，而反向引用本身也可以是大于一个的，例如 45 45 45

let repeatRe = /(.+)\1+/
 
console.log(repeatRe.test('11')) // true
console.log(repeatRe.test('22')) // true
console.log(repeatRe.test('333')) // true
console.log(repeatRe.test('454545')) // true
console.log(repeatRe.test('124')) // false

第三步，提取所有连续重复的字符

const collectRepeatStr = (str) => {
  let repeatStrs = []
  const repeatRe = /(.+)\1+/g
  // 很多时候replace并不是用来做替换，而是做数据提取用
  str.replace(repeatRe, ($0, $1) => {
    $1 && repeatStrs.push($1)
  })
  
  return repeatStrs
}
 
 
console.log(collectRepeatStr('11')) // ["1"]
console.log(collectRepeatStr('12323')) // ["23"]
console.log(collectRepeatStr('12323454545666')) // ["23", "45", "6"]

2. 实现一个trim函数

老生常谈的题了，这里我们用两种思路实现 去除字符串的首尾空格

正则结果

// 去除空格法
const trim = (str) => {
  return str.replace(/^\s*|\s*$/g, '')    
}
// 提取非空格法
const trim = (str) => {
  return str.replace(/^\s*(.*?)\s*$/g, '$1')    
}

分析过程

初看题目我们脑海中闪过的做法是把空格部分删除掉，保留非空格的部分，但是也可以换一种思路，也可以把非空格的部分提取出来，不管空格的部分。接下来我们来写一下两种trim方法的实现

方式一、去除空格法

const trim = (str) => {
  return str.replace(/^\s*|\s*$/g, '')    
}
 
console.log(trim('  前端胖头鱼')) // 前端胖头鱼
console.log(trim('前端胖头鱼  ')) // 前端胖头鱼 
console.log(trim('  前端胖头鱼  ')) // 前端胖头鱼
console.log(trim('  前端 胖头鱼  ')) // 前端 胖头鱼

方式二、提取非空格法

const trim = (str) => {
  return str.replace(/^\s*(.*?)\s*$/g, '$1')    
}
 
console.log(trim('  前端胖头鱼')) // 前端胖头鱼
console.log(trim('前端胖头鱼  ')) // 前端胖头鱼 
console.log(trim('  前端胖头鱼  ')) // 前端胖头鱼
console.log(trim('  前端 胖头鱼  ')) // 前端 胖头鱼

3. 将字符串首字母转化为大写，剩下为小写

例如 hello world 转为为Hello World

正则结果

const capitalize = (string) => {
  const capitalizeRegex = /(?:^|\s+)\w/g
 
  return string.toLowerCase().replace(capitalizeRegex, (match) => match.toUpperCase())
}

分析过程

找到单词的首字母然后将其转化为大写字母就可以，单词前面可能是开头也可能是多个空格。

const capitalize = (string) => {
  const capitalizeRegex = /(?:^|\s+)\w/g
 
  return string.toLowerCase().replace(capitalizeRegex, (match) => match.toUpperCase())
}
 
console.log(capitalize('hello world')) // Hello World
console.log(capitalize('hello WORLD')) // Hello World

4.通过name获取url query参数

正则结果

const getQueryByName = (name) => {
  const queryNameRegex = new RegExp(`[?&]${name}=([^&]*)(&|$)`)
  const queryNameMatch = window.location.search.match(queryNameRegex)
  // 一般都会通过decodeURIComponent解码处理
  return queryNameMatch ? decodeURIComponent(queryNameMatch[1]) : ''
}

分析过程

url query上的参数 name=前端胖头鱼 所处的位置可能是

• 紧跟着问号 ?name=前端胖头鱼&sex=boy
• 在最后的位置 ?sex=boy&name=前端胖头鱼
• 在1和2之间 ?sex=boy&name=前端胖头鱼&age=100

所以只要处理三个地方基本就可以通过正则来取了

• name前面只能是?或者&
• value的值可以除了是&以为的任意东西
• value后面只能是跟着&或者是结束位置

const getQueryByName = (name) => {
  const queryNameRegex = new RegExp(`[?&]${name}=([^&]*)(?:&|$)`)
  const queryNameMatch = window.location.search.match(queryNameRegex)
  // 一般都会通过decodeURIComponent解码处理
  return queryNameMatch ? decodeURIComponent(queryNameMatch[1]) : ''
}
// 1. name在最前面
// http://juejin.cn/?name=前端胖头鱼&sex=boy
console.log(getQueryByName('name')) // 前端胖头鱼
 
// 2. name在最后
// http://juejin.cn/?sex=boy&name=前端胖头鱼
console.log(getQueryByName('name')) // 前端胖头鱼
 
 
// 2. name在中间
// http://juejin.cn/?sex=boy&name=前端胖头鱼&age=100
console.log(getQueryByName('name')) // 前端胖头鱼

 以上就是“高频率出现的正则表达式面试题”，你能回答上来吗?如果想要了解更多的相关内容，可以关注极悦Java官网。