网页中文本朗读功能开发实现.doc
《网页中文本朗读功能开发实现.doc》由会员分享,可在线阅读,更多相关《网页中文本朗读功能开发实现.doc(10页珍藏版)》请在三一文库上搜索。
1、前几天完成了一个需求,在网页中完成鼠标指向哪里,就用语音读出所指的文本。 如果是按钮、链接、文本输入框,则还还要给出是什么的提醒。同时针对大段的文 本,不能整段的去读,要按照标点符号进行断句处理。重点当然就是先获取到当前标签上的文本,再把文本转化成语音即可。标签朗读这个很简单了,只用根据当前是什么标签,给出提示即可。1./标签朗读文本2.var tagTextConfig = 3.a:链接,4.inputtext:文本输入框,5.inputpassword:密码输入框,6.button:按钮,7.8.img:图片;还有需要朗读的标签,继续再添加即可。然后根据标签,返回前缀文本即可。1./*2.
2、*获取标签朗读文本3.* param HTMLEIement el要处理的 HTMLEIement4.* returns String朗读文本5.*/6.function getTagText(el) 7.if (!el) return ;8.var tagName =;9./处理in put等多属性元素10.switch (tagName) 11.case input :12.tagName += + el.type +;13.break;14.default :15.break;16.17./标签的功能提醒和作用应该有间隔,因此在最后加入一个空格18.return (tagTextConf
3、igtagName |”)+ ;19.获取完整的朗读文本就更简单了,先取标签的功能提醒,再取标签的文本即可。文本内容优先取title 其次alt最后innerText1./*2.*获取完整朗读文本3.* param HTMLEIement el要处理的 HTMLEIement4.* returns String朗读文本5.*/6.function getText(el) 7.if (!el) return ;8.return getTagText(el) + (el.title | el.alt | el.innerText |);9.这样就可以获取到一个标签的功能提醒和内容的全部带朗读文本了
4、正文分隔接下来要处理的就是正文分隔了,在这个过程中,踩了不少坑,走了不少弯路,好好记录一下。首先准备了正文分隔的配置:1./正文拆分配置2.var splitConfig = 3./内容分段标签名称4.unitTag: p,5./正文中分隔正则表达式6.splitReg:/,;,;。/ g,7./包裹标签名8.wrapTag: label,9./包裹标签类名10.wrapCls: speak-lable ,11./高亮样式名和样式12.hightlightCIs:speak-help-hightlight,13.hightStyle:background: #000!important; co
5、lor: #fff!important14.;最开始想的就是直接按照正文中的分隔标点符号进行分隔就好了呀。想法如下:1. 获取段落全部文本2. 使用split(分隔正则表达式)方法将正文按照标点符号分隔成小段3. 每个小段用标签包裹放回去即可然而理想很丰满,现实很骨感。两个大坑如下:1. split方法进行分隔,分隔后分隔字符就丢了,也就是说把原文的一些标点符号 给弄丢了。2. 如果段落内还存在其他标签,而这个标签内部也正好存在待分隔的标点符号,那包裹分段标签时直接破换了原标签的完整性。关于第一个问题,丢失标点的符号,考虑过逐个标点来进行和替换split 分隔方法为逐个字符循环来做。前者问题是
6、原本一次完成的工作分成了多次,效率太低。第二种感觉效率更低了, 分隔本来是很稀疏的,但是却要变成逐个字符出判断处理,更关键的是,分隔标点 的位置要插入包裹标签,会导致字符串长度变化,还要处理下标索引。代码是机器 跑的,或许不会觉得烦,但是我真的觉得好烦。如果这么干,或许以后哪个AI或者同事看到这样的代码,说不定会说“这真是个傻XXXX ”。第二个问题想过很多办法来补救,如先使用正则匹配捕获内容中成对的标签,对标签内部的分隔先处理一遍,然后再处理整个的。想不明白问题二的,可参考一下待分隔的段落:1.这是一段测试文本,这里有个链接。 您好,可以点击此处进行跳转 还有其他内容其他内容容其他内容容其他
7、内容,容其他内容。如先使用/v(w+?)(.+?)/g正则,依次捕获段落内被标签包裹的内容,对标签内部的内容先处理。但是问题又来了,这么处理的都是字符串,在js中都是基本类型,这些操作进行的时候都是在复制的基础上进行的,要修改到原字符串里去,还得记录下原本的开始 结束位置,再将新的插进去。繁,还是繁,但是已经比之前逐个字符去遍历的好, 正则捕获中本来就有了匹配的索引,直接用即可,还能接受。但是这只是处理了段落内部标签的问题,段落内肯定还有很多文本是没有处理呢,怎么办?正则匹配到了只是段落内标签的结果啊, 外面的没有啊。哦,对,有匹配到的索引, 上次匹配到的位置加上上次处理的长度,就是一段直接文
8、本的开始。下一次匹配到 的索引-1就是这段直接文本的结束。这只是匹配过程中的,还有首尾要单独处理。又回到烦的老路上去了。这么烦,一个段落分隔能这么繁琐,我不信!突然想到了,有文本节点这么个东西,删繁就简嘛,正则先到边上去,直接处理段 落的所有节点不就行了。文本节点则分隔直接包裹,标签节点则对内容进行包裹,这种情况下处理的直接是dom,更省事。文本节点里放标签?这是在开玩笑么,是也不是。文本节点里确实只能放文本,但 是我把标签直接放进去,它会自动转义,那最后再替换出来不就行了。好了,方案终于有了,而且这个方案逻辑多简单,代码逻辑自然也不会烦。1./*2.*正文内容分段处理3.* param jQ
9、ueryObject/HTMLEIement/String$content要处理的正文jQ对象或HTMLEIemen或其对应选择器4.*/5.function splitConent($content) 6.$content = $($content);7.$content.find(splitConfig.unitTag).each(function (index, item) 8.var $item = $(item),9.text = $.trim($item.text();10.if (!text)return ;11.var nodes = $item O.childNodes;12
10、.$.each(nodes, function (i, node) 13.switch (node.nodeType) 14.case 3:15./ text 节点16./由于是文本节点,标签被转义了,后续再转回来17.node.data = +18.,$& ) +19.;20.break;21.case 1:22./ 元素节点23.var innerHtml = node.innerHTML,24.start =,25.end =;26./如果内部还有直接标签,先去掉27.var startResult =/A/ .exec(innerHtml);28.if (startResult) 29
11、.start = startResult0;30.innerHtml = innerHtml.substr(start.length);31.32.var endResult =/$/. exec(innerHtml);33.if (endResult) 34.end = endResult 0;35.innerHtml = innerHtml.substring(0, endResult.index);36.37./更新内部内容38.node.innerHTML = start +39. +40.innerHtml.replace(splitConfig.splitReg,+ splitCo
12、nfig.wrapTag + ) +$&41. +42.end;43.break;44.default :45.break;46.47.);48./处理文本节点中被转义的 html标签49.$item 0.innerHTML = $item 0.innerHTML50.replace( newRegExp <+ splitConfig.wrapTag+ >,g ), )51.replace( new RegExp &It;/+ splitConfig.wrapTag +>);,g ), /+ splitConfig.wrapTag +52.$item.find(splitCo
13、nfig.wrapTag).addClass(splitConfig.wrapCls);53.);54.上面代码中最后对文本节点中被转义的包裹标签替换似乎有点麻烦,但是没办法,ES5之前JavaScript并不支持正则的后行断言(也就是正则表达式中“后顾”)所以没办法对包裹标签前后的&It;和>进行精准替换,只能连同标签名一起替换。事件处理在上面完成了文本获取和段落分隔,下面要做的就是鼠标移动上去时获取文本触发朗读即可,移开时停止朗读即可。鼠标移动,只读一次,基于这两点原因,使用mouseenter和 mouseleave事件来完成。原因:1. 不冒泡,不会触发父元素的再次朗读2. 不重
14、复触发,一个元素内移动时不会重复触发1./*2.*在页面上写入咼亮样式3.*/4.function createStyle() 5.if (document.getElementByld( speak-light-style) return ;6.var style = document.createElement(style );7.style.id =speak-light-style;8.style.innerText =.+ splitConfig.hightlightCIs + splitConfig.hightStyle +;9.document.getElementsByTagN
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 中文 朗读 功能 开发 实现
链接地址:https://www.31doc.com/p-14604230.html