专栏首页Flutter入门有趣的正则表达式

有趣的正则表达式

regex.jpg

听到正则表达式,大家一定不会陌生。工作项目中也经常使用正则表达式来校验文本的是否匹配规则。通常都会直接上网找寻各种格式输入的正则匹配式。比如电话/邮件等等。

除了匹配规则外,正则表达式也经常用来截取字符串,使用正则表达式也有格外的快感~

问题

下面记录一个例子

将"/test/info?page={page}&limit={limit}"这段地址中的大括号中的page和limit替换成字典中的数值。

看到这个case,实际上,二话不说,脑中立马生成了第一个方案

方案1

无脑干.jpg

看到这个例子,很快回去写一个String的处理表达式,来将其进行转换。如下

const targetUrl = '/test/info?page={page}&limit={limit}'

const params = {
    page: 1,
    limit: 10
}

const replace1 = (url, params) => {
    let firstIndex = url.indexOf('?');
    let resultUrl=url;

    if (firstIndex != -1) {
        //先取到后面一段
        let result = url.slice(firstIndex + 1);
        let items = result.split('&');
        items.forEach(item => {
            let dic = item.split('=');
            let key=dic[0];
            resultUrl=resultUrl.replace('{'+key+'}',params[key]);
        });        
    }
    return resultUrl
}

运行这段代码,最后得到了/test/info?page=1&limit=10

这样的代码,很实际。只要经过自己的逻辑判断,就可以完成,但是这样的代码真是又长又臭。对字符串经过一系列的切割和替换,最后替换成了我们需要的url。

下面来看看正则表达式的方法

方案2

观察发现,其实我们的需求就是匹配得到被{}的文本,将其替换成我们的参数。 那我们的正则匹配式,就是需要以{开头,以}结尾的匹配字段。 好。

先通过我们的思路,先来一个正则

const regex0=(url,params)=>{
    let resultUrl = url;
    //就是{}开头结尾来得到数值
    let regex=/\{\w+\}/g
    let matter=url.match(regex);
    console.log(matter);
    
    if(matter && matter.length){
        matter.forEach(item=>{
            //这里我们知道,我们得到的是包含有{}的字符串.需要将这个符号去掉
            let temp = item.slice(1,item.length-1);
            console.log(temp);
            resultUrl= resultUrl.replace(item,params[temp]);
        })
    }
    return resultUrl;
}

上面的正则表达式的写法,是不是就优雅了一些呢? 但是我们还是对字符串进行了剪切。作为强迫症的我们,怎么可以又对其进行剪切呢。宁愿拼接也不愿意剪切。哼~

加上条件原则,再来一个正则

const regex2=(url,params)=>{
    let resultUrl = url;
    //以{开头,匹配结果在{之后,以}结尾,匹配结果在}之前
    let regex=/(?<=\{)\w+(?=\})/g
    let matter=url.match(regex);
    console.log(matter);
    
    if(matter && matter.length){
        matter.forEach(item=>{
            //这里得到的item,就是去掉{}之后的值
            console.log('item='+item);
            resultUrl= resultUrl.replace('{'+item+'}',params[item]);
        })
    }
    return resultUrl;
}

上面这个正则就有趣多了。通过(?=exp)(?<=exp)这两个表达式,将匹配规则中不需要匹配的部分给去掉了。这样我们操作起来,看起来就优雅了好多~~~

方案3

还有第三个方案?!

what.gif

强迫症的我们发现,我用来两组(?=exp)这样的表达式才完成去头去尾的任务。然而!!发现这组正则匹配的规则可以是

const regex3=(url,params)=>{
    let resultUrl = url;
    //匹配规则更改成不以{开头,用}结尾的字符串
    let regex=/[^{]\w+(?=\})/g
    let matter=url.match(regex);
    console.log(matter);
    
    if(matter && matter.length){
        matter.forEach(item=>{
            console.log('item='+item);
            resultUrl= resultUrl.replace('{'+item+'}',params[item]);
        })
    }
    return resultUrl;
}

