记一次国际化项目--正则实现自动替换部分知识点记录

本次替换使用了node遍历文件夹，对vue文件进行正则替换，将中文转换为对应的格式 本文仅记录相关的思路，至于正则是否能全部匹配，因项目的中文组合不同，无法一一考虑。所以这里的正则仅以此次项目为准

gitGub连接.

首先总结一下，中文可能出现的格式

html元素中作为属性出现

 <el-table-column
      color="黄色",
      fanling="十八"
      name-of-final="姓李"
      prop="gender"
      label="性别"
      name = "gender"
      width="180">
  </el-table-column>

html元素之间

<el-popover
   placement="top"
   width="160"
   v-model="visible">
   <p>这是一段内容这是一段内容确定删除吗？</p>
   <div style="text-align: right; margin: 0">
     <el-button size="mini" type="text" @click="visible = false">取消</el-button>
     <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
   </div>
   <el-button slot="reference">删除</el-button>
</el-popover>
<el-button @click="handleClick">{{!show?"展开":"收起"}}工作/爱好列</el-button>

js

    ```
    //js的data
    data() {
      return {
        option1:['黄金糕','双皮奶','蚵仔煎','龙须面','北京烤鸭'],
        options: [{
           value: '选项1',
           label: '黄金糕'
         }, {
           value: '选项2',
           label: '双皮奶',
           disabled: true
         }, {
           value: '选项3',
           label: '蚵仔煎'
         }, {
           value: '选项4',
           label: '龙须面'
         }, {
           value: '选项5',
           label: '北京烤鸭'
         }]
      }
    }

    //js的方法           
    created(){
      this.getSpanList()
      this.$message("你好"+this.show,window.a)
      this.$message(`你好${this.show}`,window.a) //拼接字符串
        if(false){
           console.error("你好",window.a)
           console.error("你好")
        }
    },
    ```

开始匹配

• wordNotExist是存储没有对应翻译的中文，方便后续添加翻译
• data对象是从excel中读取的中英文对照转换成的对象，上面的wordNotExist后面会写入excel中

以下是相关正则字符串

//匹配不捕获元素右标识 \>
var closeTagNoCapture = '(?:\\>)';

// 匹配不捕获元素左标识 \>
var openTagNoCapture = '(?:\\<\\/)'; 

// \w 匹配字母或数字或下划线或汉字 等价于 '[^A-Za-z0-9_]'。
//punctuationSelfDefine这里需要的话可以自己添加，我只是添加本次需要用到的
var punctuationSelfDefine =
  "，,&%、!！{{}?？“”'':：‘’``（）()_ }>\\\\@\\-\\+\\/\\+\\s";
  
//匹配自定义标点符号
var onlyPunctuation = '[' + punctuationSelfDefine + ']*'; 

//匹配字母和自定义标点符号
var numberPunctuationLetter = '[' + '\\dA-Za-z' + punctuationSelfDefine + ']*'; 

//匹配中文
var chineseCharAndJointMark = '[\\u4E00-\\u9FA5]+'; 

//匹配标点符号加中文加标点符号
var chieseNoQuation = 
  '([' +
  punctuationSelfDefine +
  ']*[\\u4E00-\\u9FA5]+' +
  '[' +
  punctuationSelfDefine +
  ']*)+';
  
//匹配 字母、数字、下划线+中文+字母、数字、下划线
var chineseAndLetter = '(([\\w-\\s]*[\\u4E00-\\u9FA5]+[\\w-\\s]*)+)'; 

//匹配 字母、数字、下划线+中文+字母、数字、下划线
var chineseAndLetterWithQuation =
  '[\'"](([\\w-\\s]*[\\u4E00-\\u9FA5]+[\\w-\\s]*)+)[\'"]'; 
  
//匹配捕获反向引号中的所有内容
var backquoteContent = '[`](.*?)[`]'; 

//左双大括号匹配不捕获
var leftBacesMatchNoCapture = '(?:{{)'; 

//右双大括号匹配不捕获
var rightBacesMatchNoCapture = '(?:}})'; 

// 以单/双引号开头
let quotations = new RegExp('^[\'"]|[\'"]$', 'gm'); 

//匹配引号中的任何内容
let withinQuotations = new RegExp('[\'"](.+?)[\'"]', 'gm'); 

(不小心删除了，迟点补回N多内容)

最后有个函数是为了分开符号和中文的，但是在这次项目中并没有应用上

var data = {
    "我是":'I Am',
    "你是":"You are",
    "他是":"He is"
}
function checkIfTranslationExist(chineseword){
    return data[chineseword]&&"$t('"+data[chineseword]+"')"||chineseword
}

function translationWithoutPuncuation(str,thisornot){
    str = str+'\n'
    let reg = /[^a-zA-Z0-9\u4E00-\uf9a5]+/g
    let puncuationLit = []
    var p = reg.exec(str)
    while(p){
        puncuationLit.push(p[0])
        p = reg.exec(str)
    }
    var returnstatement = ''
    for(let i in puncuationLit){
        let pun = puncuationLit[i]
        let s = str.split(pun)
        let pre = s[0]
        str = s[1]
        if(!pre||pre===''){}else{
            let s = checkIfTranslationExist(pre)
            s = thisornot?'this.'+s:s
            returnstatement = (returnstatement===""? ''+"":returnstatement+"+")+ s  + '+'+ "'"+(i<puncuationLit.length?pun:'' )+"'"
        }

    }
    returnstatement = returnstatement.replace(/\n(?=\'$)/g,'')
}
var str = "我是，你是？他是！！！吗" //输入
translationWithoutPuncuation(str) 
// 输出 $t('I Am')+'，'+$t('You are')+'？'+$t('He is')+'！！！'+吗+''