接到了一个任务，需要新增韩语库，其实也很简单，就是把中文字库复制一下，然后把对应的中文改成对应的韩文，然后再在配置里新增一下韩语的路径配置。但是需要改的字段很多，有一些没有按照顺序，还得按下CTRL F 查找，在复制粘贴，太麻烦了。所以写了这个小工具，方便改配置。
1. 整体的结构
-
excelreader.html主页面
- bootstrap css框架
- xlsx.full.min.js读取excel插件
2. HTML部分
这部分比较简单，为了好看用了bootstrap框架。我用了vue,其实可以不用的。
<div id="app">
<div class="form">
<div class="form-group">
<input type="file" @change='sendfile($event)' />
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label for="input">请输入需要转换的文本:</label>
<textarea v-model="input" id="input" class="form-control" rows="23"></textarea>
</div>
<div class="col-sm-6">
<label >结果如下:</label>
<textarea id="resulta" v-model='resulta'class="form-control" rows="23"></textarea>
</div>
</div>
</div>
<div class="form-group">
<button @click="find" class="btn btn-primary">转换</button>
<button @click="clearI" class="btn btn-primary">清空</button>
<button @click="copyI" class="btn btn-primary">复制</button>
<!-- <button @click="exportI" class="btn btn-primary">导出</button> -->
</div>
<!-- <div id="result" v-html='result'>{{}}</div> -->
<div id="zzdemo" style="display: none;"></div>
</div>
</div>
3. JS核心
- data
data: {
input:'',
result:'',
resulta:'',
zzexcel:'',
all:'',
file:'',
len:'',
sheet:'',
}
-
exportI()
原本想实现的是点击导出js文件,还没有实现
-
copyI()
copyI:function(){
document.getElementById("resulta").select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
}
复制按钮事件，转换结果会注入到 #resulta 的文本框中，点击之后就能粘贴转换后的文本了。
注意：只有textarea和text类型的input对象等才能用select()
-
clearI()
clearI:function(){
this.input=""; //清空输入框
document.getElementById("input").focus();//使输入框获取焦点
}
因为一般清空文本框是为了下一次的转换，所以添加了清空后，文本框获取焦点，方便输入要转换的文本。
-
sendfile()
选择excel文件后会执行的函数，获取excel数据。
sendfile:function(event){
var v=this;
if(!event.target.files) {//如果找不到文件
return;
}
var f = event.target.files[0];//选择第一个表也就是sheet1
var reader = new FileReader();//实例化阅读器
reader.readAsBinaryString(f);
reader.onload = function(e) {
var data = e.target.result;
this.zzexcel = XLSX.read(data, {type: 'binary'});
for(var i=0;i<this.zzexcel.SheetNames.length;i++){//这个for循环可忽略
document.getElementById("zzdemo").innerHTML +=this.zzexcel.SheetNames[i]+"="+
JSON.stringify(XLSX.utils.sheet_to_json(this.zzexcel.Sheets[this.zzexcel.SheetNames[i]]))+"<br/>";
}
v.sheet=XLSX.utils.sheet_to_json(this.zzexcel.Sheets[this.zzexcel.SheetNames[0]]);//表格数据。
v.len=v.sheet.length;//总共有几行数据
}
}
-
findone()
excel长这样
查找当个字段对应的
findone:function(arg){//查找excel中是否含有参数字段
var v=this;
for (let i = v.len-1; i >= 0; i--) {//遍历每一行
var a=v.sheet[i];
if(arg==a['中文']){//如果参数在excel中找到了中文字段，返回汉语字段
return a['韩文'];
}
if((i-1)==0){//如果excel中找不到对应的字段,
if (arg.indexOf('<span>')>=0||arg.indexOf('<strong>')>=0) {//
arg=arg.replace(/\>([^\<|\>]*)\</g,function(a){
var str=v.findone(a.slice(1,a.length-1).replace(/\s+/g,'').replace('>',''));
if(a.indexOf('>')>0){
return ">"+str+"><";
}
return ">"+str+"<";
});
}
return arg;
}
}
}
注意，因为用了vue,所以务必在函数前写一个
var v=this;,这样可以通过v啦获取vue实例中的data.
-
find()
find:function(){
var v=this;
var str=v.input.replace(/\"([^\"]*)\"/g,function(a,b){
return '"'+v.findone(a.slice(1,a.length-1).replace(/\s+/g,''))+'"';//a.slice(1,a.length-1));
});//'a'));
v.resulta=str;
v.result=str.replace(/",/g,'",</br>').replace(/\[/g,"[</br>").replace(/(?<!>|<);/g,";</br></br>").
replace(/\*{2}\//g,"**/</br>");
},
(1) replace函数的第二个参数可以是个函数，function(a,b){},a为匹配值，b为索引。
(2)正则 如何匹配引号里面的内容?
/\"([^\"]*)\"/g
"需要在前面加上转义字符\，这个匹配的结果是带"的
小括号中的^表示限定开头
中括号中直接使用的^表示否定
(3) 字符串如何掐头去尾?
str.slice(1,a.length-1)
4. 注意
需要替换的文本都需要带双引号
