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>
----------------------------
以下是做了个小实验，加入有一个人名数组，可能有汉语名称，也可能有英文名称，
想把这个人名数组按照，首字母顺序排序，并且将首字母相同的放在以26个小写英语字母命名的数组中，最后合并在一个大数组中：
var arr=["暗暗","冯大大","巴巴","妹妹","中国","tom","bob","alis","A","安安"]; var changeArr=[]; arr.forEach(item=>{ var obj={name:"",pinyin:""}; obj.name=item; obj.pinyin=pinyinUtil.getFirstLetter(item); changeArr.push(obj); }); console.log(changeArr); changeArr.sort(function(a,b){ return a.pinyin.localeCompare(b.pinyin,"zh"); }); var splitNameArr=[]; var a=[],b=[],c=[],d=[],e=[],f=[],g=[],h=[],i=[],j=[],k=[],l=[],m=[],n=[], o=[],p=[],q=[],r=[],s=[],t=[],u=[],v=[],w=[],x=[],y=[],z=[]; changeArr.forEach(item=>{ var firstPinYin=item.pinyin.charAt(0); console.log(firstPinYin); switch(firstPinYin){ case "a": case "A" : a.push(item); break; case "b": case "B" : b.push(item); break; case "c": case "C" : c.push(item); break; case "d": case "D" : d.push(item); break; case "e": case "E" : e.push(item); break; case "f": case "F" : f.push(item); break; case "g": case "G" : g.push(item); break; case "h": case "H" : h.push(item); break; case "i": case "I" : i.push(item); break; case "j": case "G" : j.push(item); break; case "k": case "K" : k.push(item); break; case "l": case "L" : l.push(item); break; case "m": case "M" : m.push(item); break; case "n": case "N" : n.push(item); break; case "o": case "O" : o.push(item); break; case "p": case "P" : p.push(item); break; case "q": case "Q" : q.push(item); break; case "r": case "R" : r.push(item); break; case "s": case "S" : s.push(item); break; case "t": case "T" : t.push(item); break; case "u": case "U" : u.push(item); break; case "v": case "V" : v.push(item); break; case "w": case "W" : w.push(item); break; case "x": case "X" : x.push(item); break; case "y": case "Y" : y.push(item); break; case "z": case "Z" : z.push(item); break; default: break; } }); console.log(a) splitNameArr.push(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z); console.log(splitNameArr);
完