vue-i18n 快速替换

使用 vue-i18n 的时候 需要进行繁琐的替换
如:
<div>XXX yyy ZzZ</div>
替换为:
<div>{{$t("xxx_yyy_zzz")}}</div>

然后在 js 文件中增加条目
xxx_yyy_zzz: "XXX yyy ZzZ",

查找 tag 里面的文本也很繁琐

使用 WebStorm 和 IDEA 等 IDE 配合正则表达式可以很快的完成这个操作

全局替换

使用方法

类似(?<=>)(\w+)(?=<) 的正则表达式, 可以匹配到标签中的文本

如:
<div>XXX yyy ZzZ</div> 中的 XXX yyy ZzZ

参考 https://blog.csdn.net/MAIMIHO/article/details/109024705 中的正则替换

XXX yyy ZzZ 会被替换为 {{$t("xxx_yyy_zzz")}}xxx_yyy_zzz: "XXX yyy ZzZ",

这样将前面一部分直接通过替换完成, 后面一部分复制到 js 文件中就可以了

正则表达式示例

// 匹配 <div>XXX</div>
(?<=>)(\w+)(?=<)

{{\$t("\L$1")}}\L$1: "\E$1",

// 匹配 <div>XXX yyy</div>
(?<=>)(\w+) (\w+)(?=<)

{{\$t("\L$1_\L$2")}}\L$1_\L$2: "\E$1 \E$2",

// 匹配 <div>XXX yyy ZzZ</div>
(?<=>)(\w+) (\w+) (\w+)(?=<)

{{\$t("\L$1_\L$2_\L$3")}}\L$1_\L$2_\L$3: "\E$1 \E$2 \E$3",

// 匹配剩下的
(?<=">)[^{\n](.*)[^}](?=</)

(?<=>)(\s*\w[\w\s]*[^}])(?=<)