Open liangbus opened 5 years ago
每次开发遇到正则,都是直接网上找,很少自己写,终于这次遇到了要自己手写正则的问题,毫无意外地跪了,当时也是因为紧张脑子不太好使,回来反思了一下,然后自己尝试写了一下,也是可以写出来的,唉~
要替换的图片 url 示例
https://www.abcd.com/th234erest/path/hash_hah234ei40a512hasdf-630x630.png
解释之前先贴一个学习正则的链接 ziishaned/learn-regex - github
其目标就是要替换掉上面的 630x630 这一字符串 (其实这个场景确实是挺常见的,算是实战题型了)
思路: 确认 630x630 的这个字符串的规律,中间是一个 x 两边是数字,这时就可以写
/(\d)(x)(\d)/ // test: var reg1 = new RegExp(/(\d)(x)(\d)/) reg1.test('120x120') // true reg1.test('0x0') // true reg1.test('0ax0') // false reg1.test('abdck123mx0ax0') // false
基本能匹配上了,但是并不完善,再来修改一下,明确 x 两边的数字长度,因为是图片规格,所以一般尺寸是 2-4 位(太小不需要替换,过大应该是录入问题,更应该暴露问题吧)
/(\d){2,4}(x){1}(\d){2,4}/ // test var reg2 = new RegExp(/(\d){2,4}(x){1}(\d){2,4}/) reg2.test('hash-ahahasdkjfhasdjhb-330x330') // true reg2.test('hash-ahah9x9ab-9x330') // false reg2.test('hash-ahah550x550ab-9x10') // true 但这并不是我们想要的
图片前面有个 hash 串,里面如果刚好包含了类似规格的字符串,那么就会匹配上,但是这并不是我们想要的,所以,再来优化一下 (-){1}(\d){2,4}(x){1}(\d){2,4}\. 规格前面必须是一个横杠,后面必须是一个点,一般图片的 hash 串中不会带这种特殊字符,所以这样匹配应该是不会有问题的了
(-){1}(\d){2,4}(x){1}(\d){2,4}\.
推荐一个有助于学习正则的网站:regex101.com
每次开发遇到正则,都是直接网上找,很少自己写,终于这次遇到了要自己手写正则的问题,毫无意外地跪了,当时也是因为紧张脑子不太好使,回来反思了一下,然后自己尝试写了一下,也是可以写出来的,唉~
要替换的图片 url 示例
解释之前先贴一个学习正则的链接 ziishaned/learn-regex - github
其目标就是要替换掉上面的 630x630 这一字符串 (其实这个场景确实是挺常见的,算是实战题型了)
思路: 确认 630x630 的这个字符串的规律,中间是一个 x 两边是数字,这时就可以写
基本能匹配上了,但是并不完善,再来修改一下,明确 x 两边的数字长度,因为是图片规格,所以一般尺寸是 2-4 位(太小不需要替换,过大应该是录入问题,更应该暴露问题吧)
图片前面有个 hash 串,里面如果刚好包含了类似规格的字符串,那么就会匹配上,但是这并不是我们想要的,所以,再来优化一下
(-){1}(\d){2,4}(x){1}(\d){2,4}\.
规格前面必须是一个横杠,后面必须是一个点,一般图片的 hash 串中不会带这种特殊字符,所以这样匹配应该是不会有问题的了推荐一个有助于学习正则的网站:regex101.com