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

getTagText(el) + (el.title || el.alt || el.innerText || '');

}

复制到浏览器控制台看看能不克不及听到声音呢？(须要Chrome 33+、Firefox 49+ 或 IE-Edge)

正文分隔

接下来要处理的就是正文分隔了，在这个过程中，埠屯窕少坑，走了不少弯路，好好记录一下。

起首预备了正文分隔的设备：

// 正文拆分派置 
var splitConfig = { 
    // 内容分段标签名称 
    unitTag: 'p', 
    // 正文平分隔正则表达式 
    splitReg: /[,;，；。]/g, 
    // 党越絷签名 
    wrapTag: 'label', 
    // 党越絷签类名 
    wrapCls: 'speak-lable', 
    // 高亮样式名和样式 
    hightlightCls: 'speak-help-hightlight', 
    hightStyle: 'background: #000!important; color: #fff!important' 
};

最开端想的就是直接按照正文中的分隔标点符号进行分隔就好了呀。

设法主意如下：

获取段落全部文本
应用 split(分隔正则表达式) 办法将正文按照标点符号分隔成小段
每个小段用标签担保放归去即可

然而幻想很饱满，实际很骨感。

两个大年夜坑如下：

split 办法进行分隔，分隔后分隔字符就丢了，也就是说把原文的一些标点符号给弄丢了。
如不雅段落内还存在其他标签，而这个标签内部也正好存在待分隔的标点符号，那担保分段标签时直接破换了原标签的完全性。

关于第一个问题，损掉标点的符号，推敲过逐个标点来进行和调换 split 分隔办法为逐个字符轮回来做。

前者问题是本来一次完成的工作分成了多次，效力太低。第二种感到效力更低了，分隔本来是很稀少的，然则却要变成逐个字符出断定处理，更关键的是，分隔标点的地位冲要入党越絷签，会导致字符串长度变更，还要处理下标索引。代码是机械跑的，或许不会认为烦，然则我真的认为好烦。如不雅这么干，或许今后哪个AI或者同事看到如许的代码，说不定会说“这真是个傻xxxx”。

第二个问题想过很多办法来解救，如先应用正则匹配捕获内容中查对的标签，对标签内部的分隔先处理一遍，然后再处理全部的。

<p>这是一段测试文本，这里有个链接。<a>您好，可以点击此处进行跳转</a>还有其他内容其他内容容其他内容容其他内容，容其他内容。</p>

如先应用/<((\w+?)>)(.+?)<\/\2(?=>)/g 正则，依次捕获段落内被标签担保的内容，对标签内部的内容先处理。

然则问题又来了，这么处理的都是字符串，在js中都是根本类型，这些操作进行的时刻都是在复制的基本长进行的，要修改到原字符串里去，还得记录下本来的开端停止地位，再将新的插进去。繁，照样繁，然则已经比之前逐个字符去遍历的好，正则捕获中本来就有了匹配的索引，直接用即可，还能接收。

然则这只是处理了段落内部标签的问题，段落内肯定还有很多文本是没有处理呢，怎么办？

正则匹配到了只是段落内标签的结不雅啊，外面的没有啊。哦，对，有匹配到的索引，前次匹配到的地位加上前次处理的长度，就是一段直接文本的开端。下一次匹配到的索引-1就是这段直接文本的停止。这只是匹配过程中的，还有首尾要零丁处理。又回到烦的老路上瑗了。。。

这么烦，一个段落分隔能这么繁琐，我不信！

忽然想到了，有文本节点这么个器械，删繁就简嘛，正则先到边上去，直接处理段落的所有节点不就行了。

文本节点里放标签？这是在开打趣么，是也不是。文本节点里确切只能放文本，然则我把标签直接放进去，它会主动转义，那最后再调换出来不就行了。

/** 
* 正文内容分段处理 
* @param {jQueryObject/HTMLElement/String}  $content 要处理的┞俘文jQ对象或HTMLElement或其对应选择器 
*/ 
function	
			 2/8   首页 上一页 1 2 3 4 5 6 下一页 尾页	
			

　　推荐阅读
　　固态硬盘寿命短？平衡算法来续命
            开辟者大年夜赛路演 | 12月16日，技巧立异，北京不见不散
            
                
                    
                
                硬件挖的坑真的可以经由过程软件来填吗？实际上不少硬>>>详细阅读


本文标题：网页中文本朗读功能开发实现分享
地址：http://www.17bianji.com/lsqh/39663.html
 1/2    1