开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 13 天，点击查看活动详情

vscode正则匹配搜索

案例1

需求：我们希望将keyDic里面的key全部变成字典形式

const keyDic = {
  keyA: 'keyA',
  keyB: 'keyB',
  keyC: 'keyC',
  keyD: 'keyD',
  keyE: 'keyE',
  keyF: 'keyF',
}

变成下面这种形式。

const keyDic = {
  keyA: { key: 'keyA', path: '/keyA' },
  keyB: { key: 'keyB', path: '/keyB' },
  keyC: { key: 'keyC', path: '/keyC' },
  keyD: { key: 'keyD', path: '/keyD' },
  keyE: { key: 'keyE', path: '/keyE' },
  keyF: { key: 'keyF', path: '/keyF' },
}

正常情况我们都会一个一个复制，今天介绍VSCode的正则替换将一步全部完成

正则匹配字母

我们知道匹配大小写字母 可以用[a-zA-Z]来表示，多个就在后面加上*号

[a-zA-Z]*

如何匹配

分析可以知道我们要替换的部分是 : 'keyA'

于是可以得到

: '正则匹配字母'

即

: '*([a-zA-Z]*)'

粘贴到搜索框后把最后正则匹配标致点一下， 如下图所示。

我们可以看到 冒号到字符串都被匹配到了。

如何替换

需求是将 : 'keyA' 替换成为 : { key: 'keyA', path: '/keyA' } 如何读取匹配到的字母，显示在替换的字母中呢 '$1'刚好实现，意思是正则匹配到的第一个部分，上面的正则匹配的刚好是字符串内容。

于是很容易得到如下内容

: { key: '$1', path: '/$1' }

技巧：将光标移到某个位置，则从哪里开始替换

是不是省了好多功夫

案例二

将

      { path: routePath.orderList, component: LazyLoad(() => import('../order/orderList')) },

替换成为

      { ...dict.orderList, component: LazyLoad(() => import('../order/orderList')) },

实现

匹配的正则语法

 path: routeConstant.[a-z_A-Z]*

替换后的内容

...dic.$1.

最终可以看到所有的都全部变了

总结

正则匹配到的部分，替换的时候需要用到的第几个正则就用$符号后面跟上对应数字

: '*([a-zA-Z]*)'

: { key: '$1', path: '/$1' }

将极大提高效率 开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 13 天，点击查看活动详情