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

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

反饋

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

?? 教程目標(biāo)

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

?? 方案對(duì)比表

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

?? 方案 A：CDN 一鍵整頁(yè)轉(zhuǎn)換（最快）

① 引入 CDN

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

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

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

③ 綁定按鈕

<button id="toggleBtn">簡(jiǎn)體 ? 繁體</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>

? 效果

點(diǎn)擊按鈕 → 整頁(yè)文字瞬間切換，無(wú)需刷新。

?? 方案 B：NPM/Vite/React/Vue 項(xiàng)目整合

① 安裝

npm install opencc-js

② 使用示例（React Hook）

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


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


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

?? 方案 C：無(wú)庫(kù)極簡(jiǎn)映射（適合小程序）

① 自建映射表

const dict = {
  '簡(jiǎn)': '簡(jiǎn)', '體': '體', '個(gè)': '個(gè)', '國(guó)': '國(guó)', /* 按需擴(kuò)展 */
};
const s2t = txt => [...txt].map(c => dict[c] || c).join('');

② 使用

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

體積小，可定制，但需補(bǔ)全字典。

?? 方案 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));

② 主線程調(diào)用

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

?? 進(jìn)階：簡(jiǎn)繁按鈕 + 本地存儲(chǔ)記憶

<button id="langBtn">簡(jiǎn)體</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' ? '繁體' : '簡(jiǎn)體';
  };
  document.getElementById('langBtn').addEventListener('click', () => {
    lang = lang === 'cn' ? 'tw' : 'cn';
    localStorage.setItem('lang', lang);
    apply();
  });
  apply();
</script>

刷新頁(yè)面仍保持上次語(yǔ)言選擇。

?? 常見問題 FAQ

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