


La solution ultime pour convertir les caractères chinois en Pinyin en JavaScript, avec une introduction détaillée à la méthode de saisie JS Pinyin
Avant-propos
Il existe de nombreux articles sur Internet sur la conversion des caractères chinois et du pinyin à l'aide de JS, mais ils sont assez compliqués et ils sont tous copiés les uns des autres, et certains ne le font pas prennent en charge les caractères polyphoniques, et certains ne prennent pas en charge les tonalités, et certains fichiers de dictionnaire sont trop volumineux. Par exemple, parfois j'ai juste besoin d'obtenir la première lettre du pinyin chinois mais je dois importer un fichier de dictionnaire de 200 Ko, qui ne peut pas répondre aux besoins réels. .
Pour résumer, j'ai soigneusement organisé et modifié plusieurs fichiers de dictionnaires courants sur Internet et j'ai simplement encapsulé une bibliothèque d'outils pouvant être utilisée directement.
Démonstration de code et DEMO
Adresse du projet github : https://github.com/liuxianan/pinyinjs
Démonstration de démonstration complète : http://demo.liuxianan.com /pinyinjs/
Convertir les caractères chinois en Pinyin :
Convertir le Pinyin en caractères chinois :
Caractères chinois et pinyin Vulgarisation des connaissances pertinentes
Plage de caractères chinois
On pense généralement que la plage de caractères chinois dans l'encodage Unicode est /^[u2E80-u9FFF] $/
(11904-40959), mais beaucoup d'entre eux ce ne sont pas des caractères chinois, ou ce sont des caractères chinois lisibles. Les plages de caractères chinois de plusieurs fichiers de dictionnaire utilisés dans cet article sont toutes /^[u4E00-u9FA5] $/
, c'est-à-dire (19968-40869). Il existe également un caractère chinois distinct 〇. La position Unicode est 12295.
Combinaison Pinyin
Les caractères chinois ont 21 consonnes initiales : b, p, m, f, d, t, n, l, g, k, h, j, q, x, zh , ch, sh, r, z, c, s, 24 finales, dont 6 finales simples : a, o, e, i, u, v, et 18 finales arc à poulies : ai, ei, ui, ao, ou , iu , c'est-à-dire, ve, er, an , en , in, un , vn , ang, eng, ing , ong, en supposant que les consonnes initiales et finales sont combinées par paires, il y aura 24X21=504 combinaisons. La situation réelle est que certaines. les combinaisons n'ont aucun sens, comme bv, gie, ve, etc. Après avoir supprimé cette partie, il reste encore 412 types.
Fichiers de dictionnaire Pinyin
Introduits par ordre croissant en fonction de la taille des fichiers de dictionnaire.
Dictionnaire 1 : lettre initiale Pinyin
Le contenu de ce fichier de dictionnaire est à peu près le suivant :
/** * 拼音首字母字典文件 */ var pinyin_dict_firstletter = {}; pinyin_dict_firstletter.all = "YDYQSXMWZSSXJBYMGCCZQPSSQBYCDSCDQLDYLYBSSJG..."; pinyin_dict_firstletter.polyphone = {"19969":"DZ","19975":"WM","19988":"QJ","20048":"YL",...};
Ce dictionnaire de données convertit les caractères Unicode en 4E00
(19968 )-9FA5
(40869) Au total, 20 902 initiales pinyin de caractères chinois sont assemblées pour obtenir une très longue chaîne, puis les caractères chinois avec des caractères polyphoniques (un total de 370 caractères polyphoniques) sont répertoriés séparément. La taille du fichier du dictionnaire est 25kb
.
L'avantage de ce fichier de dictionnaire est qu'il est de petite taille et prend en charge les caractères multi-phonétiques. L'inconvénient est qu'il ne peut obtenir que la première lettre du Pinyin.
Dictionnaire 2 : Caractères chinois couramment utilisés
Ce fichier de dictionnaire classe les caractères chinois selon le pinyin, avec un total de 401 combinaisons et 6763 caractères chinois couramment utilisés ne sont pas pris en charge. Comme il a été collecté sur Internet et que le nombre de mots inclus est petit, la taille du fichier n'est que de 24 Ko. Je verrai si je peux l'étendre lorsque j'aurai le temps plus tard.
Le contenu approximatif du fichier de dictionnaire est le suivant (ceci n'est qu'un exemple, donc seule une petite partie est affichée) :
/** * 常规拼音数据字典,收录常见汉字6763个,不支持多音字 */ var pinyin_dict_notone = { "a":"啊阿锕", "ai":"埃挨哎唉哀皑癌蔼矮艾碍爱隘诶捱嗳嗌嫒瑷暧砹锿霭", "an":"鞍氨安俺按暗岸胺案谙埯揞犴庵桉铵鹌顸黯", "ang":"肮昂盎", "ao":"凹敖熬翱袄傲奥懊澳坳拗嗷噢岙廒遨媪骜聱螯鏊鳌鏖", "ba":"芭捌扒叭吧笆八疤巴拔跋靶把耙坝霸罢爸茇菝萆捭岜灞杷钯粑鲅魃", "bai":"白柏百摆佰败拜稗薜掰鞴", "ban":"斑班搬扳般颁板版扮拌伴瓣半办绊阪坂豳钣瘢癍舨", "bang":"邦帮梆榜膀绑棒磅蚌镑傍谤蒡螃", "bao":"苞胞包褒雹保堡饱宝抱报暴豹鲍爆勹葆宀孢煲鸨褓趵龅", "bo":"剥薄玻菠播拨钵波博勃搏铂箔伯帛舶脖膊渤泊驳亳蕃啵饽檗擘礴钹鹁簸跛", "bei":"杯碑悲卑北辈背贝钡倍狈备惫焙被孛陂邶埤蓓呗怫悖碚鹎褙鐾", "ben":"奔苯本笨畚坌锛" // 省略其它 };
Plus tard, j'ai lentement découvert qu'il y en avait beaucoup des erreurs dans ce fichier de dictionnaire, telles que le remplacement de 虐
Le pinyin de s'écrit nue
(l'écriture correcte doit être nve), 躺
s'écrit thang
et les caractères multi-phonétiques ne sont pas pris en charge, donc J'ai ensuite régénéré un fichier de dictionnaire dans ce format basé sur d'autres fichiers de dictionnaire :
Un total de 404 combinaisons de pinyin
Contient 6763 chinois couramment utilisés caractères
Prend en charge les caractères multi-phonétiques
Ne prend pas en charge les tonalités
La taille du fichier est 27ko
En même temps, je me suis basé sur un article couramment utilisé en ligne sur le tableau de fréquence d'utilisation des 6763 caractères chinois, ces 6763 caractères chinois sont triés en fonction de la fréquence d'utilisation, de sorte qu'une version JS satisfaisante de la méthode de saisie peut être réalisée.
De plus, selon un autre fichier de dictionnaire plus complet, il a été constaté qu'il existe en réalité 412 combinaisons de pinyin. Les 8 prononciations qui n'apparaissent pas dans le fichier de dictionnaire ci-dessus sont :
chua,den,eng,fiao,m,kei,nun,shei
(19968)- 4E00
(40869) Un total de 20902 caractères chinois (20903 si 〇 est inclus) sont répertoriés en pinyin. La taille du fichier du dictionnaire est 9FA5
: <. 🎜>280kb
3007 (ling2) 4E00 (yi1) 4E01 (ding1,zheng1) 4E02 (kao3) 4E03 (qi1) 4E04 (shang4,shang3) 4E05 (xia4) 4E06 (none0) 4E07 (wan4,mo4) 4E08 (zhang4) 4E09 (san1) 4E0A (shang4,shang3) 4E0B (xia4) 4E0C (ji1) 4E0D (bu4,bu2,fou3) 4E0E (yu3,yu4,yu2) 4E0F (mian3) 4E10 (gai4) 4E11 (chou3) 4E12 (chou3) 4E13 (zhuan1) 4E14 (qie3,ju1) ...
none0
Conformément à l'objectif de réduire autant que possible la taille du fichier de dictionnaire, j'ai constaté qu'à l'exception du premier 〇(3007) dans le fichier ci-dessus, tout le reste est continu, je l'ai donc changé en la structure suivante, La taille du fichier a également été réduite de
: 280kb
117kb
var pinyin_dict_withtone = "yi1,ding1 zheng1,kao3,qi1,shang4 shang3,xia4,none0,wan4 mo4,zhang4,san1,shang4 shang3,xia4,ji1, bu4 bu2 fou3,yu3 yu4 yu2,mian3,gai4,chou3,chou3,zhuan1,qie3 ju1...";
. xiǎo míng tóng xué
本来还准备自己尝试写一个转换的方法的,后来又找到了如下字典文件(下面称为字典B),它收录了20867个汉字,也支持声调和多音字,但是声调是直接标在字母上方的,由于它将汉字也列举出来,所以文件体积比较大,有327kb
,大致内容如下:
{ "吖": "yā,ā", "阿": "ā,ē", "呵": "hē,a,kē", "嗄": "shà,á", "啊": "ā,á,ǎ,à,a", "腌": "ā,yān", "锕": "ā", "錒": "ā", "矮": "ǎi", "爱": "ài", "挨": "āi,ái", "哎": "āi", "碍": "ài", "癌": "ái", "艾": "ài", "唉": "āi,ài", "蔼": "ǎi" /* 省略其它 */ }
但是经过比对,发现有502个汉字是字典A中读音为none
但是字典B中有读音的,还有21个汉字是字典A中有但是B中没有的:
{ "兙": "shí kè", "兛": "qiān", "兝": "fēn", "兞": "máo", "兡": "bǎi kè", "兣": "lǐ", "唞": "dǒu", "嗧": "jiā lún", "囍": "xǐ", "堎": "lèng líng", "猤": "hú", "瓩": "qián wǎ", "礽": "réng", "膶": "rùn", "芿": "rèng", "蟘": "tè", "貣": "tè", "酿": "niàng niàn niáng", "醸": "niàng", "鋱": "tè", "铽": "tè" }
还有7个汉字是B中有但是A中没有的:
{ "㘄": "lēng", "䉄": "léng", "䬋": "léng", "䮚": "lèng", "䚏": "lèng,lì,lìn", "㭁": "réng", "䖆": "niàng" }
所以我在字典A的基础上将二者进行了合并,得到了最终的字典文件pinyin_dict_withtone.js,文件大小为122kb
:
var pinyin_dict_withtone = "yī,dīng zhēng,kǎo qiǎo yú,qī,shàng,xià,hǎn,wàn mò,zhàng,sān,shàng shǎng,xià,qí jī...";
如何使用
我将这几种字典文件放在一起并简单封装了一下解析方法,使用中可以根据实际需要引入不同字典文件。
封装好的3个方法:
/** * 获取汉字的拼音首字母 * @param str 汉字字符串,如果遇到非汉字则原样返回 * @param polyphone 是否支持多音字,默认false,如果为true,会返回所有可能的组合数组 */ pinyinUtil.getFirstLetter(str, polyphone); /** * 根据汉字获取拼音,如果不是汉字直接返回原字符 * @param str 要转换的汉字 * @param splitter 分隔字符,默认用空格分隔 * @param withtone 返回结果是否包含声调,默认是 * @param polyphone 是否支持多音字,默认否 */ pinyinUtil.getPinyin(str, splitter, withtone, polyphone); /** * 拼音转汉字,只支持单个汉字,返回所有匹配的汉字组合 * @param pinyin 单个汉字的拼音,不能包含声调 */ pinyinUtil.getHanzi(pinyin);
下面分别针对不同场合如何使用作介绍。
如果你只需要获取拼音首字母
<script type="text/javascript" src="pinyin_dict_firstletter.js"></script> <script type="text/javascript" src="pinyinUtil.js"></script> <script type="text/javascript"> pinyinUtil.getFirstLetter('小茗同学'); // 输出 XMTX pinyinUtil.getFirstLetter('大中国', true); // 输出 ['DZG', 'TZG'] </script>
需要特别说明的是,如果你引入的是其它2个字典文件,也同样可以获取拼音首字母的,只是说用这个字典文件更适合。
如果拼音不需要声调
<script type="text/javascript" src="pinyin_dict_noletter.js"></script> <script type="text/javascript" src="pinyinUtil.js"></script> <script type="text/javascript"> pinyinUtil.getPinyin('小茗同学'); // 输出 'xiao ming tong xue' pinyinUtil.getHanzi('ming'); // 输出 '明名命鸣铭冥茗溟酩瞑螟暝' </script>
如果需要声调或者需要处理生僻字
<script type="text/javascript" src="pinyin_dict_withletter.js"></script> <script type="text/javascript" src="pinyinUtil.js"></script> <script type="text/javascript"> pinyinUtil.getPinyin('小茗同学'); // 输出 'xiǎo míng tóng xué' pinyinUtil.getPinyin('小茗同学', '-', true, true); // 输出 ['xiǎo-míng-tóng-xué', 'xiǎo-míng-tòng-xué'] </script>
关于简单拼音输入法
一个正式的输入法需要考虑的东西太多太多,比如词库、用户个人输入习惯等,这里只是实现一个最简单的输入法,没有任何词库(虽然加上也可以,但是web环境不适合引入太大的文件)。
推荐使用第二个字典文件pinyin_dict_noletter.js
,虽然字典三字数更多,但是不能按照汉字使用频率排序,一些生僻字反而在前面。
<link rel="stylesheet" type="text/css" href="simple-input-method/simple-input-method.css"> <input type="text" class="test-input-method"/> <script type="text/javascript" src="pinyin_dict_noletter.js"></script> <script type="text/javascript" src="pinyinUtil.js"></script> <script type="text/javascript" src="simple-input-method/simple-input-method.js"></script> <script type="text/javascript"> SimpleInputMethod.init('.test-input-method'); </script>
结语
由于本工具类的目标环境是web,而web注定了文件体积不能太大,所以不能引入太大的词库文件,由于没有词库的支持,所以多音字无法识别,实现的拼音输入法也无法智能地匹配出合适的词语,需要词库支持的可以参考这个nodejs环境下的项目:http://www.php.cn/
以上就是JavaScript 汉字与拼音互转终极方案 附JS拼音输入法的详细介绍的内容,更多相关内容请关注PHP中文网(www.php.cn)!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de reconnaissance vocale en ligne Introduction : Avec le développement continu de la technologie, la technologie de reconnaissance vocale est devenue une partie importante du domaine de l'intelligence artificielle. Le système de reconnaissance vocale en ligne basé sur WebSocket et JavaScript présente les caractéristiques d'une faible latence, d'un temps réel et d'une multiplateforme, et est devenu une solution largement utilisée. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de reconnaissance vocale en ligne.

WebSocket et JavaScript : technologies clés pour réaliser des systèmes de surveillance en temps réel Introduction : Avec le développement rapide de la technologie Internet, les systèmes de surveillance en temps réel ont été largement utilisés dans divers domaines. L'une des technologies clés pour réaliser une surveillance en temps réel est la combinaison de WebSocket et de JavaScript. Cet article présentera l'application de WebSocket et JavaScript dans les systèmes de surveillance en temps réel, donnera des exemples de code et expliquera leurs principes de mise en œuvre en détail. 1. Technologie WebSocket

Introduction à l'utilisation de JavaScript et de WebSocket pour mettre en œuvre un système de commande en ligne en temps réel : avec la popularité d'Internet et les progrès de la technologie, de plus en plus de restaurants ont commencé à proposer des services de commande en ligne. Afin de mettre en œuvre un système de commande en ligne en temps réel, nous pouvons utiliser les technologies JavaScript et WebSocket. WebSocket est un protocole de communication full-duplex basé sur le protocole TCP, qui peut réaliser une communication bidirectionnelle en temps réel entre le client et le serveur. Dans le système de commande en ligne en temps réel, lorsque l'utilisateur sélectionne des plats et passe une commande

Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de réservation en ligne. À l'ère numérique d'aujourd'hui, de plus en plus d'entreprises et de services doivent fournir des fonctions de réservation en ligne. Il est crucial de mettre en place un système de réservation en ligne efficace et en temps réel. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de réservation en ligne et fournit des exemples de code spécifiques. 1. Qu'est-ce que WebSocket ? WebSocket est une méthode full-duplex sur une seule connexion TCP.

JavaScript et WebSocket : Construire un système efficace de prévisions météorologiques en temps réel Introduction : Aujourd'hui, la précision des prévisions météorologiques revêt une grande importance pour la vie quotidienne et la prise de décision. À mesure que la technologie évolue, nous pouvons fournir des prévisions météorologiques plus précises et plus fiables en obtenant des données météorologiques en temps réel. Dans cet article, nous apprendrons comment utiliser la technologie JavaScript et WebSocket pour créer un système efficace de prévisions météorologiques en temps réel. Cet article démontrera le processus de mise en œuvre à travers des exemples de code spécifiques. Nous

Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest

Utilisation : En JavaScript, la méthode insertBefore() est utilisée pour insérer un nouveau nœud dans l'arborescence DOM. Cette méthode nécessite deux paramètres : le nouveau nœud à insérer et le nœud de référence (c'est-à-dire le nœud où le nouveau nœud sera inséré).

JavaScript est un langage de programmation largement utilisé dans le développement Web, tandis que WebSocket est un protocole réseau utilisé pour la communication en temps réel. En combinant les puissantes fonctions des deux, nous pouvons créer un système efficace de traitement d’images en temps réel. Cet article présentera comment implémenter ce système à l'aide de JavaScript et WebSocket, et fournira des exemples de code spécifiques. Tout d’abord, nous devons clarifier les exigences et les objectifs du système de traitement d’images en temps réel. Supposons que nous disposions d'un appareil photo capable de collecter des données d'image en temps réel.
