网页中文本朗读功能开发实现

网页中文本朗读功能开发实现

ID:9369191

大小:141.09 KB

页数:11页

时间:2018-04-29

网页中文本朗读功能开发实现_第1页
网页中文本朗读功能开发实现_第2页
网页中文本朗读功能开发实现_第3页
网页中文本朗读功能开发实现_第4页
网页中文本朗读功能开发实现_第5页
资源描述:

《网页中文本朗读功能开发实现》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、北大青鸟华美官网:www.hmaccp.com前几天完成了一个需求,在网页中完成鼠标指向哪里,就用语音读出所指的文本。如果是按钮、链接、文本输入框,则还还要给出是什么的提醒。同时针对大段的文本,不能整段的去读,要按照标点符号进行断句处理。重点当然就是先获取到当前标签上的文本,再把文本转化成语音即可。标签朗读这个很简单了,只用根据当前是什么标签,给出提示即可。1.//标签朗读文本2.vartagTextConfig={3.  'a':'链接',4.  'input[text]':'文本输入框',5.  'input[passwo

2、rd]':'密码输入框',6.  'button':'按钮',7.  'img':'图片'8.};还有需要朗读的标签,继续再添加即可。然后根据标签,返回前缀文本即可。1./**北大青鸟华美官网:www.hmaccp.com1.*获取标签朗读文本2.*@param{HTMLElement}el要处理的HTMLElement3.*@returns{String} 朗读文本4.*/5.functiongetTagText(el){6.  if(!el)return'';7.8.  vartagName=el.tagName.toLo

3、werCase();9.10.  //处理input等多属性元素11.  switch(tagName){12.    case'input':13.      tagName+='['+el.type+']';14.      break;15.    default:16.      break;17.  }18.19.  //标签的功能提醒和作用应该有间隔,因此在最后加入一个空格20.  return(tagTextConfig[tagName]

4、

5、'')+'';21.}获取完整的朗读文本就更简单了,先取标签的功能提醒,

6、再取标签的文本即可。文本内容优先取title其次alt最后innerText。1./**2.*获取完整朗读文本3.*@param{HTMLElement}el要处理的HTMLElement4.*@returns{String} 朗读文本5.*/6.functiongetText(el){7.  if(!el)return'';8.9.  returngetTagText(el)+(el.title

7、

8、el.alt

9、

10、el.innerText

11、

12、'');10.}这样就可以获取到一个标签的功能提醒和内容的全部带朗读文本了。正文分隔

13、北大青鸟华美官网:www.hmaccp.com接下来要处理的就是正文分隔了,在这个过程中,踩了不少坑,走了不少弯路,好好记录一下。首先准备了正文分隔的配置:1.//正文拆分配置2.varsplitConfig={3.  //内容分段标签名称4.  unitTag:'p',5.  //正文中分隔正则表达式6.  splitReg:/[,;,;。]/g,7.  //包裹标签名8.  wrapTag:'label',9.  //包裹标签类名10.  wrapCls:'speak-lable',11.  //高亮样式名和样式12.  

14、hightlightCls:'speak-help-hightlight',13.  hightStyle:'background:#000!important;color:#fff!important'14.};最开始想的就是直接按照正文中的分隔标点符号进行分隔就好了呀。想法如下:1.获取段落全部文本2.使用 split(分隔正则表达式) 方法将正文按照标点符号分隔成小段3.每个小段用标签包裹放回去即可然而理想很丰满,现实很骨感。两个大坑如下:1.split 方法进行分隔,分隔后分隔字符就丢了,也就是说把原文的一些标点符号给

15、弄丢了。2.如果段落内还存在其他标签,而这个标签内部也正好存在待分隔的标点符号,那包裹分段标签时直接破换了原标签的完整性。关于第一个问题,丢失标点的符号,考虑过逐个标点来进行和替换split分隔方法为逐个字符循环来做。北大青鸟华美官网:www.hmaccp.com前者问题是原本一次完成的工作分成了多次,效率太低。第二种感觉效率更低了,分隔本来是很稀疏的,但是却要变成逐个字符出判断处理,更关键的是,分隔标点的位置要插入包裹标签,会导致字符串长度变化,还要处理下标索引。代码是机器跑的,或许不会觉得烦,但是我真的觉得好烦。如果这么干

16、,或许以后哪个AI或者同事看到这样的代码,说不定会说“这真是个傻xxxx”。第二个问题想过很多办法来补救,如先使用正则匹配捕获内容中成对的标签,对标签内部的分隔先处理一遍,然后再处理整个的。想不明白问题二的,可参考一下待分隔的段落:1.

这是一段测试文本,这里有个链接。<

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。