1，没别的，像这种没有规则的转化，我们首先需要一个字典文件，字典文件的完整度，决定了转化的成功率与精确度

2，笔者收集了较为完整的字典文件，已上传到博客园，欢迎补充  =>  https://blog-static.cnblogs.com/files/lovling/pinyin.dict.js

这个地址可以直接用 script 标签引入，但是博客园经常抽风，是不是的访问不到，推荐使用时还是在浏览器打开，拷贝到本地在引入使用

3，借助字典，编写程序进行匹配转化，代码如下，注释写的不是很详细，不过相信都能看懂

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>汉字转化为拼音</title>

    <!--<script src="https://blog-static.cnblogs.com/files/lovling/pinyin.dict.js"></script>-->

    <script src="./pinyin.dict.js"></script>

    <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>

</head>

<style type="text/css">

    #word, #butt {

        width: 360px;

        height: 44px;

        margin: 0;

        padding: 0;

        box-sizing: border-box;

        font-size: 14px;

    }

    #text1, #text2, #text3 {

        height: 44px;

    }

</style>

<body>

    <input id="word" type="text" />

    <input id="butt" type="button" value="转化" />

    <div id="text1"></div>

    <div id="text2"></div>

    <div id="text3"></div>

</body>

<script type="text/javascript">

    /**

     * 封装汉字转化为拼音的方法，该方法具有以下特点

     * 1, 多音字只是识别成多种拼音组合, 不能精准识别

     * 2, 不开启多音字, 汉字识别返回使用频率高的拼音

     * @param {String} str: 汉字字符串

     * @param {Boolean} isTone: 是否进行声调识别 默认 false

     * @param {Boolean} isMultitone: 是否穷举多音字 默认 false

     * @return: 如果开启多音字识别, 返回的是数组, 否则返回字符串

     */

    var chineseCharToPinyin = (function () {

        // 注意这里的变量 pinyinDict 来自于字典文件，需要先引入字典文件，且该变量不要在程序中被覆盖

        var temp = pinyinDict.split(','), withtone = {};

        // 循环遍历字典，以汉字字符为 key，对应的拼音为 value，形成一个超大的 JSON 对象

        for(var i = 0; i < temp.length; i++) {

            withtone[String.fromCharCode(i + 19968)] = temp[i];

        }

        var toneMap = {

            "ā": "a1", "á": "a2", "ǎ": "a3", "à": "a4", "ō": "o1", "ó": "o2", "ǒ": "o3",

            "ò": "o4", "ē": "e1", "é": "e2", "ě": "e3", "è": "e4", "ī": "i1", "í": "i2",

            "ǐ": "i3", "ì": "i4", "ū": "u1", "ú": "u2", "ǔ": "u3", "ù": "u4", "ü": "v0",

            "ǖ": "v1", "ǘ": "v2", "ǚ": "v3", "ǜ": "v4", "ń": "n2", "ň": "n3", "": "m2"

        };

        // 未开启声调识别的时候，将带声调的字符切换成不带声调的字母

        var removeTone = function(pinyin) {

            return pinyin.replace(/[āáǎàōóǒòēéěèīíǐìūúǔùüǖǘǚǜńň]/g, function(m) {

                return toneMap[m][0];

            });

        };

        // 过滤掉多音字穷举产生的相同结果

        var simpleUnique = function(array) {

            var result = [], hash = {};

            for(var i = 0; i < array.length; i++) {

                var key = (typeof array[i]) + array[i];

                if(!hash[key]) {

                    result.push(array[i]);

                    hash[key] = true;

                }

            }

            return result;

        };

        // 多音字穷举

        var handlePolyphone = function(array, joinChar) {

            var result = [''], temp = [];

            for(var i = 0; i < array.length; i++) {

                temp = [];

                var t = array[i].split(' ');

                for(var j = 0; j < t.length; j++) {

                    for(var k = 0; k < result.length; k++)

                        temp.push(result[k] + (result[k] ? joinChar : '') + t[j]);

                }

                result = temp;

            }

            return simpleUnique(result);

        };

        // 对外返回一个转化的方法

        return function (str, isTone = false, isMultitone = false) {

            var result = [], pinyin;

            for(var i = 0; i < str.length; i++) {

                pinyin = withtone[str[i]];

                if(!isTone && pinyin) pinyin = removeTone(pinyin);

                if(!isMultitone && pinyin) pinyin = pinyin.replace(/ .*$/g, '');

                result.push(pinyin || str[i]);

            }

            if(!isMultitone) return result.join(" ");

            return handlePolyphone(result, " ");

        }

    })();

    /**

     * 写一个输入框测试一下

     */

    $('#butt').on("click", function (ev) {

        var str = $("#word").val().trim();

        // 最简单的使用

        $("#text1").text(chineseCharToPinyin(str));

        // 带读声识别的使用

        $("#text2").text(chineseCharToPinyin(str, true));

        // 穷举多音字的使用

        $("#text3").text(chineseCharToPinyin(str, true, true))

    });

</script>

</html>

4，效果如下，还是不错的吗

5，唯一遗憾的是，我们发现，开启多音字识别的时候，并不能准确的识别出我们想要的，而是返回了所有可能的组合

