阅读关于less.js有感--正则

174 阅读1分钟

前期介绍

分享基于less.js,更改body的背景颜色

分析开始

image.png

里边相关正则我觉得可以推敲一下

 href = 'http://10.135.192.35:8081/static//////css/color.less?name=zhang&age=18'        
 function extractId(href) {
        var str = href.replace(/^[a-z-]+:\/+?[^\/]+/, '')
         str = str.replace(/[\?\&]livereload=\w+/, '') // Remove LiveReload cachebuster
         str = str.replace(/^\//, '') // Remove root /
         str = str.replace(/\.[a-zA-Z]+$/, '')
         str = str.replace(/[^\.\w-]+/g, '-')
         // [^abc] 代表abc都不能匹配 除了abc以外的都可以匹配到, [^\.\w-] 除了点,数字,下划线,大小写字母以外的都可以匹配
         str = str.replace(/\./g, ':'); // Replace dots with colons(for valid id)
 }
  extractId(href) // 最后的正则结果:static-css-color:less-name-zhang-age-18**

?=实际上应算是匹配预查。str(?=condition) 后面的应该只能算是匹配的条件。意思就是只有满足condition条件的str才能被匹配到。

?=还有一个兄弟叫做!?,作用相反,只有在不满足条件的str才能被匹配到。

?:就是直接匹配str + conidtion

以上三个都是非获取匹配,意思就是condition匹配到的内容并不会存储到Matches里。

例如:

var str = "dadiao 2333";
str.match(/dadiao (?:2222|2333|1211)/)  //['dadiao 2333'];
str.match(/dadiao (?=2222|2333|1211/) // ['dadiao '];

str.match(/dadiao (?!=2222)/) //['dadiao ']

str.match(/dadiao (2222|2333|1211)/) //['dadiao 2333', '2333'];
// less中使用过的例子
var url = 'http://10.135.192.35:8081/static/css/color.less'
var urlPartsRegex = /^((?:[a-z-]+:)?\/{2}(?:[^\/\?#]*\/)|([\/\\]))?((?:[^\/\\\?#]*[\/\\])*)([^\/\\\?#]*)([#\?].*)?$/i;
var urlParts = url.match(urlPartsRegex);

image.png

关于[]用法: 个人论点 例如:var reg = /[123]+/g // 这种正则的意思是 匹配字符串可以匹配到单个的1,2,3 或者 12,13,23, 123, 321, 213的任意组合 看例子:

// ------------------/[123]/g----------------------------------------
var a = '1555123'
var reg = /[123]/g
a.match(reg) // ['1', '1', '2', '3']

var a1 = '1555123123'
a1.match(reg) // ['1', '1', '2', '3', '1', '2', '3']
// ---------------------/[123]+/g----------------------------------------
var a2 = '1111111122222222233333333555123123'
var reg2 = /[123]+/g
a2.match(reg2) // ['1111111122222222233333333', '123123']

var a3 = '1111111122222222266633333333555123123
a3.match(reg2) // ['11111111222222222', '33333333', '123123']

var a4 = '23132112311122555233366633333333555123123'
a4.match(reg2) // ['23132112311122', '2333', '33333333', '123123']

image.png

由例子可以看出,不管123在哪个位置,或者 怎么排列,或者缺哪个 都可以匹配到, 只要匹配的字符串 存在123任意哪个都行。

image.png

image.png

image.png

image.png