实用场景:
列表的筛选,如利用拼音全拼或首拼查询中文汉字
基本实现思路:
汉字有21个声母:b, p, m, f, d, t, n, l, g, k, h, j, q, x, zh, ch, sh, r, z, c, s
有韵母24个,其中单韵母有6个:a, o, e, i, u, v, 复韵母有18个:ai , ei,  ui , ao,  ou,  iu , ie, ve,  er,  an , en , in,  un , vn , ang, eng,  ing , ong假设声母和韵母两两组合的话,会有24X21=504种组合,实际情况是有些组合是没有意义的,比如zv, zie, zve等,去除这部分后,还剩余401种;这就为对象枚举的实现提供了可能,结合unicode编码表,创建一个拼音与unicode的映射对象。
代码实现:

创建映射对象:“PinYin”

var PinYin = {"a": "\u554a\u963f\u9515","ai": "\u57c3\u6328\u54ce\u5509\u54c0\u7691\u764c\u853c\u77ee\u827e\u788d\u7231\u9698\u8bf6\u6371\u55f3\u55cc\u5ad2\u7477\u66a7\u7839\u953f\u972d","an": "\u978d\u6c28\u5b89\u4ffa\u6309\u6697\u5cb8\u80fa\u6848\u8c19\u57ef\u63de\u72b4\u5eb5\u6849\u94f5\u9e4c\u9878\u9eef",………………"nou": "\u8028","fou": "\u7f36","bia": "\u9adf"};

定义转换接口ConvertPinyin(“中文汉字”):

function ConvertPinyin(l1) {var l2 = l1.length;var I1 = "";var reg = new RegExp('[a-zA-Z0-9\- ]');for (var i = 0; i < l2; i++) {var val = l1.substr(i, 1);//利用映射对象逐字进行转换var name = arraySearch(val, PinYin);if (reg.test(val)) {I1 += val;} else if (name !== false) {I1 += name;}}//若存在空格用“-”代替I1 = I1.replace(/ /g, '-');while (I1.indexOf('--') > 0) {I1 = I1.replace('--', '-');}return I1;}

定义逐字转换方法:arraySearch("汉字",“映射对象”):

function arraySearch(l1, l2) {for (var name in PinYin) {if (PinYin[name].indexOf(l1) != -1) {return ucfirst(name);break;}}return false;}

定义首字母大写方法:ucfirst():

function ucfirst(l1) {if (l1.length > 0) {var first = l1.substr(0, 1).toUpperCase();var spare = l1.substr(1, l1.length);return first + spare;// return first;}}
ps:可根据需求选择是否需要,例如在利用拼音首拼查询时,可利用大写识别首拼

存在的不足:
1. 拼音汉字搜索不全,无法识别生僻字,繁体字等,如“呉”(可以通过添加unicode编码自主补全)
2. 无法识别多音字,只能识别一个音
3. 文件较大问题:汉拼转换依赖unicode编码,所以转换文件js大部分都是unicode,尝试压缩后还有45kb的大小

纯js实现简单的汉语转字母相关推荐

  1. 纯JS+HTML简单表格增删改查

    前言 欢迎大家来到我的博客,请各位看客们点赞.收藏.关注三连! 欢迎大家关注我的知识库,Java之从零开始 · 语雀 你的关注就是我前进的动力! CSDN专注于问题解决的博客记录,语雀专注于知识的收集 ...

  2. 纯js 实现简单聊天室,可发送表情、图片、发送消息时间

    对项目代码有什么不懂的,欢迎留言一起探讨 <!DOCTYPE html> <html><head><meta charset="utf-8" ...

  3. js 超简单 判断是否字符串是否为纯数字

    js 超简单 判断是否字符串是否为纯数字 if(Number(num)+'' !==NaN+'' ){console.log('是纯数字') }else{console.log('不是纯数字') }

  4. 二维码生成插件qrious(纯JS)

    二维码生成插件qrious(纯JS) 二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能 ...

  5. html5网页怎么实现内容追加,纯js实现网页内容复制后自动追加自定义内容

    网页操作内容复制内容后纯js实现监听自动追加自定义内容 不少网站技术或者博客上有这样的处理,当我们复制代码的时候,会自动加上一段本信息版权为XXXX,这是怎么实现的呢? 其实实现的方式很简单,可以在我 ...

  6. JSF2.0与纯JS框架

    2019独角兽企业重金招聘Python工程师标准>>> 用了JSF一段时间了,也写了几个组件了,对这个框架多少有了一些了解.另外我也用过EXT这样的纯JS的组件系统,因此我想对比一下 ...

  7. 纯js实现html转pdf

    项目开发中遇到了一个变态需求,需要把一整个页面导出为pdf格式,而且要保留页面上的所有的表格.svg图片和样式. 简而言之,就是希望像截图一样,把整个页面截下来,然后保存成pdf. 咋不上天呢-- 查 ...

  8. js纯ajax,自动完成JS类(纯JS, Ajax模式)

    自动完成JS类(纯JS, Ajax模式) 更新时间:2009年03月12日 23:51:15   作者: 自动完成JS类,用户体验较好.封装成类,方便使用.本站 一. 封装的JS文件 //****** ...

  9. F2工作流引擎之-纯JS Web在线可拖拽的流程设计器(八)

         Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员还 ...

最新文章

  1. 这是我看过,最好懂的神经网络
  2. 七丶青龙nvjdc部署教程+短信验证登录对接傻妞
  3. 凄怆与悲凉(灾区现场最新照片)
  4. kotlin集合操作符——总数操作符
  5. python参数类型_Python 参数类型和参数匹配模型
  6. SQLServer优化资料整理(二)
  7. VC2013 配置属性
  8. 【禁忌搜索算法】基于禁忌搜索算法求解函数极值问题含Matlab源码
  9. 概率密度变换公式 雅可比矩阵_连续型随机变量“分布函数”与“概率密度”之间求变换公式...
  10. [完全版] Windows安装与配置Git cz (commitizen)
  11. Solver Prototxt - 参数说明
  12. 关于MAXIMO数据限制代码的理解
  13. [LeetCode][算法初级][数组] 30 有效的数独
  14. 锐龙R3 3300X和R5 3500X 哪个好
  15. 机械设备故障诊断健康监测公开数据集
  16. 怎么把启用计算机的d磁盘,Win10计算机怎么隐藏磁盘盘符?
  17. Android 获取夜深模拟器中的文件获取不到
  18. 世界上只有三种人:程序猿人和男人女人
  19. 年营收增长50%成基准线,智能汽车赛道订单「高位」运行
  20. 如何制作全息视频--3D max+AE搞定

热门文章

  1. excel里输入分数
  2. 生态空间连通度指数计算教程(conefor)
  3. 基于javaweb的日记系统(java+jsp+bootstrap+servlet+mysql)
  4. 腾讯近三年 78 道软件测试面试 题(包含答案)
  5. ChatGPT探索系列之一:理解ChatGPT的背景和应用领域
  6. 添加https后反向代理gateway报错io.netty.handler.ssl.NotSslRecordException: not an SSL/TLS record
  7. “中国星巴克”IPO在即,不过今年上市的独角兽基本都跪了...
  8. 最完美打开三星a9 liteusb调试模式的步骤
  9. 微信企业支付 公众号付款到零钱(二)代码实现
  10. 最容易理解最全的快排的最好时间复杂度分析