npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

opencc-js

v1.0.5

Published

The JavaScript version of Open Chinese Convert (OpenCC)

Downloads

16,000

Readme

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/[email protected]/dist/umd/full.js"></script>     <!-- Full version -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/cn2t.js"></script>     <!-- For Simplified to Traditional -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/t2cn.js"></script>     <!-- For Traditional Chinese to Simplified Chinese -->

ES6 import

<script type="module">
  import * as OpenCC from './dist/esm/full.js'; // Full version
  import * as OpenCC from './dist/esm/cn2t.js'; // For Simplified to Traditional
  import * as OpenCC from './dist/esm/t2cn.js'; // For Traditional Chinese to Simplified Chinese
</script>

Import opencc-js in Node.js script

npm install opencc-js

CommonJS

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

ES Modules

import * as OpenCC from '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

Or using space and vertical bar as delimiter.

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

Add words

  • Use low-level function ConverterFactory to create converter.
  • Get dictionary from the property Locale.
const customDict = [
  ['“', '「'],
  ['”', '」'],
  ['‘', '『'],
  ['’', '』'],
];
const converter = OpenCC.ConverterFactory(
  OpenCC.Locale.from.cn,                   // Simplified Chinese (Mainland China) => OpenCC standard
  OpenCC.Locale.to.tw.concat([customDict]) // OpenCC standard => Traditional Chinese (Taiwan) with custom words
);
console.log(converter('悟空道:“师父又来了。怎么叫做‘水中捞月’?”'));
// output: 悟空道:「師父又來了。怎麼叫做『水中撈月』?」

This will get the same result with an extra convertion.

const customDict = [
  ['“', '「'],
  ['”', '」'],
  ['‘', '『'],
  ['’', '』'],
];
const converter = OpenCC.ConverterFactory(
  OpenCC.Locale.from.cn, // Simplified Chinese (Mainland China) => OpenCC standard
  OpenCC.Locale.to.tw,   // OpenCC standard => Traditional Chinese (Taiwan)
  [customDict]           // Traditional Chinese (Taiwan) => custom words
);
console.log(converter('悟空道:“师父又来了。怎么叫做‘水中捞月’?”'));
// output: 悟空道:「師父又來了。怎麼叫做『水中撈月』?」

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.

Bundle optimization

  • Tree Shaking (ES Modules Only) may result less size of bundle file.
  • Using ConverterFactory instead of Converter.
import * as OpenCC from 'opencc-js/core'; // primary code
import * as Locale from 'opencc-js/preset'; // dictionary

const converter = OpenCC.ConverterFactory(Locale.from.hk, Locale.to.cn);
console.log(converter('漢語'));