《网页中文本朗读功能开发实现》由会员分享，可在线阅读，更多相关《网页中文本朗读功能开发实现（11页珍藏版）》请在金锄头文库上搜索。
1、 北大青鸟华美官网： 前几天完成了一个需求，在网页中完成鼠标指向哪里，就用语音读出所指的文本。如果是按钮、链接、文本输入框，则还还要给出是什么的提醒。同时针对大段的文本，不能整段的去读，要按照标点符号进行断句处理。重点当然就是先获取到当前标签上的文本，再把文本转化成语音即可。标签朗读这个很简单了，只用根据当前是什么标签，给出提示即可。1. / 标签朗读文本2. var tagTextConfig = 3. a: 链接,4. inputtext: 文本输入框,5. inputpassword: 密码输入框,6. button: 按钮,7. img: 图片8. ;还有需要朗读的标签，继续再添加即可
2、。然后根据标签，返回前缀文本即可。1. /* 北大青鸟华美官网： 2. * 获取标签朗读文本3. * param HTMLElement el 要处理的 HTMLElement4. * returns String 朗读文本5. */6. function getTagText(el) 7. if (!el) return ;8.9. var tagName = el.tagName.toLowerCase();10.11. / 处理 input等多属性元素12. switch (tagName) 13. case input:14. tagName += + el.type + ;15. b
3、reak;16. default:17. break;18. 19.20. / 标签的功能提醒和作用应该有间隔，因此在最后加入一个空格21. return (tagTextConfigtagName | ) + ;22. 获取完整的朗读文本就更简单了，先取标签的功能提醒，再取标签的文本即可。文本内容优先取 title 其次 alt 最后 innerText。1. /*2. * 获取完整朗读文本3. * param HTMLElement el 要处理的 HTMLElement4. * returns String 朗读文本5. */6. function getText(el) 7. if (
4、!el) return ;8.9. return getTagText(el) + (el.title | el.alt | el.innerText | );10. 这样就可以获取到一个标签的功能提醒和内容的全部带朗读文本了。正文分隔 北大青鸟华美官网： 接下来要处理的就是正文分隔了，在这个过程中，踩了不少坑，走了不少弯路，好好记录一下。首先准备了正文分隔的配置：1. / 正文拆分配置2. var splitConfig = 3. / 内容分段标签名称4. unitTag: p,5. / 正文中分隔正则表达式6. splitReg: /,;，；。/g,7. / 包裹标签名8. wrapTag
5、: label,9. / 包裹标签类名10. wrapCls: speak-lable,11. / 高亮样式名和样式12. hightlightCls: speak-help-hightlight,13. hightStyle: background: #000!important; color: #fff!important14. ;最开始想的就是直接按照正文中的分隔标点符号进行分隔就好了呀。想法如下：1. 获取段落全部文本2. 使用 split(分隔正则表达式) 方法将正文按照标点符号分隔成小段3. 每个小段用标签包裹放回去即可然而理想很丰满，现实很骨感。两个大坑如下：1. split 方
6、法进行分隔，分隔后分隔字符就丢了，也就是说把原文的一些标点符号给弄丢了。2. 如果段落内还存在其他标签，而这个标签内部也正好存在待分隔的标点符号，那包裹分段标签时直接破换了原标签的完整性。关于第一个问题，丢失标点的符号，考虑过逐个标点来进行和替换 split 分隔方法为逐个字符循环来做。 北大青鸟华美官网： 前者问题是原本一次完成的工作分成了多次，效率太低。第二种感觉效率更低了，分隔本来是很稀疏的，但是却要变成逐个字符出判断处理，更关键的是，分隔标点的位置要插入包裹标签，会导致字符串长度变化，还要处理下标索引。代码是机器跑的，或许不会觉得烦，但是我真的觉得好烦。如果这么干，或许以后哪个 AI
7、或者同事看到这样的代码，说不定会说“这真是个傻 xxxx”。第二个问题想过很多办法来补救，如先使用正则匹配捕获内容中成对的标签，对标签内部的分隔先处理一遍，然后再处理整个的。想不明白问题二的，可参考一下待分隔的段落:1. 这是一段测试文本，这里有个链接。您好，可以点击此处进行跳转还有其他内容其他内容容其他内容容其他内容，容其他内容。如先使用 /)(.+?)/g 正则，依次捕获段落内被标签包裹的内容，对标签内部的内容先处理。但是问题又来了，这么处理的都是字符串，在 js 中都是基本类型，这些操作进行的时候都是在复制的基础上进行的，要修改到原字符串里去，还得记录下原本的开始结束位置，再将新的插进去
8、。繁，还是繁，但是已经比之前逐个字符去遍历的好，正则捕获中本来就有了匹配的索引，直接用即可，还能接受。但是这只是处理了段落内部标签的问题，段落内肯定还有很多文本是没有处理呢，怎么办？正则匹配到了只是段落内标签的结果啊，外面的没有啊。哦，对，有匹配到的索引，上次匹配到的位置加上上次处理的长度，就是一段直接文本的开始。下一次匹配到的索引-1 就是这段直接文本的结束。这只是匹配过程中的，还有首尾要单独处理。又回到烦的老路上去了。 北大青鸟华美官网： 这么烦，一个段落分隔能这么繁琐，我不信！突然想到了，有文本节点这么个东西，删繁就简嘛，正则先到边上去，直接处理段落的所有节点不就行了。文本节点则分隔直接
9、包裹，标签节点则对内容进行包裹，这种情况下处理的直接是dom，更省事。文本节点里放标签？这是在开玩笑么，是也不是。文本节点里确实只能放文本，但是我把标签直接放进去，它会自动转义，那最后再替换出来不就行了。好了，方案终于有了，而且这个方案逻辑多简单，代码逻辑自然也不会烦。1. /*2. * 正文内容分段处理3. * param jQueryObject/HTMLElement/String $content 要处理的正文 jQ对象或 HTMLElement或其对应选择器4. */5. function splitConent($content) 6. $content = $($content)
10、;7.8. $content.find(splitConfig.unitTag).each(function (index, item) 9. var $item = $(item),10. text = $.trim($item.text();11. if (!text) return;12.13. var nodes = $item0.childNodes;14.15. $.each(nodes, function (i, node) 16. switch (node.nodeType) 17. case 3:18. / text 节点19. / 由于是文本节点，标签被转义了，后续再转回来
11、20. node.data = +21. node.data.replace(splitConfig.splitReg, $&) +22. ;23. break;24. case 1:25. / 元素节点 北大青鸟华美官网： 26. var innerHtml = node.innerHTML,27. start = ,28. end = ;29. / 如果内部还有直接标签，先去掉30. var startResult = /.exec(innerHtml);31. if (startResult) 32. start = startResult0;33. innerHtml = innerH
12、tml.substr(start.length);34. 35. var endResult = /$/.exec(innerHtml);36. if (endResult) 37. end = endResult0;38. innerHtml = innerHtml.substring(0, endResult.index);39. 40. / 更新内部内容41. node.innerHTML = start +42. +43. innerHtml.replace(splitConfig.splitReg, $&) +44. +45. end;46. break;47. default:48. break;49. 50. );51.52. / 处理文本节点中被转义的 html标签53. $item0.innerHTML = $item0.innerHTML54. .replace(new RegExp(, g), )55. .replace(new RegExp(, g), );56
