HTML5 : 多行題庫設定之修正

人多半會有盲點，往往在和他人的討論、互動中，可以察覺到自己過去沒發現的問題。

之前為了讓大家可以簡單而有結構地自訂我設計的 HTML5 小工具題庫，在設定檔中，使用了一個特殊的小技巧，詳情可以參考這篇舊文：

• 雄 : JavaScript : 有多行內容的字串變數

當時使用一陣子以後，發現在多行題庫設定中，第一行的內容的前幾個字有被吃掉的情形。研究了一下，「吃字」的原因是在不同平臺，使用了不同的「換行字元」。以 Windows 來說，當我們在文字編輯器中，按下 Etner 鍵時，一般會送出 CR (\r) 和 LF (\n) 兩個字元；在 Mac OS X 或是其它 Unix like 的系統中，，按下 Enter 鍵時，則是送出  LF (\n) 一個字元。這讓我在 Windows 中寫的解析多行內容字串指令，在不同平臺，會有不同的結果。後來，甚至因為瀏覽器的版本不同，也會產生問題。

為了解決前述的問題，最後我修改了擷取題庫設定的流程，先用一小段指令，來計算應該要擷取多長的字串。像這樣：

//測試區塊開始
CR_LF_test = function(){/*--這一行請勿更改--
CR_LF testing block
-----*/}.toString().slice("function(){/*--這一行請勿更改--".length+2,-9);
CR_LF_First_Pos = CR_LF_test.indexOf('_LF')-'CR_LF'.indexOf('_LF');
//測試區塊結束

計算完的「CR_LF_First_Pos」長度，可以應用在題庫的擷取指令中，類似這樣：

questionLines = function(){/*--這一行請勿更改--
angry##生氣##mp3/angry.mp3
smile##微笑##mp3/smile.mp3
cry##哭##mp3/cry.mp3
-----*/}.toString().slice("function(){/*--這一行請勿更改--".length+2+(typeof(CR_LF_First_Pos)!='undefined' ? CR_LF_First_Pos:0),-9);

看似完美，其實也正常運作了滿久。

今天一位朋友反應題庫的第一行有「吃字」的情形，看了設定檔，似乎沒什麼問題。在 Notepad++ 中，顯示所有特殊字元後，看到一個自己之前沒注意到的情境(以前面的例子來說明)：

• 在「CR_LF_test」中，「CR_LF testing block」的換行字元是用 Windows 的 CR + LF 兩個字元。
• 在「questionLines」中，每一行都是用 LF 一個字元來換行。

這樣一來，算出來的 CR_LF_First_Pos」就會多一，導致「questionLines」的第一個字元會被捨去不取用，而造成「吃字」的情形。

以前我在測試時，要嘛都是純 Windows 的環境，要嘛就是純 Unix like 的環境，環境單純，哈！人更單純！程式碼自然就單純得沒考慮到混用的情形，這就是一個人時的盲點。幸好有人跟我反應了問題，盲點被找出來了！

那如何解決前述的問題呢？

看來我根本不需要使用「CR_LF_test」那幾行，直接改一下題庫設定解析的指令就好，也就是將：

-----*/}.toString().slice("function(){/*--這一行請勿更改--".length+2+(typeof(CR_LF_First_Pos)!='undefined' ? CR_LF_First_Pos:0),-9);

改為：

-----*/}.toString().replace(/\r/g,"").slice("function(){/*--這一行請勿更改--".length+1,-9);

改了什麼關鍵呢？

• 利用「replace(/\r/g,"")」，將設定中的所有 CR (\r) 都先去掉，解決跨平臺的問題。
• 「slice」取字串的範圍是由題庫設定前一行字串(「function(){/*--這一行請勿更改--」)的長度加一(換行字元)，到尾巴的九個字元(「-----*/}」)。

經過這樣的修正，可以正確無誤的取到使用者設定的多行字串，只要再利用每一行都有一個「\n」的換行元，將它拿來當作分解各行的「分隔符號」，即可解析出自訂題庫的內容了。

後來也因為在測試這題庫設定的問題，發現我在「HTML5 單字高手」和「HTML5 English1200」中，原本設計可以去掉題庫空白行的功能沒發揮作用。順便將臭蟲除掉了。

一直以來，喜歡將東西與別人分享，喜歡幫別人解決問題，過程中可能要用掉不少時間，但在別人的問題中，我看到了自己的盲點，解決了別人的問題，其實也是解決了自己的問題，收穫最多的，還是自己。

相關文章

• 雄 : JavaScript : 有多行內容的字串變數