javascript Range對(duì)象跨瀏覽器常用操作第1/2頁
開發(fā)的功能主要涉及即時(shí)代碼著色（CodeColoring）和語法提示（CodeHints）功能，稍后會(huì)總結(jié)功能開發(fā)中問題或提供源碼。
以下是個(gè)人對(duì)Range對(duì)象的了解和常用操作的實(shí)例和總結(jié)：
Range對(duì)象
Range對(duì)象表示文檔的連續(xù)范圍區(qū)域，如用戶在瀏覽器窗口中用鼠標(biāo)拖動(dòng)選中的區(qū)域。
dom標(biāo)準(zhǔn)Range對(duì)象
http://www.w3school.com.cn/xmldom/dom_range.asp
在ie中使用TextRange對(duì)象
http://www.hbcms.com/main/dhtml/objects/obj_textrange.html
range對(duì)象常用的建立方法
在開發(fā)中除了上述文檔中的標(biāo)準(zhǔn)建立方法，大多如下方式建立
標(biāo)準(zhǔn)dom:
var range=window.getSelection().getRangeAt(0);
ie:
var range=document.selection.createRange();
注意：標(biāo)準(zhǔn)dom是從window中獲取selection對(duì)象，而ie是從document對(duì)象中獲取。
標(biāo)準(zhǔn)dom range對(duì)象(以下稱dom rang)和ie的TextRange對(duì)象(以下稱TextRange),在操作模式上有很大區(qū)別，可以說dom range是基于dom結(jié)構(gòu)控制的，TextRange是基于文本節(jié)點(diǎn)字節(jié)控制的，閱讀下面示例會(huì)更好理解這二者的操作模式。以下所說的range對(duì)象是指在html結(jié)構(gòu)中進(jìn)行選擇和更改（designMode=on contentEditable=true狀態(tài)下）操作，在textarea中的操作比這簡(jiǎn)單，不是當(dāng)前的研究環(huán)境。
range對(duì)象的具體方法和屬性請(qǐng)查看上邊列出的相關(guān)api文檔，下面對(duì)實(shí)際開發(fā)過程中常用功能講解
1.區(qū)域選擇 獲取區(qū)域中文本
TextRange的區(qū)域選擇
TextRange對(duì)象主要使用以下方法控制區(qū)域的選擇：moveStart moveEnd move
這三個(gè)函數(shù)使用相同的參數(shù)語法:fn(sUnit [, iCount])
第一個(gè)參數(shù)是指移動(dòng)的單位，可以使用的參數(shù)：character（字符）、word（詞）、sentence（段落）、textedit（整個(gè)編輯區(qū)）
第二個(gè)參數(shù)指移動(dòng)的數(shù)量單位，負(fù)數(shù)向所在位置之前移動(dòng)，正數(shù)向所在位置之后移動(dòng)。
在實(shí)際開發(fā)中一般使用character，其他幾個(gè)參數(shù)在中文環(huán)境和html編輯時(shí)，和預(yù)想位置有偏差。
例1：TextRange選擇光標(biāo)前4個(gè)字符
var rg=document.selection.createRange();
rg.moveStart("character",-4);
rg.select();//顯式選擇文本區(qū)域，不調(diào)用此函數(shù)也可以獲得選擇的內(nèi)容
var text=rg.text;//獲得選擇的文本
var htmlText=rg.htmlText;//獲得選擇文本的html代碼
用rg.htmlText獲得選擇文本的html代碼，但獲得結(jié)果不盡人意，
如:<b>aaaa</b>bb ,當(dāng)選擇aabb段時(shí)，.htmlTex返回的是<b>aa</b>bb而不是aa</b>bb
其他常用位置控制函數(shù)：
collapse： 合并前后選擇點(diǎn)，true為開始點(diǎn)，false為結(jié)尾點(diǎn)。
moveToPoint： 移動(dòng)光標(biāo)到坐標(biāo) moveToBookmark： 移動(dòng)到書簽。
dom range的區(qū)域選擇
dom range對(duì)象選擇區(qū)域主要以dom節(jié)點(diǎn)為為坐標(biāo)，所有邊界移動(dòng)和區(qū)域選擇函數(shù)都是以dom節(jié)點(diǎn)為參照的
setEnd()setStart()是控制范圍的前邊界點(diǎn)和后邊界點(diǎn)位置的函數(shù)，
有兩個(gè)參數(shù)，第一個(gè)參數(shù)是dom節(jié)點(diǎn)，第二個(gè)參數(shù)是偏移量，這個(gè)參數(shù)和TextRange.move中不同，是相對(duì)于dom節(jié)點(diǎn)的偏移量。
如：有文字節(jié)點(diǎn)node1 nodeValue是aaabbbccc,setStart(node1,3)則設(shè)置開始位置在字符a、b之間
那如何像例1一樣選擇光標(biāo)前4個(gè)字符呢，這需要了解dom range對(duì)象的幾個(gè)屬性：
endContainer 包含范圍的結(jié)束點(diǎn)的 dom節(jié)點(diǎn)。
endOffset endContainer 中的結(jié)束點(diǎn)位置。
startContainer 包含范圍的開始點(diǎn)的 dom節(jié)點(diǎn)。
startOffset startContainer 中的開始點(diǎn)位置。
例2：dom range選擇光標(biāo)前4個(gè)字符
var rg=window.getSelection().getRangeAt(0);
rg.setStart(rg.startContainer,rg.startOffset-4);//獲得當(dāng)前range strat所在節(jié)點(diǎn)和偏移量，計(jì)算后作為參數(shù)
//在調(diào)用setStart后即顯式選擇，與TextRange不同
var text=rg.toString();//獲得選擇文本
rg.collapse(false);//collapse函數(shù)與TextRange.collapse相同
例2中range選擇范圍操作適用于單一的文本內(nèi)容，如果是html內(nèi)容就需要進(jìn)一步計(jì)算才能正確得到，總的來看dom range在復(fù)雜dom結(jié) 構(gòu)中進(jìn)行相對(duì)范圍選擇是比較麻煩的。
另外，dom range沒有直接的方法獲得選擇內(nèi)容的html代碼。在html可編輯狀態(tài)下可以通過surroundContents()方法用一個(gè)span之類的標(biāo)簽包裹住內(nèi)容后再通過innerHTML獲得內(nèi)容，但是在選擇范圍邊界點(diǎn)在html開始和結(jié)束標(biāo)簽內(nèi)時(shí)（如：<a>123</a>邊界點(diǎn)在a標(biāo)簽內(nèi)）會(huì)拋出一個(gè)異常。
以下是測(cè)試用完整代碼，包含例1和例2的代碼和一個(gè)測(cè)試用html可編輯區(qū)。
<!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();//顯式選擇文本區(qū)域，不調(diào)用此函數(shù)也可以獲得選擇的內(nèi)容
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);//獲得當(dāng)前range strat所在節(jié)點(diǎn)和偏移量，計(jì)算后作為參數(shù)
//在調(diào)用setStart后即顯式選擇，與TextRange不同
var text=rg.toString();//獲得選擇文本
rg.collapse(false);//collapse函數(shù)與TextRange.collapse相同
alert(text);
}
}
}
//-->
</SCRIPT>
<div id="ifram_div"></div>
</BODY>
</HTML>
- JavaScript實(shí)戰(zhàn)(原生range和自定義特效)簡(jiǎn)單實(shí)例
- JavaScript中textRange對(duì)象使用方法小結(jié)
- JS Range HTML文檔/文字內(nèi)容選中、庫(kù)及應(yīng)用介紹
- js createRange與createTextRange的一些用法實(shí)例
- Prototype使用指南之range.js
- JS效率個(gè)人經(jīng)驗(yàn)談（8-15更新），加入range技巧
- Javascript標(biāo)準(zhǔn)DOM Range操作全集
- JavaScript使用Range調(diào)色及透明度實(shí)例
相關(guān)文章
JS實(shí)現(xiàn)圖片旋轉(zhuǎn)動(dòng)畫效果封裝與使用示例
這篇文章主要介紹了JS實(shí)現(xiàn)圖片旋轉(zhuǎn)動(dòng)畫效果封裝與使用,結(jié)合實(shí)例形式分析了JavaScript實(shí)現(xiàn)圖片元素旋轉(zhuǎn)的相關(guān)功能代碼的封裝與使用操作技巧,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了Bootstrap Table使用整理（三）的相關(guān)資料,需要的朋友可以參考下2017-06-06
javascript中閉包c(diǎn)losure的深入講解
這篇文章主要給大家介紹了關(guān)于javascript中閉包c(diǎn)losure的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
用javascript實(shí)現(xiàn)點(diǎn)擊鏈接彈出"圖片另存為"而不是直接打開
用javascript實(shí)現(xiàn)點(diǎn)擊鏈接彈出"圖片另存為"而不是直接打開...2007-08-08
echarts設(shè)置暫無數(shù)據(jù)方法實(shí)例及遇到的問題
Echarts是百度旗下的一款開源的商業(yè)級(jí)數(shù)據(jù)可視化產(chǎn)品,具有豐富的圖表類型,下面這篇文章主要給大家介紹了關(guān)于echarts設(shè)置暫無數(shù)據(jù)方法及遇到的問題的相關(guān)資料,需要的朋友可以參考下2022-12-12
js跨域和ajax 跨域問題的實(shí)現(xiàn)思路
大家都知道js是不能跨域的，但我們有時(shí)候就要這么用，怎么辦呢？辦法總是有的.2009-09-09
javascript和HTML5利用canvas構(gòu)建猜牌游戲?qū)崿F(xiàn)算法
讓我猜猜你心中的牌，先隨機(jī)生成27張牌，不能重復(fù)列出三列牌，然后記住其中一張，然后點(diǎn)擊牌所在的列，多次就可以猜出你想的牌，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈2013-07-07
基于openlayers4實(shí)現(xiàn)點(diǎn)的擴(kuò)散效果
這篇文章主要為大家詳細(xì)介紹了基于openlayers4實(shí)現(xiàn)點(diǎn)的擴(kuò)散效果 ，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
這篇文章主要介紹了js深拷貝與淺拷貝一文徹底搞懂,需要的朋友可以參考下2022-04-04
layui(1.0.9)文件上傳upload,前后端的實(shí)例代碼
今天小編就為大家分享一篇layui(1.0.9)文件上傳upload,前后端的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09