V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
black11black
V2EX  ›  JavaScript

javascript 使用正则表达式全局替换字符串,如何在匹配结果基础上修改?

  •  
  •   black11black · 2020-08-13 15:50:07 +08:00 · 1997 次点击
    这是一个创建于 1323 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如题,想给代码做个高亮,现在有这么个需求

    比如现在有 html 字符串如下:

    2020-01-01 20:20:20 [INFO] log test 1
    2020-02-02 10:10:10 [INFO] log test 2
    

    我想讲这个字符串修改为这样

    <span style="color:green">2020-01-01 20:20:20</span> [INFO] log test 1
    <span style="color:green">2020-02-02 10:10:10</span> [INFO] log test 2
    

    即用正则表达式匹配到时间,然后再将匹配到的字符串两边加上<span></span>

    正则的部分很简单可以匹配到,但是替换怎么搞呢?

    有没有 js 大佬讲解一下这个需求能不能通过string.replace(/regexp/g , 'target')这种命令来完成,还是说要写一大段搜索-替换的逻辑才行

    5 条回复    2020-08-13 16:47:55 +08:00
    rain0002009
        1
    rain0002009  
       2020-08-13 16:20:34 +08:00   ❤️ 1
    string.replace(/regexp/g , '<span style="color:green">$&</span>')
    Juszoe
        2
    Juszoe  
       2020-08-13 16:27:31 +08:00   ❤️ 1
    时间的匹配你自己修改一下
    "2020-01-01 [INFO] log test 1".replace(/(\d{4}-\d{2}-\d{2})/g, '<span>$1</span>')
    $1 表示正则中,第一个括号括起来的内容
    Shawn211
        3
    Shawn211  
       2020-08-13 16:36:22 +08:00   ❤️ 1
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace

    '2020-01-01 20:20:20 [INFO] log test 1'.replace(/^(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2})(.*)$/, (match, p1, p2) => `<span style="color:green">${p1}</span>${p2}`)
    sockball07
        4
    sockball07  
       2020-08-13 16:42:02 +08:00
    replace 参数 2 支持匿名函数,写 /看 起来比较清晰点
    qiutianaimeili
        5
    qiutianaimeili  
       2020-08-13 16:47:55 +08:00
    let str='2020-01-01 20:20:20 [INFO] log test 1\n2020-02-02 10:10:10 [INFO] log test 2';
    str.replace(/\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}/g,'<span style="color:green" >$&</span>');
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3262 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 14:16 · PVG 22:16 · LAX 07:16 · JFK 10:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.