javascript Range对象跨浏览器常用操作(下)
上一篇（http://kjah.iteye.com/blog/420624）介绍了Range对象：ie用的TextRange对象和标准Dom Range对象，并分别介绍使用这两个对象如何进行区域选择，这篇将介绍使用Range对象进行常用的插入文本和替换操作。2.插入文本
TextRange插入文本
使用TextRang插入文本比较简单，直接调用pasteHTML()方法就可以直接插入html代码。
Dom Range插入文本
使用Dom Range插入文本相对复杂一些，Dom Range对象使用insertNode()方法实现插入，但是insertNode是在Range的开始位置插入一 个节点，参数是一个节点而不是字符串，我们可以通过插入文本节点实现，如果使用document.createTextNode建立文本节点，文本中的HTML标记会自动转换，但空格是个特例，并不会自动转换为 ,这使我在开发代码缩进时很头疼，最后解决的办法，是使用Rang.createContextualFragment,这个方法虽然在文档中没有找到，但测试多个浏览器都支持此方法,此方法返回的是一个DocumentFragment对
象。以下是示例代码：
例3：
var rg = window.getSelection().getRangeAt(0); var fragment = rg.createContextualFragment(str); rg.insertNode(fragment); 这段代码虽然实现插入了文本，但是光标位置却在插入文本之前，因为“insertNode是在Range的开始位置插入一 个节点”，接下来我们实现光标的控制，这需要设置Range对象的位置，并更新Selection对象的Range，代码如下：
例4：
var selection=window.getSelection();var rg=selection.getRangeAt(0);var fragment = rg.createContextualFragment(str);var oLastNode = fragment.lastChild; //获得DocumentFragment的末尾位置rg.insertNode(fragment);rg.setEndAfter(oLastNode);//设置末尾位置rg.collapse(false);//合并范围至末尾selection.removeAllRanges();//清除rangeselection.addRange(rg);//设置range 以下是一个代码缩进功能的部分代码作为示例：按tab键时会在当前位置，插入4个空格，解决在编辑时不能输入tab的问题。实际应用中的功能包括多行缩进和自动缩进。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD><TITLE> New Document </TITLE> </HEAD> <BODY><SCRIPT LANGUAGE="JavaScript"><!--window.onload=function(){var iframeContent="";var divContent="";var divChange=false;var iframeChange=false;var $=function(s){return document.getElementById(s);}$("ifram_div").innerHTML+='<div id="infoIframe">iframe</div><iframe id="youretextarea" style="height:200px;width:99%;" class="_editbox"></iframe>';var fw=$("youretextarea").contentWindow;var f=fw.document;f.designMode = 'On';f.contentEditable = true; f.open(); f.writeln('<html><style>p{margin:0px;padding:0px;}body{margin:0px;padding:0px;font:16/18px Arial;}</html>'); f.close();if(f.attachEvent){f.attachEvent("onkeydown",fun1);}else{fw.addEventListener("keydown",fun1,true);}function fun1(e){e=e||window.event;var code=e.charCode||e.keyCode;var strTab="&nbsp;&nbsp;&nbsp;&nbsp;";if(code==9){//tab键if(f.selection){//iee.returnValue=false;//取消浏览器默认动作 ievar rg=f.selection.createRange();rg.pasteHTML(strTab);}else{e.preventDefault();//取消浏览器默认动作var selection=fw.getSelection();var rg=selection.getRangeAt(0);var fragment = rg.createContextualFragment(strTab);var oLastNode = fragment.lastChild; //获得DocumentFragment的末尾位置rg.insertNode(fragment);rg.setEndAfter(oLastNode);//设置末尾位置rg.collapse(false);//合并范围至末尾selection.removeAllRanges();//清除rangeselection.addRange(rg);//设置range}}}}//--></SCRIPT><div id="ifram_div"></div> </BODY></HTML>
3.替换
综合介绍的选择和插入的方法可完成替换功能，TextRange比较简单pasteHTML方法会替换原来Range选中的文本，Dom Range的insertNode不会删除原range选中内容，需要调用deleteContents()方法先删除选择内容。
以上介绍了使用Range对象常用的区域选择、插入文本和替换操作，希望在大家开发在线编辑器时有所帮助，粗略之处还请见谅。
页:
[1]