JS核心知识点梳理——正则篇（下）

jemygraw 发布于2019-08-26 13:47 / 1716人阅读

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

正则

引言

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

面试题实战 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]] = 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 = /([a-z]+) 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: "李莉"
}));
// "李莉的 Pug 代码！"
// 渲染另外一组数据
console.log(compiledFunction({
  name: "张伟"
}));
// "张伟的 Pug 代码！
"

分析：compileFile这个函数接受一个对象参数，根据属性值，执行相应的正则替换

function compiledFunction (args) {
        let template =  "p #{age1}的 Pug 代码！"
        //第一步，先生成标签 {name}的 Pug 代码！

        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) //
fyy的 Pug 代码！

    }
    
    compiledFunction ({age1:"fyy"}) //
fyy的 Pug 代码！

idc机房托管服务器托管 js核心知识 java核心知识点梳理 JS正则

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109515.html

JS核心知识点梳理——正则篇（上）

摘要：正则引言正则是一个前端必须掌握的知识。这里上篇先介绍正则的规则，下篇结合一些具体题目，带大家重新学习巩固一下正则，争取面试给自己加分。正则 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言正则是一个前端必须掌握的知识。但是由于用的少，忘了记，记了忘，导致面试经常坐蜡。这里上篇先介绍正则的规则，下篇结合一些...

happyhuangjinjin 2019-08-26 13:46 评论0 收藏0
前端开发收集 - 收藏集 - 掘金

摘要：责编现代化的方式开发一个图片上传工具前端掘金对于图片上传，大家一定不陌生。之深入事件机制前端掘金事件绑定的方式原生的事件绑定方式有几种想必有很多朋友说种目前，在本人目前的研究中，只有两种半两种半还有半种的且听我道来。 Ajax 与数据传输 - 前端 - 掘金背景在没有ajax之前，前端与后台传数据都是靠表单传输，使用表单的方法传输数据有一个比较大的问题就是每次提交数据都会刷新页面，用...

ygyooo 2019-08-20 17:15 评论0 收藏0
JS核心知识点梳理——变量篇

摘要：核心知识点梳理数据篇看了一些资料，结合高程和对核心知识点进行了梳理。所以，一共有种声明变量的方法。凡是在声明之前就使用这些变量，就会报错。还是那句话，建议大家掌握核心知识点，细枝末节的东西就随意啦。 JS核心知识点梳理——数据篇 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 看了一些资料，结合ES6、高程和MD...

aristark 2019-08-23 15:32 评论0 收藏0
『不再迷茫 - 正则表达式』JS正则要点梳理持续更新

摘要：写在前面正在看的源码看到了部分感觉以前看的正则表达式基础知识已经完全不够用了现翻阅博客资料将一些中正则表达式难用的部分总结归纳方便自己和友翻阅正则分组重复匹配对于重复的匹配我们经常使用到正则表达式的分组功能我们使用正则匹配地址来实践一下假 [TOC] 写在前面 - Lionad 正在看VueJS的源码, 看到了HtmlParser部分, 感觉以前看的正则表达式基础知识已经完全不够用了,...

SQC 2019-08-26 11:32 评论0 收藏0
TomiOS框架

摘要：使用框架，动画的大部分帧渲染都是苹果为我们做好的。苹果审核周期太长，一旦出现严重难以快速上线新版本。天弘基金作为一家在基金，金融行业高速发展的公司，面临着多重挑战，如庞大的用户群体实现一个简单的画板实现一个简单的画板。最好用的开源跨平台 Js bridge 新秀 - DSBridge iOS 篇看了 github 介绍，DSBridge 当之无愧是目前地球上最好的 IOS/Andr...

lansheng228 2019-06-25 16:38 评论0 收藏0