这样的匹配规则似乎更合理。 一瞬间感觉真是充满趣味性的解。看待一个问题,我们从正面(以{开头)和反面(不以{为开头)似乎都能得到我们想要匹配的结果~!

问题2

经过上面一段之后,对笔者来说,像是开启了一扇新世界的大门。从来只是简单的来匹配文本的正则,从文本中窃取文本的这种事从来都是用字符串来回的截取和操作才完成固定的文本获取的笔者如获至宝。 那我们赶紧就上第二个例子吧。 需求:要从下面这个抓到的html文本中获取浏览数(包含<em>/12<td>)为9的发帖的用户id(tid)是多少?

target.png

正常的处理问题的逻辑:观察目标文本。将上面的需求,就是需要截取一段文本,其中包含的<em>/12<td>这段文本,然后取出其中的tid字段。

方案1

同样,面对这样一个html结构的文本。第一个在我脑子出现的方案就是将其解析成dom模型。然后来对对应的节点和属性进行判断。 大概思路就是 找到td中的tr,并且该td中的tr包含着<em>/12<em>的内容。然后取出tid的属性。 这样的方案,就是按照结构性的数据的思路,来获取。 听到这种解题方案就觉得麻烦,需要生产dom模型,然后遍历选择。

这个方案只能说差评了~

优雅方案

OK。优雅方案大家一定想到了吧。咱们肯定得用正则来做呀。 好。那我们将我们的需求用正则的思路翻译一下: 观察得到,其实就是获取<em>/12<td>结尾,tid开头的字符串。同时只捕获tid=字段后面跟着的数据。

const targetText= '....'//很长很长的文本
//利用我们的(?=exp)等表达式,进行捕获.
const regex= /(?<=tid\=)\d+(?=[\s\S]*?\<\/em\>\/12\<\/td\>)/g;

最后就能直接匹配到我们想到的 tid数字了~

帅吧~ 撒花~

cheer.gif

总结

  • 正则匹配式不仅能够做文本的匹配,还能进行文本的截取~(废话!)合理的使用正则,能够大幅度的提高工作的效果
  • 有些问题,而且从相反的角度来想,会发现另一个天堂 ​

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 《动物魔法学校》儿童学编程Scratch之“外观”部分

    导读:本文通过一个案例《动物魔法学校》来学习Scratch语言的“外观”部分。之后通过一系列其他功能的综合运用对作品功能进行了扩展。

    一石匠人
  • 天干地支五行八卦的对应关系

    一石匠人
  • 复杂业务下向Mysql导入30万条数据代码优化的踩坑记录

    从毕业到现在第一次接触到超过30万条数据导入MySQL的场景(有点low),就是在顺丰公司接入我司EMM产品时需要将AD中的员工数据导入MySQL中,因此楼主负...

    haifeiWu
  • SQL中GROUP BY用法示例

    GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Excel比较多的话,GROUP BY比较类...

    Awesome_Tang
  • 儿童创造力教育与编程教育的碰撞——MIT雷斯尼克教授最新理论梗概

    儿童编程教育已经在我国各一线二线城市疯狂出现,颇有“烂大街”的趋势。我们不禁要问很多很多问题:

    一石匠人
  • 我不是算命先生,却对占卜有了疑惑——如何论证“占卜前提”的正确与否

    事出有因,我对《周易》感兴趣了很多年。只是觉得特别有趣,断断续续学习了一些皮毛。这几天又偶然接触到了《梅花易数》,觉得很是精彩,将五行八卦天干地支都串联了起来。...

    一石匠人
  • 声音功能让儿童编程更有创造性

    导读:Scratch中声音功能非常强大,除了常规的音效,你甚至可以模拟各种乐器的各个发音、设置节拍、休止……如果你愿意,甚至可以用它创作一个交响乐。我们可以引导...

    一石匠人
  • 【系统设置】CentOS 修改机器名

    ken.io
  • 一张图理清《梅花易数》梗概

    学《易经》的目的不一定是为了卜卦,但是了解卜卦绝对能够让你更好地了解易学。今天用一张思维导图对《梅花易数》的主要内容进行概括,希望能够给学友们提供帮助。

    一石匠人
  • 什么样的人生才是有意义的人生——没有标准的标准答案

    【导读】其实我们可以跳出这个小圈圈去更加科客观地看一下这个世界。在夜晚的时候我们仰望天空,浩瀚的宇宙中整个地球只是一粒浮尘,何况地球上一个小小的人类?在漫长的历...

    一石匠人

扫码关注云+社区

领取腾讯云代金券