github地址，上面有封装好的转换工具：https://github.com/sxei/pinyinjs
里面有几个库，根据功能，库的文件大小也不一样，可以根据需求去引入使用。
里面封装好了方法：
/** * 获取汉字的拼音首字母 * @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_notone.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_withtone.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环境下使用：
<script type="text/javascript" src="dict/pinyin_dict_withtone.js"></script> <script type="text/javascript" src="dict/pinyin_dict_polyphone.js"></script> <script type="text/javascript" src="pinyinUtil.js"></script> <script type="text/javascript"> pinyinUtil.getPinyin(‘长城和长大‘, ‘ ‘, true, true)； // 输出：cháng chéng hé zhǎng dà pinyinUtil.getPinyin(‘喝水和喝彩‘, ‘ ‘, true, true)； // 输出：hē shuǐ hé hè cǎi pinyinUtil.getPinyin(‘伟大的大夫‘, ‘ ‘, true, true)； // 输出：wěi dà de dài fū </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>
原文：https://www.cnblogs.com/fqh123/p/12002069.html