首頁 > 開發者 > JavaScript
開發的功能主要涉及即時代碼著色（CodeColoring）和文法提示（CodeHints）功能，稍後會總結功能開發中問題或提供源碼。
以下是個人對Range對象的瞭解和常用操作的執行個體和總結：
Range對象
Range對象表示文檔的連續範圍地區，如使用者在瀏覽器視窗中用滑鼠拖動選中的地區。
dom標準Range對象
http://www.w3school.com.cn/xmldom/dom_range.asp
在ie中使用TextRange對象
http://www.hbcms.com/main/dhtml/objects/obj_textrange.html
range對象常用的建立方法
在開發中除了上述文檔中的標準建立方法，大多如下方式建立
標準dom:
var range=window.getSelection().getRangeAt(0);
ie:
var range=document.selection.createRange();
注意：標準dom是從window中擷取selection對象，而ie是從document對象中擷取。
標準dom range對象(以下稱dom rang)和ie的TextRange對象(以下稱TextRange),在操作模式上有很大區別，可以說dom range是基於dom結構控制的，TextRange是基於文本節點位元組控制的，閱讀下面樣本會更好理解這二者的操作模式。以下所說的range對象是指在html結構中進行選擇和更改（designMode=on contentEditable=true狀態下）操作，在textarea中的操作比這簡單，不是當前的研究環境。
range對象的具體方法和屬性請查看上邊列出的相關api文檔，下面對實際開發過程中常用功能講解
1.地區選取項目 擷取地區中文本
TextRange的地區選取項目
TextRange對象主要使用以下方法控制地區的選擇：moveStart moveEnd move
這三個函數使用相同的參數文法:fn(sUnit [, iCount])
第一個參數是指移動的單位，可以使用的參數：character（字元）、word（詞）、sentence（段落）、textedit（整個編輯區）
第二個參數指移動的數量單位，負數向所在位置之前移動，正數向所在位置之後移動。
在實際開發中一般使用character，其他幾個參數在中文環境和html編輯時，和預想位置有偏差。
例1：TextRange選擇游標前4個字元
用rg.htmlText獲得選擇文本的html代碼，但獲得結果不盡人意，
如:<b>aaaa</b>bb ,當選擇aabb段時，.htmlTex返回的是<b>aa</b>bb而不是aa</b>bb
其他常用位置控制函數：
collapse： 合并前後選擇點，true為開始點，false為結尾點。
moveToPoint： 移動游標到座標 moveToBookmark： 移動到書籤。
dom range的地區選取項目
dom range對象選擇地區主要以dom節點為為座標，所有邊界移動和地區選取項目函數都是以dom節點為參照的
setEnd()setStart()是控制範圍的前邊界點和後邊界點位置的函數，
有兩個參數，第一個參數是dom節點，第二個參數是位移量，這個參數和TextRange.move中不同，是相對於dom節點的位移量。
如：有文位元組點node1 nodeValue是aaabbbccc,setStart(node1,3)則設定開始位置在字元a、b之間
那如何像例1一樣選擇游標前4個字元呢，這需要瞭解dom range對象的幾個屬性：
endContainer 包含範圍的結束點的 dom節點。
endOffset endContainer 中的結束點位置。
startContainer 包含範圍的開始點的 dom節點。
startOffset startContainer 中的開始點位置。
例2：dom range選擇游標前4個字元 複製代碼 代碼如下:var rg=window.getSelection().getRangeAt(0);
rg.setStart(rg.startContainer,rg.startOffset-4);//獲得當前range strat所在節點和位移量，計算後作為參數
//在調用setStart後即明確選取，與TextRange不同
var text=rg.toString();//獲得選擇文本
rg.collapse(false);//collapse函數與TextRange.collapse相同
例2中range選擇範圍操作適用於單一的常值內容，如果是html內容就需要進一步計算才能正確得到，總的來看dom range在複雜dom結 構中進行相對範圍選取是比較麻煩的。
另外，dom range沒有直接的方法獲得選擇內容的html代碼。在html可編輯狀態下可以通過surroundContents()方法用一個span之類的標籤包裹住內容後再通過innerHTML獲得內容，但是在選擇範圍邊界點在html開始和結束標籤內時（如：<a>123</a>邊界點在a標籤內）會拋出一個異常。
以下是測試用完整代碼，包含例1和例2的代碼和一個測試用html可編輯區。 複製代碼 代碼如下:<!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;}</style><body><b>aaaa</b><u>bbbb</u>cccddd</body></html>');
f.close();
if(f.attachEvent){
f.attachEvent("onkeyup",fun1);
}else{
fw.addEventListener("keyup",fun1,true);
}
function fun1(){
if(f.selection){
var rg=f.selection.createRange();
rg.moveStart("character",-4);
//rg.select();//明確選取文本地區，不調用此函數也可以獲得選擇的內容
var text=rg.text;//獲得選擇的文本
var htmlText=rg.htmlText;//獲得選擇文本的html代碼
alert(text);
}else{
var rg=fw.getSelection().getRangeAt(0);
rg.setStart(rg.startContainer,rg.startOffset-4);//獲得當前range strat所在節點和位移量，計算後作為參數
//在調用setStart後即明確選取，與TextRange不同
var text=rg.toString();//獲得選擇文本
rg.collapse(false);//collapse函數與TextRange.collapse相同
alert(text);
}
}
}
//-->
</SCRIPT>
<div id="ifram_div"></div>
</BODY>
</HTML>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
