簡體轉繁體(純 HTML + 純 JS) ~ 線上簡體轉繁體工具(online-tw_cn)
簡體轉繁體(純 HTML + 純 JS) ~ 線上簡體轉繁體工具(online-tw_cn)
資料來源(chatgpt): https://chatgpt.com/s/t_68e768ef13488191bf858694ff3ebf07
GITHUB: https://github.com/jash-git/online-tw_cn
實際實作可線上使用: http://jashliao.eu/tools/tw_cn/
HTML code:
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>簡體轉繁體(純 HTML + 純 JS)</title>
<style>
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans TC", "Microsoft JhengHei", "PingFang TC"; padding: 20px; background:#f7f9fc; color:#111; }
h1 { font-size: 20px; margin-bottom: 6px; }
.box { display:flex; gap:12px; }
textarea { width:100%; height:220px; padding:10px; border:1px solid #ddd; border-radius:6px; resize:vertical; background:#fff; }
.col { flex:1; display:flex; flex-direction:column; }
.controls { margin-top:10px; display:flex; gap:8px; }
button { padding:8px 12px; border-radius:6px; border:1px solid #cfd8e3; background:#fff; cursor:pointer; }
button.primary { background:#246f9e; color:#fff; border-color:#1f5e84; }
.small { font-size:12px; color:#666; margin-top:8px; }
</style>
</head>
<body>
<h1>簡體↔繁體(純 HTML + 純 JS)</h1>
<div class="box">
<div class="col">
<label>輸入(簡體)</label>
<textarea id="inputText" placeholder="在這裡貼上簡體中文或混合文字...">(示例:简体中文转换为繁体中文,软件、模块,医院,医生,里程碑)</textarea>
<div class="controls">
<button id="convertBtn" class="primary">轉換 →</button>
<button id="swapBtn">交換</button>
<button id="copyOutBtn">複製結果</button>
</div>
</div>
<div class="col">
<label>輸出(繁體)</label>
<textarea id="outputText" readonly placeholder="轉換結果會顯示在這裡..."></textarea>
<div class="controls">
<button id="toInputBtn">貼回左側</button>
<button id="clearBtn">清除</button>
</div>
</div>
</div>
<br/>
<div class="box,small">說明:此檔案使用內建詞表與字表做轉換;要更精準可加入更多詞條或用專業字典(如 OpenCC)。</div>
<script src="tw_cn.js"></script>
<script>
// 保證 tw_cn_convert 已定義
const input = document.getElementById('inputText');
const output = document.getElementById('outputText');
const convertBtn = document.getElementById('convertBtn');
const copyOutBtn = document.getElementById('copyOutBtn');
const swapBtn = document.getElementById('swapBtn');
const toInputBtn = document.getElementById('toInputBtn');
const clearBtn = document.getElementById('clearBtn');
convertBtn.addEventListener('click', () => {
const src = input.value || '';
try {
const converted = window.tw_cn_convert(src);
output.value = converted;
} catch (e) {
output.value = '轉換錯誤:' + e.message;
}
});
copyOutBtn.addEventListener('click', async () => {
if (!output.value) return alert('沒有可複製的結果。');
try {
await navigator.clipboard.writeText(output.value);
alert('已複製到剪貼簿');
} catch {
alert('複製失敗,請手動選取並複製。');
}
});
swapBtn.addEventListener('click', () => {
const a = input.value;
input.value = output.value;
output.value = a;
});
toInputBtn.addEventListener('click', () => {
input.value = output.value;
});
clearBtn.addEventListener('click', () => {
input.value = '';
output.value = '';
});
// 預設自動轉換一次(示範)
convertBtn.click();
</script>
</body>
</html>
js code: 因為不聽AI的話把上千筆字典都放進去 所以太大 請去GITHUB查看