前幾天完成了一個需求，在網(wǎng)頁中完成鼠標(biāo)指向哪里，就用語音讀出所指的文本。如果是按鈕、鏈接、文本輸入框，則還還要給出是什么的提醒。同時針對大段的文本，不能整段的去讀，要按照標(biāo)點符號進行斷句處理。
重點當(dāng)然就是先獲取到當(dāng)前標(biāo)簽上的文本，再把文本轉(zhuǎn)化成語音即可。
標(biāo)簽朗讀
這個很簡單了，只用根據(jù)當(dāng)前是什么標(biāo)簽，給出提示即可。
// 標(biāo)簽朗讀文本
var tagtextconfig = {
\\\’a\\\’: \\\’鏈接\\\’,
\\\’input[text]\\\’: \\\’文本輸入框\\\’,
\\\’input[password]\\\’: \\\’密碼輸入框\\\’,
\\\’button\\\’: \\\’按鈕\\\’,
\\\’img\\\’: \\\’圖片\\\’
};
還有需要朗讀的標(biāo)簽，繼續(xù)再添加即可。
然后根據(jù)標(biāo)簽，返回前綴文本即可。
/
* 獲取標(biāo)簽朗讀文本
* @param {htmlelement} el 要處理的htmlelement
* @returns {string} 朗讀文本
*/
function gettagtext(el) {
if (!el) return \\\’\\\’;
var tagname = el.tagname.tolowercase();
// 處理input等多屬性元素
switch (tagname) {
case \\\’input\\\’:
tagname = \\\'[\\\’ el.type \\\’]\\\’;
break;
default:
break;
}
// 標(biāo)簽的功能提醒和作用應(yīng)該有間隔，因此在最后加入一個空格
return (tagtextconfig[tagname] || \\\’\\\’) \\\’ \\\’;
}
獲取完整的朗讀文本就更簡單了，先取標(biāo)簽的功能提醒，再取標(biāo)簽的文本即可。
文本內(nèi)容優(yōu)先取 title 其次 alt 最后 innertext。
/
* 獲取完整朗讀文本
* @param {htmlelement} el 要處理的htmlelement
* @returns {string} 朗讀文本
*/
function gettext(el) {
if (!el) return \\\’\\\’;
return gettagtext(el) (el.title || el.alt || el.innertext || \\\’\\\’);
}
這樣就可以獲取到一個標(biāo)簽的功能提醒和內(nèi)容的全部帶朗讀文本了。
正文分隔
接下來要處理的就是正文分隔了，在這個過程中，踩了不少坑，走了不少彎路，好好記錄一下。
首先準(zhǔn)備了正文分隔的配置：
// 正文拆分配置
var splitconfig = {
// 內(nèi)容分段標(biāo)簽名稱
unittag: \\\’p\\\’,
// 正文中分隔正則表達式
splitreg: /[,;，;。]/g,
// 包裹標(biāo)簽名
wraptag: \\\’label\\\’,
// 包裹標(biāo)簽類名
wrapcls: \\\’speak-lable\\\’,
// 高亮樣式名和樣式
hightlightcls: \\\’speak-help-hightlight\\\’,
hightstyle: \\\’background: #000!important; color: #fff!important\\\’
};
最開始想的就是直接按照正文中的分隔標(biāo)點符號進行分隔就好了呀。
想法如下：
獲取段落全部文本
使用 split(分隔正則表達式) 方法將正文按照標(biāo)點符號分隔成小段
每個小段用標(biāo)簽包裹放回去即可
然而理想很豐滿，現(xiàn)實很骨感。
兩個大坑如下：
split 方法進行分隔，分隔后分隔字符就丟了，也就是說把原文的一些標(biāo)點符號給弄丟了。
如果段落內(nèi)還存在其他標(biāo)簽，而這個標(biāo)簽內(nèi)部也正好存在待分隔的標(biāo)點符號，那包裹分段標(biāo)簽時直接破換了原標(biāo)簽的完整性。
關(guān)于第一個問題，丟失標(biāo)點的符號，考慮過逐個標(biāo)點來進行和替換 split 分隔方法為逐個字符循環(huán)來做。
前者問題是原本一次完成的工作分成了多次，效率太低。第二種感覺效率更低了，分隔本來是很稀疏的，但是卻要變成逐個字符出判斷處理，更關(guān)鍵的是，分隔標(biāo)點的位置要插入包裹標(biāo)簽，會導(dǎo)致字符串長度變化，還要處理下標(biāo)索引。代碼是機器跑的，或許不會覺得煩，但是我真的覺得好煩。如果這么干，或許以后哪個ai或者同事看到這樣的代碼，說不定會說“這真是個傻xxxx”。
第二個問題想過很多辦法來補救，如先使用正則匹配捕獲內(nèi)容中成對的標(biāo)簽，對標(biāo)簽內(nèi)部的分隔先處理一遍，然后再處理整個的。
想不明白問題二的，可參考一下待分隔的段落:
這是一段測試文本，這里有個鏈接。您好，可以點擊此處進行跳轉(zhuǎn)還有其他內(nèi)容其他內(nèi)容容其他內(nèi)容容其他內(nèi)容，容其他內(nèi)容。
如先使用/<((w ?)>)(. ?)</2(?=>)/g 正則，依次捕獲段落內(nèi)被標(biāo)簽包裹的內(nèi)容，對標(biāo)簽內(nèi)部的內(nèi)容先處理。
但是問題又來了，這么處理的都是字符串，在js中都是基本類型，這些操作進行的時候都是在復(fù)制的基礎(chǔ)上進行的，要修改到原字符串里去，還得記錄下原本的開始結(jié)束位置，再將新的插進去。繁，還是繁，但是已經(jīng)比之前逐個字符去遍歷的好，正則捕獲中本來就有了匹配的索引，直接用即可，還能接受。
但是這只是處理了段落內(nèi)部標(biāo)簽的問題，段落內(nèi)肯定還有很多文本是沒有處理呢，怎么辦?
正則匹配到了只是段落內(nèi)標(biāo)簽的結(jié)果啊，外面的沒有啊。哦，對，有匹配到的索引，上次匹配到的位置加上上次處理的長度，就是一段直接文本的開始。下一次匹配到的索引-1就是這段直接文本的結(jié)束。這只是匹配過程中的，還有首尾要單獨處理。又回到煩的老路上去了。。。
這么煩，一個段落分隔能這么繁瑣，我不信!
突然想到了，有文本節(jié)點這么個東西，刪繁就簡嘛，正則先到邊上去，直接處理段落的所有節(jié)點不就行了。
文本節(jié)點則分隔直接包裹，標(biāo)簽節(jié)點則對內(nèi)容進行包裹，這種情況下處理的直接是dom，更省事。
文本節(jié)點里放標(biāo)簽?這是在開玩笑么，是也不是。文本節(jié)點里確實只能放文本，但是我把標(biāo)簽直接放進去，它會自動轉(zhuǎn)義，那最后再替換出來不就行了。
好了，方案終于有了，而且這個方案邏輯多簡單，代碼邏輯自然也不會煩。
/
* 正文內(nèi)容分段處理
* @param {jqueryobject/htmlelement/string} $content 要處理的正文jq對象或htmlelement或其對應(yīng)選擇器
*/
function splitconent($content) {
$content = $($content);
$content.find(splitconfig.unittag).each(function (index, item) {
var $item = $(item),
text = $.trim($item.text());
if (!text) return;
var nodes = $item[0].childnodes;
$.each(nodes, function (i, node) {
switch (node.nodetype) {
case 3:
// text 節(jié)點
// 由于是文本節(jié)點，標(biāo)簽被轉(zhuǎn)義了，后續(xù)再轉(zhuǎn)回來
node.data = \\\'<\\\’ splitconfig.wraptag \\\’>\\\’
node.data.replace(splitconfig.splitreg, \\\’$&<\\\’ splitconfig.wraptag \\\’>\\\’)
\\\’\\\’;
break;
case 1:
// 元素節(jié)點
var innerhtml = node.innerhtml,
start = \\\’\\\’,
end = \\\’\\\’;
//