javascript Range对象跨浏览器常用操作(下)

最新推荐文章于 2022-02-21 17:17:16 发布

kjah_1

最新推荐文章于 2022-02-21 17:17:16 发布

阅读量116

点赞数

分类专栏： javascript 文章标签：浏览器 JavaScript IE F# HTML ViewUI

javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

上一篇（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();//清除range
selection.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.οnlοad=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){//ie
					e.returnValue=false;//取消浏览器默认动作 ie
					var 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();//清除range
					selection.addRange(rg);//设置range
				}
			}
		}
	}
  //-->
  </SCRIPT>
  <div id="ifram_div"></div>
 </BODY>
</HTML>

3.替换
综合介绍的选择和插入的方法可完成替换功能，TextRange比较简单pasteHTML方法会替换原来Range选中的文本，Dom Range的insertNode不会删除原range选中内容，需要调用deleteContents()方法先删除选择内容。

以上介绍了使用Range对象常用的区域选择、插入文本和替换操作，希望在大家开发在线编辑器时有所帮助，粗略之处还请见谅。

kjah_1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript Range对象跨浏览器常用操作(下)

上一篇（http://kjah.iteye.com/blog/420624）介绍了Range对象：ie用的TextRange对象和标准Dom Range对象，并分别介绍使用这两个对象如何进行区域选择，这篇将介绍使用Range对象进行常用的插入文本和替换操作。 2.插入文本 TextRange插入文本使用TextRang插入文本比较简单，直接调用pasteHTML(...
复制链接

扫一扫

专栏目录