免费 AI IDE
超详细 · 网页简体↔繁体转换全流程
——编程狮（w3cschool.cn）手把手教学，复制即用，小白 5 分钟上手！
🎯 教程目标
- 无任何后端依赖，纯前端完成 整站 或 局部 简体↔繁体切换
- 支持 CDN 快速引入、NPM 项目整合、Web Worker 大文本优化
- 提供 3 套代码模板，按需选用
📦 方案对比表
| 方案 | 依赖 | 特点 | 适用场景 |
|---|---|---|---|
| opencc-js CDN | 0 安装 | 一行即用，整页转换 | 静态页/博客 |
| 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>② 创建转换函数
// 简体 → 繁体
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 大文本不卡主线程
① 创建 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"> |
🎯 一键速背口诀
“引库 → 建转换器 → 绑定事件 → 缓存语言”
💻PS
想要趣学 JavaScript，从编程狮的《JavaScript 基础实战》开始！
