javascript获取选中的文本/html

　　首先来谈一下Selection对象和Range对象。BBf无知

　　Selection是window.getSelection()方法返回的一个对象，用于表示用户选中的文本区域。Selection对象表现为一组Range对象。而Range对象表示文档的连续范围区域，例如用户在浏览器窗口中用鼠标拖动选中的区域。通常情况下，Selection对象只有一个Range对象，如下：BBf无知

　　var selectionObj = window.getSelection();　BBf无知

　　var rangeObj = selectionObj.getRangeAt(0);BBf无知

　　selectionObj为Selection对象，rangeObj为Range对象。BBf无知

　　来个例子:BBf无知

　　var selectionObj = window.getSelection();BBf无知

　　var selectedText = selectionObj.toString();BBf无知

　　selectedText即为用户选中区域的文本。BBf无知

　　如果想获取选中部分的html代码，就需要用到Range对象的cloneContents方法，cloneContents方法把Range对象的内容复制到一个DocumentFragment对象。BBf无知

　　　　var selectionObj = window.getSelection();BBf无知

　　　　var rangeObj = selectionObj.getRangeAt(0);BBf无知

　　　　var docFragment = rangeObj.cloneContents();BBf无知

　　然后将docFragment渲染出来，获取其innerHTML即可。BBf无知

　　　　var testDiv = document.createElement("div");BBf无知

　　　　testDiv.appendChild(docFragment);BBf无知

　　　　var selectHtml = testDiv.innerHTML;BBf无知

　　selectedHtml即为用户选中区域的html代码　BBf无知

　　当然一如既往的，上述的吧啦吧啦对IE是不起作用的。IE自己玩自己的。。。BBf无知

　　IE中，通过document.selection创建Selection对象，通过createRange方法创建Range对象，如下：BBf无知

　　　　var selectionObj = document.selection;BBf无知

　　　　var rangeObj = selectionObj.createRange();BBf无知

　　range对象的text属性即为用户选中区域的文本，htmlText属性即为用户选中区域的html代码。BBf无知

　　　　var selectedText = rangeObj.text;BBf无知

　　　　var selectedHtml = rangeObj.htmlText;BBf无知

　　OK,上面说了这么一大推，来个具体的例子吧。BBf无知

　　html代码如下：BBf无知

     BBf无知

 　javascript代码为:BBf无知

　　　var testDiv = document.getElementById("testDiv");BBf无知

　　　testDiv.onmouseup = function(){BBf无知

　　　　　var selectionObj = null, rangeObj = null, selectedText = "", selectedHtml = "";BBf无知

　　　　　if(window.getSelection){BBf无知

　　　　　　　selectionObj = window.getSelection();BBf无知

　　　　　　　selectedText = selectionObj.toString();BBf无知

　　　　　　　rangeObj = selectionObj.getRangeAt(0);BBf无知

　　　　　　　var docFragment = rangeObj.cloneContents();BBf无知

　　　　　　   var tempDiv = document.createElement("div");BBf无知

　　　　　　　tempDiv.appendChild(docFragment);BBf无知

　　　　　　　selectedHtml = tempDiv.innerHTML;BBf无知

　　　　　}else if(document.selection){BBf无知

　　　　　　　selectionObj = document.selection;BBf无知

　　　　　　　rangeObj = selectionObj.createRange();BBf无知

　　　　　　　selectedText = rangeObj.text;BBf无知

　　　　　　　selectedHtml = rangeObj.htmlText;BBf无知

　　　　　}BBf无知

　　　　　alert(selectedText);BBf无知

　　　　　alert(selectedHtml);BBf无知

　　　};BBf无知

BBf无知

本文为转载文章，版权归原作者所有，不代表本站立场和观点。

很赞哦！ () 赏 有话说 ()