簡體轉繁體(純 HTML + 純 JS) ~ 線上簡體轉繁體工具(online-tw_cn)

簡體轉繁體(純 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查看

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *