在做國際化的時候, 很多舊文件中的簡體或者繁體 需要優化, 一個一個找很麻煩, 於是在查閱資料後, 自己編寫了一個簡單的工具
廢話不多說, 上碼子!
--
插件: 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>
