javascript獲取選中的文本/html

　　首先來談一下Selection對象和Range對象。

　　Selection是window.getSelection()方法返回的一個對象，用於表示用戶選中的文本區域。Selection對象表現為一組Range對象。而Range對象表示文檔的連續范圍區域，例如用戶在瀏覽器窗口中用鼠標拖動選中的區域。通常情況下，Selection對象只有一個Range對象，如下：

　　var selectionObj = window.getSelection();　

　　var rangeObj = selectionObj.getRangeAt(0);

　　selectionObj為Selection對象，rangeObj為Range對象。

 

　　來個例子:

　　var selectionObj = window.getSelection();

　　var selectedText = selectionObj.toString();

　　selectedText即為用戶選中區域的文本。

　　如果想獲取選中部分的html代碼，就需要用到Range對象的cloneContents方法，cloneContents方法把Range對象的內容復制到一個DocumentFragment對象。

　　　　var selectionObj = window.getSelection();

　　　　var rangeObj = selectionObj.getRangeAt(0);

　　　　var docFragment = rangeObj.cloneContents();

　　然后將docFragment渲染出來，獲取其innerHTML即可。

　　　　var testDiv = document.createElement("div");

　　　　testDiv.appendChild(docFragment);

　　　　var selectHtml = testDiv.innerHTML;

　　selectedHtml即為用戶選中區域的html代碼　

 

　　當然一如既往的，上述的吧啦吧啦對IE是不起作用的。IE自己玩自己的。。。

　　IE中，通過document.selection創建Selection對象，通過createRange方法創建Range對象，如下：

　　　　var selectionObj = document.selection;

　　　　var rangeObj = selectionObj.createRange();

　　range對象的text屬性即為用戶選中區域的文本，htmlText屬性即為用戶選中區域的html代碼。

　　　　var selectedText = rangeObj.text;

　　　　var selectedHtml = rangeObj.htmlText;

　　OK,上面說了這么一大推，來個具體的例子吧。

　　html代碼如下：

     

 　javascript代碼為:

　　　var testDiv = document.getElementById("testDiv");

　　　testDiv.onmouseup = function(){

　　　　　var selectionObj = null, rangeObj = null, selectedText = "", selectedHtml = "";

　　　　　if(window.getSelection){

　　　　　　　selectionObj = window.getSelection();

　　　　　　　selectedText = selectionObj.toString();

　　　　　　　rangeObj = selectionObj.getRangeAt(0);

　　　　　　　var docFragment = rangeObj.cloneContents();

　　　　　　   var tempDiv = document.createElement("div");

　　　　　　　tempDiv.appendChild(docFragment);

　　　　　　　selectedHtml = tempDiv.innerHTML;

　　　　　}else if(document.selection){

　　　　　　　selectionObj = document.selection;

　　　　　　　rangeObj = selectionObj.createRange();

　　　　　　　selectedText = rangeObj.text;

　　　　　　　selectedHtml = rangeObj.htmlText;

　　　　　}

　　　　　alert(selectedText);

　　　　　alert(selectedHtml);

　　　};

 　　

 　　webkit瀏覽器的運行結果如下：

　　　　

 　　IE瀏覽器的運行結果如下：