JS編輯器擷取選擇內容的HTML多瀏覽器安全色性寫法（支援Chorme、Firefox）

昨天突然興起，準備完善秋色園背景編輯器關於Chrome、FireFox下的選擇內容的HTML相容處理。
 
JS編輯器擷取選擇內容的HTML相容性寫法問題描述：
對於如何擷取選擇的文本（包括Html標籤），通常網路上的答案是：
var  deditor=document.getElementById('iframe名稱').contentWindow;
IE：deditor.pos.htmlText，獲得html內容。
其它瀏覽器：deditor.window.getSelection().toString(); 僅擷取不包括html標籤的文本。
問題：假充你給一段選擇的文字（包括換行、段落格式化的），加一個背影或邊框等操作時，如果html標籤都失蹤了，僅剩下文字，那就不是您想要的效果了。
 
既然知道了問題，如何解決JS相容性？
 
解決問題步驟一：網路搜尋
本人並不善長js，深夜中，只能靠程式員的本能，百度或Google現搜現處理了。
然而這個互連網，稍為有點細活的代碼，網路上總是難以搜尋，偶爾搜出來的，除了沒有答案，另外就是通用性：
deditor.window.getSelection().toString()或deditor.window.getSelection().getRangeAt(0)。
類似的只能擷取文字，可是，我要的是包括Html標籤的文本，你本應該懂的。
 
解決問題步驟二：代碼調試
在指定相關符合關鍵字不多的網頁中， 找到一個特殊的功能：“Chrome“的指令碼調試。
調試方法：工具 - 開發人員工具 - scripts - 選擇要調試的js檔案。
接下來就是左側設定斷點，右邊的設定監控變數和控制下一步等。
 
很遺憾的是，雖然能調試，試了很多屬性和方法，可是還是沒發現Chorme下能擷取 選擇的內容的Html方式。
調試如下：
 
 
解決問題步驟三：重複網路搜尋
一般比較有價值的代碼，網上很少會直接出現，一方是開發人員比較捨不得，另一方面是大夥不太愛寫文章。
因此，繼續搜尋，從各類不同的文章中，提取出可能有用的代碼。
最後，不知在哪了，看到了一個：selection.getRangeAt(0).cloneContents().childNodes。

從正常的思維中，clone後再取子節點，和直接取子節點，有啥區別呢？可是就是有區別。
 
解決問題步驟四：重複的代碼調試
繼續調試，斷點，監控變數及值，最後發現，通過複製後取的子節點，可以取到outerHTML 屬性，於是問題比較明朗化，寫個方法for一下組合。
    function GetChormeInnerHTML(nodes)
    {
        var result='';
var node=null;
for (var i = 0; i < nodes.length; i++)
{
node=nodes[i];
if(node.outerHTML)
{
result+=node.outerHTML;
}
else if(node.nodeValue)
{
result+=node.nodeValue;
}
}
        return result.replace("<div><br></div>","<br>");
    }
 由於在Chorme下每次斷行符號都產生"<div><br></div>“，於是去掉多餘的標識。
瀏覽器安全色，不會讓你太輕鬆
本來以為問題解決了，於是在firefox下試了一下，靠，這B的firefox，竟然不行。
於是使用Firfox，進行指令碼調試，發現firefox下獲得到子節點，根本沒有outerHTML 屬性，太悲劇了，連這個都沒有，問題又卡住了。
 
解決問題步驟五：持續的網路搜尋
關鍵換成了firefox下的js選擇html的相關內容及相容寫法，可惜，網路上都是迷惑人標題+沒有答案的內容。
在經過N小時的頭腦風暴和搜尋體驗之後，冷靜了一下，B的，回去繼續調試，看能不能發現新大陸。
 
解決問題步驟六：持續的調試代碼
在Firfox下，調試各屬性可能產生的值，及出來的值，明顯的沒有直接的答案。
最後發現，由於是節點，節點就是屬性，標籤名、內容文本夠成的。
調試如：
 

解決問題步驟七：創新思維：無招剩有招，沒有現成的，不要怕麻煩，一切從頭組裝
在發揮不怕麻煩的精神下，自己重新組合節點的outerHTML，再把所有節點的outerHTML拼接起來。
function GetFireFoxInnerHTML(nodes)
    {
        var result='';
        var node;
        for (var i = 0; i < nodes.length; i++)
        {
            node=nodes[i];
            if(node.nodeValue)
還原。
            {
                result+=node.nodeValue;
            }
            else if(node.tagName)
            {
                result+="<"+node.tagName;
                if(node.innerHTML)
                {
                    //屬性還原。
                    if(node.attributes && node.attributes.length>1)
                    {
                        for(var j=0;j<node.attributes.length-1;j++) // 忽略最後一個，最後一個是FirFox自己的節點。
                        {
                            result+=' '+node.attributes[j].name+"='"+node.attributes[j].value+"'";
                        }
                    }
                    result+=">"+node.innerHTML+"</"+node.tagName+">";
                }
                else
                {
                    result+=" />";
                }
               
            }
        }
        return result;
     }
 
步驟八：花點時間，記錄在案，分享成果，後續可查。

其它：
這兩三天，花了點功能，給秋色園的部落格增加了論壇模式，簡單切換皮膚就變成了論壇，省去了部署論壇的麻煩，還省了點伺服器費用。

 

摘自 路過秋天