JS核心知识点梳理——正则篇(下)

正则

1340.640.jpg

引言

正则是一个前端必须掌握的知识。但是由于用的少,忘了记,记了忘,导致面试经常坐蜡。这里上篇先介绍正则的规则,下篇结合一些具体题目,带大家重新学习巩固一下正则,争取面试给自己加分。

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

写个vue项目里面经常使用的千分位过滤方法

//全局注册
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 中的参数

let url = 'www.baidu.com?age=11&name=fyy'
let reg = /([^?&=]+)=([^?&=]+)/g
var obj = {}
url.replace(reg,function(){
    obj[arguments[1]] = arguments[2]
})
console.log(obj)

类似的 写个解析cookie的

var cookie = {}
var reg = /([^?;]+)=([^?;]+)/g
document.cookier.replace(reg,function(){
   cookie[arguments[1].trim()] = arguments[2].trim()
})
console.log(cookie)

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>

======================================================
再补充几个工作中经常用的

补1. 邮编(6位)

const reg = /^[0-9]{6}$/

补2. 用户名,允许使用大小写英文字母、数字,长度6-23个字符

const reg = /^\[a-zA-Z0-9\]{6,23}$/

补3. 必须包含数字以及字母,长度6-30个字符

负向前瞻 具体可以看我的这边文章正则(上)
怎么理解这个正则呢?
前瞻嘛,就是后面出现什么则匹配生效
负向前瞻,就是后面不出现什么则匹配生效
这里 (?![0-9]+$) 表示后面如果一直到结尾都不出现全部是数字,则匹配生效
同理(?![a-zA-Z]+$)表示后面一直到结尾都不出现全部是字母则匹配生效
合起来就是必须从开头(^)到结尾不全是数组或者字母则匹配生效
匹配的是6到30个数组或者字母

const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[a-zA-Z0-9]{6,30}$/

补4. 必须包含数字以及大小写,长度6-30个字符

正向前瞻 后面必须出现什么

/^(?=[0-9a-zA-Z]*[0-9])(?=[0-9a-zA-Z]*[a-z])(?=[0-9a-zA-Z]*[A-Z])[0-9a-zA-Z]{8,20}$/

补5 邮箱

/^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/

大于0的有效数

/^([1-9]\d*(\.\d*)?)|(0\.\d*[1-9][0-9])|(0\.\d*[1-9])$/

前端小羊羊
爱健身,爱编码,爱生活,欢迎小妹妹来撩我
1.3k 声望
658 粉丝
0 条评论
推荐阅读
vue3简易实现——响应式原理
1.前言之前听有人吐槽,说面试让实现一个简易vue3。咱们先不说这题离不离谱,简单分析下,如果遇到了该怎么思考。首先vue分为以下几个部分响应系统渲染器(mount,patch,domdiff)组件化编译器编译器不可能写出来...

Runningfyy阅读 825

安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城31阅读 7.1k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco19阅读 2k评论 2

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.9k

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城18阅读 7.6k评论 3

封面图
「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...

wuwhs17阅读 2.3k

封面图
1.3k 声望
658 粉丝
宣传栏