正则表达式每日一练

测试工具下载
RegexBuddy

1.如何将浮点数点左边的数每三位添加一个逗号，如12000000.11转化为『12,000,000.11』?

//理解零宽断言
function enNumber(num){
      num.toString().replace(/(\d)(?=(\d{3})+\.)/g,"$1,")
}
///(d)(?=(d{3})+\.)/g: 全局(即多次)匹配一个数字, 这个数字后面接着N(N>=1)个三位数(三位数被当做一个整体体看待)后字符串.结束前

2.将一串数字的每3个就用逗号分开的问题

function cutNumber(num){
      return num.toString().replace(/(\d)(?=(\d{3})+\.)/g,"$1,")
}

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

3.通过test() 后调用RegExp.$..获取分组

if(/(y+)/.test('huangyyychu')){
  console.log(RegExp.$1)  //yyy
}

4.获取一段代码中的图片地址

知识点概括

1. 巧妙运用字符类取反 [^]
2. 使用非贪婪模式和边界运用 *? \b
3. 利用(?:)忽略分组

// 分解知识点
1. 获取2个尖括号里面指定位置的前面所有字符串
<hh jljlj hcc  g>  // 获取<hh 和hcc之间的任意字符
第一步： <hh[^>]*?竟可能少的匹配  ，所以只会匹配<hh
第二步： <hh[^>]*?\bhcc  就会匹配 <hh jljlj hcc
第三部：<hh([^>]*?)\bhcc 设置分组获取对应的字符

2. 获取<img class='xxx' src = "http://lianj-public-test.img-cn-shenzhen.aliyuncs.com//resource/web-0-1499307279918-7b3ce6c10ce17088.jpg" style="display: block">中的图片地址
<img(?:[^>]*?)\bsrc\s*=\s*(["'])([^"']*)\1   
解析： 1. 我们不需要` class='xxx' `这个字符串的分组  2. 需要单引号或者双引号的分组来匹配最后的\1
         3. \1表示匹配分组中最近的长度为1的分组

正则.png