使用正则断言捕获html标签和国际化翻译函数的文本内容

一、背景

最近在写国际化翻译的代码，其中有一个必须要做的事，是要提取出国际化翻译函数里的内容。一种是在html标签里写的国际化翻译：<lang :number="20013624">粤ICP备{number}号</lang>；另一种是在js代码里写的国际化翻译：_('{0} 一个记录日常生活的博客', 'Xlink Blog')；

二、实现

提取js国际化翻译函数的文本内容

let context = "_('{0} 一个记录日常生活的博客1', 'Xlink Blog') 分割符 分割符 _('{0} 一个记录日常生活的博客2', 'Xlink Blog')";
let langFunRegEx =  /(?<=_\(["']).*?(?=(['""]\s*,?.*\)))/gm;   // 匹配_('翻译函数')
context.match(langFunRegEx);

我们要做的就是提取出{0} 一个记录日常生活的博客1和'{0} 一个记录日常生活的博客2'。根据以上代码，我们得到：

这时候，我们回过头来看看写的正则表达式：

/(?<=_\(["']).*?(?=(['"]\s*,?.*\)))/gm

这个正则表达式主要分为三个部分：
(?<=_\(["'])，.*?，和(?=(['"]\s*,?.*\))。
第一个的意思是匹配从 _ (" 或者_ (’ 开始匹配，但是不包含这两个。
第二个的意思就是匹配国际化翻译函数里写的内容。
第三个的意思是匹配到单引号’或者双引号"以及最后边的括号时，我就当做匹配结束了。比如：_('测试中')，我只用提取"测试中"。而代码里的那个例子是比较复杂的另外一种情况，单独把Xlink Blog提了出来。但是我只要前面那段内容，所以正则表达式加了\s*,?，判断有没有空格和逗号，如果遇到了第一个逗号，我就提取前面的内容。

提取html标签的国际化内容

先看代码：

let context = "<lang :num>今年我{num}岁了</lang>  分割符 分割符 <lang>你呢？</lang>";
let langFunRegEx = /(?<=<lang[^>]*?>).*?(?=<\/lang>)/gm;   // 匹配_('翻译函数')
context.match(langFunRegEx);

结果：

和抽离js国家化翻译的代码一样，拆分成三部分。
(?<=<lang[^>]*?>)，.*?，(?=<\/lang>)/gm。原理和前面的一样，这里不赘述了。就是第一个[^>]可能令人难以费解。意思是只能匹配除了>符号的任意字符，毕竟我只想要html标签里的内容

三、结语

考虑到可能不够全面，会有一些遗漏的场景，有问题了再慢慢改吧。