在做国际化的时候, 很多旧文件中的简体或者繁体 需要优化, 一个一个找很麻烦, 于是在查阅资料后, 自己编写了一个简单的工具
废话不多说, 上码子!
--
插件: mui-ui , vue.js , jquery
项目是 hbuildx 直接创建的
change_lang.js
/**
* 繁简体对照表 字体是一一对应的
*/
var zh_s =
'皑蔼碍爱翱袄奥坝罢摆败颁办绊帮绑镑谤剥饱宝报鲍辈贝钡狈备惫绷笔毕毙闭边编贬变辩辫鳖瘪濒滨宾摈饼拨钵铂驳卜补参蚕残惭惨灿苍舱仓沧厕侧册测层诧搀掺蝉馋谗缠铲产阐颤场尝长偿肠厂畅钞车彻尘陈衬撑称惩诚骋痴迟驰耻齿炽冲虫宠畴踌筹绸丑橱厨锄雏础储触处传疮闯创锤纯绰辞词赐聪葱囱从丛凑窜错达带贷担单郸掸胆惮诞弹当挡党荡档捣岛祷导盗灯邓敌涤递缔点垫电淀钓调迭谍叠钉顶锭订东动栋冻斗犊独读赌镀锻断缎兑队对吨顿钝夺鹅额讹恶饿儿尔饵贰发罚阀珐矾钒烦范贩饭访纺飞废费纷坟奋愤粪丰枫锋风疯冯缝讽凤肤辐抚辅赋复负讣妇缚该钙盖干赶秆赣冈刚钢纲岗皋镐搁鸽阁铬个给龚宫巩贡钩沟构购够蛊顾剐关观馆惯贯广规硅归龟闺轨诡柜贵刽辊滚锅国过骇韩汉阂鹤贺横轰鸿红后壶护沪户哗华画划话怀坏欢环还缓换唤痪焕涣黄谎挥辉毁贿秽会烩汇讳诲绘荤浑伙获货祸击机积饥讥鸡绩缉极辑级挤几蓟剂济计记际继纪夹荚颊贾钾价驾歼监坚笺间艰缄茧检碱硷拣捡简俭减荐槛鉴践贱见键舰剑饯渐溅涧浆蒋桨奖讲酱胶浇骄娇搅铰矫侥脚饺缴绞轿较秸阶节茎惊经颈静镜径痉竞净纠厩旧驹举据锯惧剧鹃绢杰洁结诫届紧锦仅谨进晋烬尽劲荆觉决诀绝钧军骏开凯颗壳课垦恳抠库裤夸块侩宽矿旷况亏岿窥馈溃扩阔蜡腊莱来赖蓝栏拦篮阑兰澜谰揽览懒缆烂滥捞劳涝乐镭垒类泪篱离里鲤礼丽厉励砾历沥隶俩联莲连镰怜涟帘敛脸链恋炼练粮凉两辆谅疗辽镣猎临邻鳞凛赁龄铃凌灵岭领馏刘龙聋咙笼垄拢陇楼娄搂篓芦卢颅庐炉掳卤虏鲁赂禄录陆驴吕铝侣屡缕虑滤绿峦挛孪滦乱抡轮伦仑沦纶论萝罗逻锣箩骡骆络妈玛码蚂马骂吗买麦卖迈脉瞒馒蛮满谩猫锚铆贸么霉没镁门闷们锰梦谜弥觅绵缅庙灭悯闽鸣铭谬谋亩钠纳难挠脑恼闹馁腻撵捻酿鸟聂啮镊镍柠狞宁拧泞钮纽脓浓农疟诺欧鸥殴呕沤盘庞国爱赔喷鹏骗飘频贫苹凭评泼颇扑铺朴谱脐齐骑岂启气弃讫牵扦钎铅迁签谦钱钳潜浅谴堑枪呛墙蔷强抢锹桥乔侨翘窍窃钦亲轻氢倾顷请庆琼穷趋区躯驱龋颧权劝却鹊让饶扰绕热韧认纫荣绒软锐闰润洒萨鳃赛伞丧骚扫涩杀纱筛晒闪陕赡缮伤赏烧绍赊摄慑设绅审婶肾渗声绳胜圣师狮湿诗尸时蚀实识驶势释饰视试寿兽枢输书赎属术树竖数帅双谁税顺说硕烁丝饲耸怂颂讼诵擞苏诉肃虽绥岁孙损笋缩琐锁獭挞擡摊贪瘫滩坛谭谈叹汤烫涛绦腾誊锑题体屉条贴铁厅听烃铜统头图涂团颓蜕脱鸵驮驼椭洼袜弯湾顽万网韦违围为潍维苇伟伪纬谓卫温闻纹稳问瓮挝蜗涡窝呜钨乌诬无芜吴坞雾务误锡牺袭习铣戏细虾辖峡侠狭厦杴鲜纤咸贤衔闲显险现献县馅羡宪线厢镶乡详响项萧销晓啸蝎协挟携胁谐写泻谢锌衅兴汹锈绣虚嘘须许绪续轩悬选癣绚学勋询寻驯训讯逊压鸦鸭哑亚讶阉烟盐严颜阎艳厌砚彦谚验鸯杨扬疡阳痒养样瑶摇尧遥窑谣药爷页业叶医铱颐遗仪彝蚁艺亿忆义诣议谊译异绎荫阴银饮樱婴鹰应缨莹萤营荧蝇颖哟拥佣痈踊咏涌优忧邮铀犹游诱舆鱼渔娱与屿语吁御狱誉预驭鸳渊辕园员圆缘远愿约跃钥岳粤悦阅云郧匀陨运蕴酝晕韵杂灾载攒暂赞赃脏凿枣灶责择则泽贼赠扎札轧铡闸诈斋债毡盏斩辗崭栈战绽张涨帐账胀赵蛰辙锗这贞针侦诊镇阵挣睁狰帧郑证织职执纸挚掷帜质钟终种肿众诌轴皱昼骤猪诸诛烛瞩嘱贮铸筑驻专砖转赚桩庄装妆壮状锥赘坠缀谆浊兹资渍踪综总纵邹诅组钻致钟么为只凶准启板里雳余链泄';
var zh_t =
'皑蔼碍爱翺袄奥坝罢摆败颁办绊帮绑镑谤剥饱宝报鲍辈贝钡狈备惫绷笔毕毙闭边编贬变辩辫鼈瘪濒滨宾摈饼拨钵铂驳卜补参蚕残惭惨灿苍舱仓沧厕侧册测层诧搀掺蝉馋谗缠铲产阐颤场尝长偿肠厂畅钞车彻尘陈衬撑称惩诚骋痴迟驰耻齿炽冲虫宠畴踌筹绸丑橱厨锄雏础储触处传疮闯创锤纯绰辞词赐聪葱囱从丛凑窜错达带贷担单郸掸胆惮诞弹当挡党荡档捣岛祷导盗灯邓敌涤递缔点垫电淀钓调叠谍叠钉顶锭订东动栋冻斗犊独读赌镀锻断缎兑队对吨顿钝夺鹅额讹恶饿儿尔饵贰发罚阀珐矾钒烦范贩饭访纺飞废费纷坟奋愤粪丰枫锋风疯冯缝讽凤肤辐抚辅赋复负讣妇缚该钙盖干赶秆赣冈刚钢纲岗臯镐搁鸽阁铬个给龚宫巩贡钩沟构购够蛊顾剐关观馆惯贯广规矽归龟闺轨诡柜贵刽辊滚锅国过骇韩汉阂鹤贺横轰鸿红后壶护沪户哗华画划话怀坏欢环还缓换唤痪焕涣黄谎挥辉毁贿秽会烩汇讳诲绘荤浑伙获货祸击机积饥讥鸡绩缉极辑级挤几蓟剂济计记际继纪夹荚颊贾钾价驾歼监坚笺间艰缄茧检堿碱拣捡简俭减荐槛鉴践贱见键舰剑饯渐溅涧浆蒋桨奖讲酱胶浇骄娇搅铰矫侥脚饺缴绞轿较稭阶节茎惊经颈静镜径痉竞净纠厩旧驹举据锯惧剧鹃绢杰洁结诫届紧锦仅谨进晋烬尽劲荆觉决诀绝钧军骏开凯颗壳课垦恳抠库裤夸块侩宽矿旷况亏岿窥馈溃扩阔蜡腊莱来赖蓝栏拦篮阑兰澜谰揽览懒缆烂滥捞劳涝乐镭垒类泪篱离里鲤礼丽厉励砾历沥隶俩联莲连镰怜涟帘敛脸链恋炼练粮凉两辆谅疗辽镣猎临邻鳞凛赁龄铃凌灵岭领馏刘龙聋咙笼垄拢陇楼娄搂篓芦卢颅庐炉掳卤虏鲁赂禄录陆驴吕铝侣屡缕虑滤绿峦挛孪滦乱抡轮伦仑沦纶论萝罗逻锣箩骡骆络妈玛码蚂马骂吗买麦卖迈脉瞒馒蛮满谩猫锚铆贸么霉没镁门闷们锰梦谜弥觅绵缅庙灭悯闽鸣铭谬谋亩钠纳难挠脑恼闹馁腻撵撚酿鸟聂啮镊镍柠狞宁拧泞钮纽脓浓农疟诺欧鸥殴呕沤盘庞国爱赔喷鹏骗飘频贫苹凭评泼颇扑铺朴谱脐齐骑岂启气弃讫牵扡钎铅迁签谦钱钳潜浅谴堑枪呛墙蔷强抢锹桥乔侨翘窍窃钦亲轻氢倾顷请庆琼穷趋区躯驱龋颧权劝却鹊让饶扰绕热韧认纫荣绒软锐闰润洒萨鳃赛伞丧骚扫涩杀纱筛晒闪陕赡缮伤赏烧绍赊摄慑设绅审婶肾渗声绳胜圣师狮湿诗尸时蚀实识驶势释饰视试寿兽枢输书赎属术树竖数帅双谁税顺说硕烁丝饲耸怂颂讼诵擞苏诉肃虽绥岁孙损笋缩琐锁獭挞擡摊贪瘫滩坛谭谈叹汤烫涛绦腾誊锑题体屉条贴铁厅听烃铜统头图涂团颓蜕脱鸵驮驼椭洼袜弯湾顽万网韦违围为潍维苇伟伪纬谓卫温闻纹稳问瓮挝蜗涡窝呜钨乌诬无芜吴坞雾务误锡牺袭习铣戏细虾辖峡侠狭厦锨鲜纤咸贤衔闲显险现献县馅羡宪线厢镶乡详响项萧销晓啸蝎协挟携胁谐写泻谢锌衅兴汹锈绣虚嘘须许绪续轩悬选癣绚学勋询寻驯训讯逊压鸦鸭哑亚讶阉烟盐严颜阎艳厌砚彦谚验鸯杨扬疡阳痒养样瑶摇尧遥窑谣药爷页业叶医铱颐遗仪彜蚁艺亿忆义诣议谊译异绎荫阴银饮樱婴鹰应缨莹萤营荧蝇颖哟拥佣痈踊咏涌优忧邮铀犹游诱舆鱼渔娱与屿语吁御狱誉预驭鸳渊辕园员圆缘远愿约跃钥岳粤悦阅云郧匀陨运蕴酝晕韵杂灾载攒暂赞赃脏凿枣灶责择则泽贼赠扎劄轧铡闸诈斋债毡盏斩辗崭栈战绽张涨帐账胀赵蛰辙锗这贞针侦诊镇阵挣睁狰帧郑证织职执纸挚掷帜质钟终种肿众诌轴皱昼骤猪诸诛烛瞩嘱贮铸筑驻专砖转赚桩庄装妆壮状锥赘坠缀谆浊兹资渍踪综总纵邹诅组钻致钟么为只凶准启板里雳余炼泄';
/**
* 简体转繁体
* @param {Object} a 一句中文
*/
function lang_s_t(a) {
var text = '';
for (let i in a) {
var t = a[i];
var idex = zh_s.indexOf(t)
if (idex > -1) {
text += zh_t[idex]
} else {
text += t;
}
}
return text;
}
/**
* 繁体转简体
* @param {Object} a 一句中文
*/
function lang_t_s(a) {
var text = '';
for (let i in a) {
var t = a[i];
var idex = zh_t.indexOf(t)
if (idex > -1) {
text += zh_s[idex]
} else {
text += t;
}
}
return text;
}
zh.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>文件繁简体查询</title>
<script src="js/mui.min.js"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-2.1.1.js"></script>
<script src="js/change_lang.js" type="text/javascript" charset="utf-8"></script>
<script src="js/clipboard.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<style>
*{
font-size: 14px;
}
html,body,#app_vue{
height: 100%;
background-color: #FFF;
}
#app_vue{
display: flex;
flex-direction: row;
}
.box{
display: flex;
flex-direction: column;
width: 400px;
height: 100%;
background-color: #CCCCCC;
padding: 10px;
}
.textbody{
width: calc(100% - 380px);
height: calc(100% - 20px);
margin: 10px;
border: 1px solid #ACACB4;
padding: 10px;
overflow-x: hidden;
overflow-y: auto;
}
.isgo{
background-color: burlywood;
padding: 5px 15px;
border-radius: 8px;
color: #FFF;
/* width: 300px; */
height: 100%;
display: flex;
align-items: center;
justify-content: center;
width: 50%;
}
.tree{
height: calc(100% - 120px);
width: 100%;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid #929292;
}
.s_table{
width:100%;
}
.s_table th{
margin: 5px 0;
}
.th{
padding: 5px;
}
.text_center{
text-align: center;
}
.s_line{
width: 50px;
}
.display{
display: none;
}
.bg_active{
background-color: #ffaa7f;
}
.g_12{
height: 30px;
display: flex;
margin:15px 0;
}
.g_12_1{
padding: 5px 15px;
border-radius: 8px;
color: #333;
/* width: 300px; */
height: 100%;
display: flex;
align-items: center;
justify-content: center;
width: 50%;
background-color: #FFF;
}
</style>
<body>
<div id="app_vue">
<div class="box">
<p>请先选择文件:文件数量不要太大,影响效率</p>
<input type="file" name="fileName" id="file_input" v-on:change="textChange" webkitdirectory directory />
<div class="mui-input-row">
<input type="text" id="otherFile" class="mui-input-clear" placeholder="输入文件名, .xx,.xx">
</div>
<div class="g_12">
<div v-on:click="textChange" class="isgo">
查询所有
</div>
<div class="g_12_1">
<div class="mui-input-row mui-checkbox ">
<label>只看繁体</label>
<input name="Checkbox" type="checkbox" v-on:change="isZHF">
</div>
</div>
</div>
<div class="tree">
<!-- treeData -->
<ul class="mui-table-view">
<li v-for="(item,index) in textcontent" v-on:click="selectOne" v-bind:class="selectIndex == index ? 'bg_active' : ''"
v-bind:data-index="index" v-bind:style="'color:'+item.color" class="mui-table-view-cell" v-if="item.show && item.path"
v-show="!isZH || (isZH && item.color == 'red')">
{{item.path}}
</li>
</ul>
</div>
</div>
<div class="textbody">
<h4>行数会有上下浮动, 请以实际为准</h4>
<button class="btn display">Copy</button>
<!-- 单列 -->
<div v-if="selectIndex != -1">
<p v-on:click="copy" v-bind:data-text="textcontent[selectIndex].path">
文件名称/地址:{{textcontent[selectIndex].path}} (点击文字自动复制)
</p>
<table class="s_table" border="1" cellspacing="" cellpadding="">
<tr>
<th class="s_line">行数</th>
<th class="s_th">简体</th>
<th class="s_th">繁体(点击文字自动复制)</th>
</tr>
<tr v-for="(it,index_) in textcontent[selectIndex].text">
<td class="text_center">{{it.line}}</td>
<td class="th" v-on:click="copy" v-bind:data-text="it.text">{{it.text}}</td>
<td class="th" v-on:click="copy" v-bind:data-text="it.chText" v-bind:style="'color:'+it.color">{{it.chText}}</td>
</tr>
</table>
</div>
<!-- 所有 -->
<div v-else id="textcontent" v-for="(item,index) in textcontent" v-show="!isZH || (isZH && item.color == 'red')">
<div v-if="item.text.length > 0">
<p v-on:click="copy" v-bind:data-text="item.path">文件名称/地址:{{item.path}} (点击文字自动复制)</p>
<table class="s_table" border="1" cellspacing="" cellpadding="">
<tr>
<th class="s_line">行数</th>
<th class="s_th">简体</th>
<th class="s_th">繁体(点击文字自动复制)</th>
</tr>
<tr v-for="(it,index_) in item.text">
<td class="text_center">{{it.line}}</td>
<td class="th" v-on:click="copy" v-bind:data-text="it.text">{{it.text}}</td>
<td class="th" v-on:click="copy" v-bind:data-text="it.chText" v-bind:style="'color:'+it.color">{{it.chText}}</td>
</tr>
</table>
<br />
<br />
</div>
</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#app_vue',
data: {
textcontent: [],
selectIndex: -1,
isZH: false,
fileFin: ['.png', '.jpg', '.jpeg', '.css', '.gif']
},
created() {
//初始化加载方法
},
methods: {
// 整理树形集合
textChange: function() {
var self = this;
var files = $('input[name="fileName"]').prop('files')
self.textcontent = [];
var otherFile = $('#otherFile').val();
var fileFin = this.fileFin;
for (let i in files) {
var file = files[i];
var fileName = self.isnull(file.name).toLowerCase()
var json = {}
json.index = i;
json.name = files[i].name;
json.path = files[i].webkitRelativePath;
json.text = [];
json.color = "";
json.show = true;
self.textcontent.push(json)
if (this.fileIn(fileName, fileFin, otherFile)) {
self.textcontent[i].show = false;
console.log('文件不存在或者是图片, 不处理');
} else {
var reader = new FileReader();
//新建一个FileReader
reader.readAsText(files[i], "UTF-8"); //读取文件
reader.onload = function(evt) { //读取完文件之后会回来这里
var fileString = evt.target.result; // 拿到文件内容
var aa = fileString.split(/\n/g);
for (let x in aa) {
// 排除 前端日志 如果 日志换行了, 就不不在此列
var bb = aa[x].replace(/console.(log)?(err)?\(.*\)(;)?/g, '');
// 排除 后台 // 备注
bb = bb.replace(/\/\/.*/g, '')
// 排除所有非中文
bb = bb.replace(/[^\u4e00-\u9fa5]+/g, '')
if (bb != undefined && bb != null && bb != '') {
var tj = {};
tj.text = bb; // 原文
tj.line = x; // 行数
var cbb = lang_s_t(bb); // 繁体对照
tj.chText = cbb;
if (self.textcontent[i] != undefined && self.textcontent[i].color != 'red') {
self.textcontent[i].color = '#000'
}
tj.color = '#000'
if (bb != cbb) {
self.textcontent[i].color = 'red'
tj.color = 'red'
}
self.textcontent[i].text.push(tj);
}
}
}
}
}
},
fileIn(fileName, fileFin, fileF) {
if(fileName == ""){
return true;
}
if (fileF != "") {
var a = fileF.split(',');
fileFin = fileFin.concat(a);
}
var f = false;
for (var i = 0; i < fileFin.length; i++) {
if (fileName.indexOf(fileFin[i]) > -1) {
f = true;
break;
}
}
return f;
},
isnull: function(e) {
if (e == undefined || e == null || e == "") {
return '';
}
return e;
},
selectOne: function(e) {
console.log(e);
var self = this;
var dataset = e.target.dataset;
var index = dataset.index;
self.selectIndex = index;
},
copy: function(e) {
var dataset = e.target.dataset;
console.log(e);
$('.btn').attr('data-clipboard-text', dataset.text);
$('.btn').click();
},
isZHF() {
console.log(123);
this.isZH = !this.isZH
}
}
})
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
mui.toast('( ﾟ▽ﾟ)/ 复制成功~~')
});
clipboard.on('error', function(e) {
mui.toast('╭(╯^╰)╮ 诶呀,复制失误了~~')
});
</script>
</body>
</html>
