此原型源自此想法: 中文化源碼
. 考慮到IDE插件工作量較大, 且與IDE綁定. 在代碼轉換工具的各種實作中, 綜合考慮實用+易用+長遠改進潛力, 浏覽器插件似乎較有優勢. 于是用最快捷的方式實作這一想法.
注: 此示範僅用Chrome在一個命名比較簡單的代碼頁
https://github.com/swaroopch/byte-of-python/blob/master/programs/ds_using_list.py運作過, 限于取代碼塊的簡單方式(取頁面中的table元素)以及內建詞典, 其他浏覽器/github代碼頁的效果不保證.
原型項目源碼在:
program-in-chinese/webextension_github_code_translator 在Chrome下加載此插件後, 點選工具欄中的按鈕(竟然預設圖示是個'G', 也許是"Github代碼翻譯原型"的首字母). 彈窗中就會顯示翻譯後的代碼段. 就這樣:項目源碼節選
對代碼段的文本進行簡單替換:
function 翻譯() {
var 原代碼拷貝 = document.getElementsByTagName('table')[0];
var span字段清單 = 原代碼拷貝.getElementsByTagName('span');
翻譯字段清單(span字段清單);
var 文本字段清單 = 取子文本節點(document);
翻譯字段清單(文本字段清單);
}
function 取子文本節點(el) {
var n, a = [], walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);
while (n = walk.nextNode()) a.push(n);
return a;
}
// 假設每個字段除了詞, 其他都是非英文字元.
function 取字段中所有詞(字段) {
var 單詞 = 字段.match(/[a-zA-Z]+/g);
if (單詞) {
return 單詞;
}
return [字段];
}
function 取字段中最長句(字段) {
var 句 = 字段.match(/[a-zA-Z\s]+/g);
if (句 && 句.length > 0) {
return 句[0].trim();
}
return 字段;
}
function 翻譯字段清單(字段清單) {
for (var i = 0; i < 字段清單.length; i++) {
var 字段 = 字段清單[i].textContent;
var 所有單詞 = 取字段中所有詞(字段);
var 所有單詞有翻譯 = false;
for (var j = 0; j < 所有單詞.length; j++) {
var 單詞 = 所有單詞[j];
var 對應中文詞 = 關鍵詞詞典[單詞] || API詞典[單詞] || 命名詞典[單詞];
if (對應中文詞) {
if (j == 所有單詞.length - 1) {
所有單詞有翻譯 = true;
}
} else {
break;
}
字段 = 字段.replace(單詞, 對應中文詞);
}
// 取巧: 僅當字段中所有詞有翻譯時才替換字段, 避免某些文本中出現個别可識别的單詞. 今後需進行文法分析.
if (所有單詞有翻譯) {
字段清單[i].textContent = 字段;
} else {
var 句 = 取字段中最長句(字段);
var 對應中文 = 語句翻譯[句.toLowerCase()]
if (對應中文) {
字段清單[i].textContent = 字段.replace(句, 對應中文);
}
}
}
}
內建詞典有幾部分, 前兩個(關鍵詞/API)可擴充, 單詞詞彙可借助現有的英漢詞典(olditem等還需另行拆分處理), 語句翻譯可借助線上翻譯API(原型中的翻譯内容取自有道線上翻譯):
var 關鍵詞詞典 = {
'for': '對于',
'in': '在',
'if': '如果',
'del': '删除'
};
var API詞典 = {
'print': '列印',
'append': '添加',
'sort': '排序',
'len': '長度',
'end': '結尾'
}
var 命名詞典 = {
'shoplist': '購物單',
'apple': '蘋果',
'mango': '芒果',
'carrot': '胡蘿蔔',
'banana': '香蕉',
'rice': '米',
'item': '物品',
'olditem': '第一項'
}
// 這裡使用有道線上翻譯結果. TODO: 用翻譯API代替
var 語句翻譯 = {
'this is my shopping list': '這是我的購物單',
'i have': '我有',
'items to purchase': '要購買的産品',
'i also have to buy rice': '我還得買大米',
'my shopping list is now': '我的購物單現在在',
'i will sort my list now': '我現在就整理我的清單',
'sorted shopping list is': '排序的購物清單是',
'the first item i will buy is': '我要買的第一件東西是'
}
參考
Chrome Extension - Get DOM content https://developer.chrome.com/extensions/tabs#method-executeScript Find all text nodes in HTML page 中文關鍵詞替換體驗頁面原型 為Chrome和火狐浏覽器編寫擴充2018-08-29