6，我们有办法实现准确的识别码？理论上是可行的，只要我们拥有一个强大的词典，

7，注意是词典，不是字典，指每个汉字的所有可能词组，包括各种不同语境，某些地区的使用习惯，某些群体的使用习惯等等

7，这已经涉及到大数据和人工智能的（个人看法），由于组合实在太多，想要收集十分困难，就算收集完成，计算量也非常庞大，一般设备也不一定带的动

HTML5 汉字转化为拼音，带读声，穷举多音字的更多相关文章

  1. C# 将汉字转化成拼音

    本文来自http://www.cnblogs.com/yazdao/archive/2011/06/04/2072488.html 首先下载Visual Studio International Pa ...

  2. c#把汉字转化成全拼音函数（全拼）

    /// <summary>        /// 把汉字转换成拼音(全拼)        /// </summary>        /// <param name=&q ...

  3. 利用python将表格中的汉字转化为拼音

    缺少包时用pip install 进行安装,例如: pip install xlsxwriter   完成代码如下: #!/usr/bin/python #-*-coding:utf-8-*- #fr ...

  4. react下将输入的汉字转化为拼音

    1.首先需要一个简单的拼音和汉字对应的字典文件: /** * 收录常用汉字6763个,不支持声调,支持多音字,并按照汉字使用频率由低到高排序 */ var pinyin_dict_notone = { ...

  5. 将汉字转化为拼音的js插件

    /*---------------------------------------------------------------- // 文件名:chinese2pinyin.js // 文件功能描 ...

  6. 将汉字转化为拼音，正则表达式和得到汉字的Unicode编码

    一:上图,不清楚的看代码注解,很详细了 二:具体代码 窗体代码 using System; using System.Collections.Generic; using System.Compone ...

  7. js如何将汉字转化为拼音

    github地址,上面有封装好的转换工具:https://github.com/sxei/pinyinjs 里面有几个库,根据功能,库的文件大小也不一样,可以根据需求去引入使用. 里面封装好了方法: ...

  8. sql标量值函数，将汉字转化为拼音，无音标

    USE [db_Test]GO SET ANSI_NULLS ONGO SET QUOTED_IDENTIFIER ONGO create function [dbo].[fn_GetPinyin]( ...

  9. 通过类库ChineseChar实现将汉字转化为拼音

    //封装dllusing Microsoft.International.Converters.PinYinConverter;using System.Text;namespace Utils{ p ...

随机推荐

  1. PYTHON之路，线程

    关于多任务的理解, 代码要执行,首先得变成机器认识的东西执行,那么需要解释器.那么执行按道理,一段程序在这里就具体来说一段代码的执行吧,我们知道代码的执行是从上至下按顺序执行,那么这里有条件分支结构, ...

  2. 上手d3js

    0---什么是d3js: d3js是一个开源的,基于对svg操作的数据可视化框架,简单的说他提供了数据提供了一系列的数据可视化工具,可以用他很方便的创造出关于svg的动画:svg动画具有可伸缩,不失真 ...

  3. 使用samba共享文件夹，提供给window访问

    1. 下载yumdownloader yum install -y yum-utils 2. 下载samba mkdir samba cd samba yumdownloader --resolve ...

  4. 一个极其简易版的vue.js实现

    前言 之前项目中一直在用vue,也边做边学摸滚打爬了近一年.对一些基础原理性的东西有过了解,但是不深入,例如面试经常问的vue的响应式原理,可能大多数人都能答出来Object.defineProper ...

  5. ES6模板字符串【${}配合反单引号一起用】

    先看看JavaScript中两个字符串的效果,就很容易知道模板字符串是个啥东西,其实一点也不新鲜.高级编程中,例如java里面的string.format就是干这个事情,诸如此类. 1. 概念理解 A ...

  6. Java Swing 界面中文乱码问题解决（Idea环境）

    编译(build)的时候和运行的时候使用同样的字符集就可以了.这里,我都设置为“UTF-8”.具体做当如下: File->Settings->Build...->Compiler,在 ...

  7. [蓝桥杯]PREV-12.历届试题_危险系数

    问题描述 抗日战争时期,冀中平原的地道战曾发挥重要作用. 地道的多个站点间有通道连接,形成了庞大的网络.但也有隐患,当敌人发现了某个站点后,其它站点间可能因此会失去联系. 我们来定义一个危险系数DF( ...

  8. 在windows下安装、配置、运行PostgreSQL【转】

    安装PostgreSQL 在Windows下的安装就位无脑安装,选择好安装路径就好了,我的安装目录为D:\PostgreSQL\10,需要注意一下几点: 安装过程中需要一个数据库的目录,我的为D:\P ...

  9. adb 常用命令-转载

    转自:https://blog.csdn.net/suxing_ing/article/details/54907860 显示当前运行的全部模拟器:adb devices 获取序列号:adb get- ...

  10. python 文件处理（转载）

    本文给大家介绍Python文件处理相关知识,具体内容如下所示: 出处:https://www.jb51.net/article/80204.htm 1.文件的常见操作 文件是日常编程中常用的操作,通常 ...