JS 網(wǎng)頁簡體轉繁體超詳細教程｜4 套方案 + Web Worker + 記憶按鈕

編程獅（w3cschool.cn） 2025-08-08 17:03:40 瀏覽數(shù) (508)

反饋

超詳細 · 網(wǎng)頁簡體?繁體轉換全流程
——編程獅（w3cschool.cn）手把手教學，復制即用，小白 5 分鐘上手！

?? 教程目標

無任何后端依賴，純前端完成整站或局部簡體?繁體切換
支持 CDN 快速引入、NPM 項目整合、Web Worker 大文本優(yōu)化
提供 3 套代碼模板，按需選用

?? 方案對比表

方案	依賴	特點	適用場景
opencc-js CDN	0 安裝	一行即用，整頁轉換	靜態(tài)頁/博客
NPM 包	`npm install`	ES 模塊、可打包	Vue/React 項目
無庫映射	0 依賴	體積小、需自建字典	小程序/小游戲
Web Worker	同上	大文本不卡主線程	富文本編輯器

?? 方案 A：CDN 一鍵整頁轉換（最快）

① 引入 CDN

<!-- 放在 <head> 或 <body> 末尾 -->
<script src="https://cdn.jsdelivr.net/npm/opencc-js@1.0.5/dist/umd/opencc.min.js"></script>

② 創(chuàng)建轉換函數(shù)

// 簡體 → 繁體
const s2t = OpenCC.Converter({ from: 'cn', to: 'tw' });
// 繁體 → 簡體
const t2s = OpenCC.Converter({ from: 'tw', to: 'cn' });

③ 綁定按鈕

<button id="toggleBtn">簡體 ? 繁體</button>
<script>
  let isTrad = false;
  document.getElementById('toggleBtn').addEventListener('click', () => {
    document.body.innerHTML = isTrad
      ? t2s(document.body.innerHTML)
      : s2t(document.body.innerHTML);
    isTrad = !isTrad;
  });
</script>

? 效果

點擊按鈕 → 整頁文字瞬間切換，無需刷新。

?? 方案 B：NPM/Vite/React/Vue 項目整合

① 安裝

npm install opencc-js

② 使用示例（React Hook）

import { useState } from 'react';
import { OpenCC } from 'opencc-js';


const converter = new OpenCC('s2t.json'); // 簡體→繁體


export default function App() {
  const [text, setText] = useState('簡體中文示例');
  const toggle = () => setText(converter.convertSync(text));
  return (
    <div>
      <p>{text}</p>
      <button onClick={toggle}>轉換</button>
    </div>
  );
}

?? 方案 C：無庫極簡映射（適合小程序）

① 自建映射表

const dict = {
  '簡': '簡', '體': '體', '個': '個', '國': '國', /* 按需擴展 */
};
const s2t = txt => [...txt].map(c => dict[c] || c).join('');

② 使用

document.getElementById('text').textContent = s2t('簡體示例');

體積小，可定制，但需補全字典。

?? 方案 D：Web Worker 大文本不卡主線程

① 創(chuàng)建 `worker.js`

importScripts('https://cdn.jsdelivr.net/npm/opencc-js@1.0.5/dist/umd/opencc.min.js');
const s2t = OpenCC.Converter({ from: 'cn', to: 'tw' });
self.onmessage = e => self.postMessage(s2t(e.data));

② 主線程調用

const worker = new Worker('worker.js');
worker.postMessage('很長很長的文本...');
worker.onmessage = e => console.log('轉換結果', e.data);

?? 進階：簡繁按鈕 + 本地存儲記憶

<button id="langBtn">簡體</button>
<script>
  const s2t = OpenCC.Converter({ from: 'cn', to: 'tw' });
  const t2s = OpenCC.Converter({ from: 'tw', to: 'cn' });
  let lang = localStorage.getItem('lang') || 'cn';
  const apply = () => {
    document.body.innerHTML = lang === 'tw' ? s2t(document.body.innerHTML) : t2s(document.body.innerHTML);
    document.getElementById('langBtn').textContent = lang === 'tw' ? '繁體' : '簡體';
  };
  document.getElementById('langBtn').addEventListener('click', () => {
    lang = lang === 'cn' ? 'tw' : 'cn';
    localStorage.setItem('lang', lang);
    apply();
  });
  apply();
</script>

刷新頁面仍保持上次語言選擇。

?? 常見問題 FAQ

問題	解決
大文本卡頓	改用 Web Worker 或分段渲染
Vue/React 組件不更新	把 `innerHTML` 換成 `v-html` / `dangerouslySetInnerHTML`
SEO 影響	服務端渲染 SSR 后再轉換，或用 `<meta name="description">`