JS正则表达式面试题及详细答案（实战版）

JS正则表达式面试题及详细答案（实战版）本次面试题分为基础题、进阶题、实战编程题三个模块，覆盖初级、中级前端面试高频考点，题目均为企业真实面试原题，答案通俗易懂，附带解析和代码示例，可直接用于面试复习。一、基础概念题（高频简答）1、JS正则中g、i、m修饰符分别代表什么含义？答案：g（global）全局匹配：默认正则匹配到第一个符合规则的内容就会停止，加g修饰符会匹配字符串中所有符合规则的内容，不会终止。i（ignoreCase）忽略大小写：匹配时不区分英文字母大小写，A/a视为一致。m（multiline）多行匹配：修改^和$的行为，原本^只匹配字符串开头、$只匹配字符串结尾，加m后，会匹配每一行的行首和行尾。2、解释正则中^和$的作用，不加会有什么问题？答案：^：匹配字符串行首（开启m修饰符为每行行首）$：匹配字符串行尾（开启m修饰符为每行行尾）如果不添加首尾限定符，正则会做模糊匹配，只要字符串中包含符合规则的片段就会匹配成功，导致校验失效。示例：校验纯数字，/\d+/会匹配123abc（错误），而/^\d+$/只会匹配完整数字（正确）。3、说说\d、\w、\s元字符的含义，以及对应的反向匹配？答案：\d：匹配0-9数字；反向：\D匹配非数字\w：匹配字母、数字、下划线（a-z、A-Z、0-9、_）；反向：\W匹配非单词字符\s：匹配空格、制表符、换行符等空白字符；反向：\S匹配非空白字符4、正则中*、+、?、{n}、{n,}、{n,m}量词区别？答案：*：匹配前面表达式0次或多次（可有可无）+：匹配前面表达式1次或多次（至少1次）?：匹配前面表达式0次或1次（最多1次）{n}：精准匹配n次{n,}：匹配至少n次（无上限）{n,m}：匹配n到m次（包含n、m）5、什么是正则贪婪匹配？如何开启非贪婪匹配？答案：JS正则默认贪婪匹配：量词会尽可能匹配最长的符合规则的内容。非贪婪匹配（惰性匹配）：在量词后加?，尽可能匹配最短内容。示例对比：PlainText

//贪婪匹配

'<div>123</div>'.match(/<.+>/)//结果：<div>123</div>（最长匹配）

//非贪婪匹配

'<div>123</div>'.match(/<.+?>/)//结果：<div>（最短匹配）二、进阶核心题（面试高频坑点）1、正则中括号()、[]、{}各自的作用？答案：()分组符：1、将多个字符视为一个整体分组；2、捕获分组，可提取匹配内容；3、优先提升运算优先级[]字符集：匹配单个括号内的任意字符，无分组效果，支持范围a-z、0-9{}量词符：限定前面字符/分组的匹配次数重点坑点：[abc]匹配a或b或c（单个字符），(abc)匹配连续的abc（整体字符串）。2、什么是捕获组和非捕获组？区别是什么？答案：捕获组()：默认括号就是捕获组，会保存匹配到的内容，可通过\1、\2反向引用，或通过exec、match获取分组内容。非捕获组(?:)：只做分组，不保存匹配结果，无法反向引用，性能更高，适合仅需要分组、不需要提取内容的场景。示例：PlainText

//捕获组

'123abc'.match(/(\d+)(\w+)/)//["123abc","123","abc"]

//非捕获组

'123abc'.match(/(?:\d+)(\w+)/)//["123abc","abc"]仅保留第二个捕获组3、正则反向引用\1的作用？举一个实战场景答案：\1代表引用第一个捕获组匹配到的内容，\2引用第二个捕获组，以此类推。作用是强制前后匹配内容一致，常用于匹配重复字符、对称字符串。实战场景：匹配重复的汉字/单词、匹配闭合标签PlainText

//匹配两个相同的连续字符

constreg=/(\w)\1/

console.log('aabbcc'.match(reg))//["aa","a"]4、test()和match()、exec()的区别？答案：reg.test(str)：返回布尔值，仅判断字符串是否匹配正则，效率最高，适合单纯校验场景。str.match(reg)：字符串方法，返回匹配结果数组。加g修饰符返回所有匹配内容（无分组），不加g返回单次匹配+分组内容。reg.exec(str)：正则方法，支持连续全局匹配，每次调用会记录lastIndex，依次返回匹配结果，是唯一可以全局获取分组内容的方法。5、解释正则lastIndex属性，以及常见坑点答案：lastIndex是正则对象的属性，记录下一次匹配的起始索引，仅对开启g全局修饰符的正则生效。常见坑点：同一个全局正则重复test/exec，会出现匹配结果忽真忽假的问题。错误示例：PlainText

constreg=/\d/g

console.log(reg.test('123'))//true（匹配1，lastIndex=1）

console.log(reg.test('123'))//true（匹配2，lastIndex=2）

console.log(reg.test('123'))//true（匹配3，lastIndex=3）

console.log(reg.test('123'))//false（从索引3开始无内容，重置lastIndex=0）解决方案：每次匹配前手动置空reg.lastIndex=0，或每次新建正则实例。三、实战编程题（面试手写必考题）1、手写正则：去除字符串所有空格（首尾+中间）答案：PlainText

functionremoveAllSpace(str){

//\s匹配所有空白字符，g全局替换为空

returnstr.replace(/\s/g,'')

}

console.log(removeAllSpace('123abc'))//123abc拓展：仅去除首尾空格str.replace(/^\s+|\s+$/g,'')2、手写正则：校验手机号（国内11位手机号）答案：PlainText

functioncheckPhone(phone){

//规则：1开头，第二位3-9，后9位任意数字，完整11位

constreg=/^1[3-9]\d{9}$/

returnreg.test(phone)

}

console.log(checkPhone())//true

console.log(checkPhone('12812345678'))//false3、手写正则：校验邮箱格式答案：PlainText

functioncheckEmail(email){

//规则：前缀（字母数字下划线、点、减号）+@+域名+后缀

constreg=/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/

returnreg.test(email)

}

console.log(checkEmail('test@163.com'))//true

console.log(checkEmail('test@.com'))//false4、手写正则：驼峰命名转下划线命名（前端高频工具方法）答案：PlainText

functioncamelToUnderline(str){

//匹配大写字母，转为_+小写字母

returnstr.replace(/([A-Z])/g,'_$1').toLowerCase()

}

console.log(camelToUnderline('userNameInfo'))//user_name_info5、手写正则：提取字符串中所有数字答案：PlainText

functiongetNumber(str){

//匹配所有连续数字，若无结果返回空数组

returnstr.match(/\d+/g)||[]

}

console.log(getNumber('订单号20260930，数量5件'))//['20260930','5']6、解决经典正则匹配问题：匹配所有HTML标签（非贪婪）答案：PlainText

//匹配所有闭合/自闭合标签，非贪婪匹配避免超长匹配

conststr='<div>内容</div><p>文字</p>'

consttags=str.match(/<.+?>/g)

console.log(tags)//['<div>','</div>','<p>','</p>']四、压轴面试真题（进阶手撕）题目：实现字符串去重（去除连续重复字符）答案+解析：PlainText

functionuniqueStr(str){

//$1反向引用匹配到的字符，重复则替换为单个

returnstr.replace(/(\w)\1+/g,'$1')

}

console.log(uniqueStr('aaabbbccc111'))//abc1核心原理：利用捕获组匹配单个字符，再通过\1+匹配后续所有重复字符，统一替换为原字符。题目：正则实现千分位分隔符（数字格式化，超级高频）答案+解析：PlainText

functionformatNum(num){

//从后往前，每3位数字加逗号

returnnum.toString().replace(/(\d)(?=(\d{3})+$)/g,'$1,')

}

console.log(formatNum(123456789))/