/opencc-js

The JavaScript version of Open Chinese Convert (OpenCC)

Primary LanguageJavaScriptMIT LicenseMIT

opencc-js

The JavaScript version of Open Chinese Convert (OpenCC)

繁體版 - 简体版

Import

Import opencc-js in HTML page

Import in HTML pages:

<script src="https://cdn.jsdelivr.net/npm/opencc-js@1.0.3/data.min.js"></script>          <!-- Required -->
<script src="https://cdn.jsdelivr.net/npm/opencc-js@1.0.3/data.cn2t.min.js"></script>     <!-- For Simplified to Traditional -->
<script src="https://cdn.jsdelivr.net/npm/opencc-js@1.0.3/data.t2cn.min.js"></script>     <!-- For Traditional Chinese to Simplified Chinese -->
<script src="https://cdn.jsdelivr.net/npm/opencc-js@1.0.3/bundle-browser.min.js"></script><!-- Required -->

or

<script src="https://como65416.github.io/opencc-js/data.js"></script>          <!-- Required -->
<script src="https://como65416.github.io/opencc-js/data.cn2t.js"></script>     <!-- For Simplified to Traditional -->
<script src="https://como65416.github.io/opencc-js/data.t2cn.js"></script>     <!-- For Traditional Chinese to Simplified Chinese -->
<script src="https://como65416.github.io/opencc-js/bundle-browser.js"></script>    <!-- Required -->

Import opencc-js in Node.js script

npm install opencc-js
const OpenCC = require('opencc-js');

Usage

Basic usage

// Convert Traditional Chinese (Hong Kong) to Simplified Chinese (Mainland China)
const converter = OpenCC.Converter({ from: 'hk', to: 'cn' });
console.log(converter('漢語')); // output: 汉语

Custom Converter

const converter = OpenCC.CustomConverter([
  ['香蕉', 'banana'],
  ['蘋果', 'apple'],
  ['梨', 'pear'],
]);
console.log(converter('香蕉 蘋果 梨')); // output: banana apple pear

DOM operations

HTML attribute lang='*' defines the targets.

<span lang="zh-HK">漢語</span>
// Set Chinese convert from Traditional (Hong Kong) to Simplified (Mainland China)
const converter = OpenCC.Converter({ from: 'hk', to: 'cn' });
// Set the conversion starting point to the root node, i.e. convert the whole page
const rootNode = document.documentElement;
// Convert all elements with attributes lang='zh-HK'. Change attribute value to lang='zh-CN'
const HTMLConvertHandler = OpenCC.HTMLConverter(converter, rootNode, 'zh-HK', 'zh-CN');
HTMLConvertHandler.convert(); // Convert  -> 汉语
HTMLConvertHandler.restore(); // Restore  -> 漢語

API

  • .Converter({}): declare the converter's direction via locals.
    • default: { from: 'tw', to: 'cn' }
    • syntax : { from: local1, to: local2 }
  • locals: letter codes defining a writing local tradition, occasionally its idiomatic habits.
    • cn: Simplified Chinese (Mainland China)
    • tw: Traditional Chinese (Taiwan)
      • twp: with phrase conversion (ex: 自行車 -> 腳踏車）
    • hk: Traditional Chinese (Hong Kong)
    • jp: Japanese Shinjitai
    • t: Traditional Chinese (OpenCC standard. Do not use unless you know what you are doing)
  • .CustomConverter([]) : defines custom dictionary.
    • default: []
    • syntax : [ ['item1','replacement1'], ['item2','replacement2'], … ]
  • .HTMLConverter(converter, rootNode, langAttrInitial, langAttrNew ) : uses previously defined converter() to converts all HTML elements text content from a starting root node and down, into the target local. Also converts all attributes lang from existing langAttrInitial to langAttrNew values.
  • lang attributes : html attribute defines the languages of the text content to the browser, at start (langAttrInitial) and after conversion (langAttrNew).
  • ignore-opencc : html class signaling an element and its sub-nodes will not be converted.