中文前端UI架構Kit（九）IE下實現W3C標準的range對象所有api，支援通過xpath跨瀏覽器實現特定選區高亮，書籤標記功能

號外：kitjs官方討論QQ群建立了，QQ群號88093625，歡迎大家加入，討論前端相關話題

kit是目前已知架構中第一個支援完美IE下跨段落，跨任意元素，以及多個textNode的位移問題的高亮工具，以及對range對象的修複，完美修複IE下的range對象以支援了W3C標準range模型的所有的屬性以及介面

demo地址：http://xueduany.github.com/KitJs/KitJs/index.html#highlight，類似iCloud的高亮書籤，類似有道閱讀類似的書籤功能，與他不同的是，kit支援跨段落，且標準化以及相容性更好

（一）Fix IE range對象，類比W3C的標準模型，支援開始節點，結束節點，開始位移，結束位移等

我們都知道IE9之前不支援W3C的標準Selection和Range對象，無法或者選區內容的開始節點和結束節點，以及開始位移和結束位移

現在kit幫你fix了IE下的range對象相容

中文api doc地址: http://xueduany.github.com/jsdoc/out/$Kit.Selection.html

（二）可以根據選中內容產生xpath字串，儲存高亮標籤

先用滑鼠選中一段文本

 

，然後在console裡面，可以看到選中內容，可以序列化為一條xpath的字串

//BODY/DIV[1]/DIV[3]/DIV[2]/P[4]/text()[5]|31|//BODY/DIV[1]/DIV[5]/DIV[2]/TABLE[1]/TBODY[1]/TR[1]/TD[2]/LI[1]/I[1]/I[1]/text()[1]|17

 

（三）根據xpath實現跨瀏覽器高亮

根據之前的xpath字串，在IE的console裡面輸入

$kit.selection.highlight('//BODY/DIV[1]/DIV[3]/DIV[2]/P[4]/text()[5]|31|//BODY/DIV[1]/DIV[5]/DIV[2]/TABLE[1]/TBODY[1]/TR[1]/TD[2]/LI[1]/I[1]/I[1]/text()[1]|17')

我們可以看到同樣的選區在ie中被高亮了

（四）擴充

這樣，基於kit，你可以很輕鬆的實現任意裝置的高亮書籤儲存，類似iCloud的書籤功能，有任何疑問，歡迎討論