欢迎来到天天文库
浏览记录
ID:9369191
大小:141.09 KB
页数:11页
时间:2018-04-29
《网页中文本朗读功能开发实现》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库。
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.
这是一段测试文本,这里有个链接。<
此文档下载收益归作者所有