拿input框來舉例子：平時我們操作input或者textArea需要用到該技術情況下一般有兩處：
一：點擊一個按鈕在input框中特定位置插入一段文本；
二：選中一段文本進行操作
實現兩個效果時候ie以及非ie實現方式不同。具體看看各自是如何實現的：
非ie下實現第一個效果一般都會用到三個步驟
1、獲取選區起始座標偏移量：
非ie下可以應用ele.selectionStart以及ele.selectionEnd來獲取選區起始點，結果會返回一個整數。如果起始點值相等，說明未選擇任何內容，不過此時的鼠標位置卻是這個值，也就是ele文本中的偏移量。
得到偏移量我們就可以用substring或者slice獲取選區內容了。
代碼如下：
var el=document.getElementById('myInput');
var rangeData = {start: 0, end: 0, text: "" };
function _select(el){
rangeData.start= el.selectionStart;
rangeData.end = el.selectionEnd;
rangeData.text = (rangeData.start != rangeData.end) ? el.value.substring(rangeData.start, rangeData.end): "";
return rangeData;
}
2、插入一段文字：
實現很簡單，因爲我們第一步已經得到了可以進行操作的所有數據：只需簡單的計算重組文本即可：直接上代碼：
function insertText(el,sInsertText,rangeText){//input元素,要插入文字,rangeData數據
var text = el.value,
start = rangeText.start,
end = start + sInsertText.length;
el.value = text.slice(0, start) + sInsertText + text.slice(rangeText.end, text.length);
}
3、重設光標位置
插入後如果不進行後續操作光標會自動移到文本最後也就是默認執行focus，而我們通常情況都是需要光標在插入文本的後面而不是整個文本的後面，所以插入之後我們還需要重設光標位置：
重設光標位置在非ie下也是很簡單的，只需要調用一個方法即可：setSelectionRange(nstart,nstart)這裏爲什麼會是相同的兩個數值？
因爲我們想要的只是將光標放置新插入的文本之後，這個方法可以返回一個選區，也就是這兩個參數所定義的選區，如果我們將兩個參數設置值相同，那麼這個選區就是一個點，跟1中得到選區類似。
這裏的參數是想插入後的文字加上之前rangeData的start的值。
function setSelect(el,nstart){
el.setSelectionRange(nstart,nstart);}
而要想實現第二個效果只需要用到第三步驟即可：也就是說將setSelectionRange方法中參數設置爲不同的兩個整數值，包含的部分就是選區了
例如：我點擊按鈕，文本框內出現文字，並且將光標選中一段文本供用戶在此基礎操作，並且用來提醒用戶：
對於ie實現兩種效果，
createTextRange是針對特定dom進行操作 例如input textArea或者body。對於ie實現範圍選區以及光標定位來說主要不是在意光標位置，而是當前選區位置。畢竟我們想實現的效果是定點插入，而不是單單獲得光標位置。
首先應用inputFile創建一個範圍對象var range=inputFile.createTextRange();這個實例有一些屬性方法我們可以應用：
moveStart(a,b)：這裏的a在文本中一般都是"character"表示字符串，還可以是word(逐個單詞)、sentence(逐個句子)、textedit。textedit 值將插入點移動到整個文本範圍的開始或結束處。
如果指定爲前三種單位，忽略第二個參數默認值爲1,也可以指定一個整數值來指示單元數，正數代表向後移動，負數代表向前移動（左後右前）。
用代碼來示例就是range.moveStart('character',2);表示輸入框內選區範圍開始點爲從開始向後移2個字符串
moveEnd(a,b)：與moveStart應用方式大體相同。它表示從結束位置向前移動個數(因爲是向前移動 所以一般b都是負數);
collapse(boole):表示文本範圍從當前尺寸重疊成字符間的單個插入點。collapse()方法的可選參數是Boolean值,它指出範圍是在當前範圍的開始點重合，還是結束點重合。
默認值爲true，在開始點重合;解釋一下就是我們應用move選擇選區後collapse將選區摺疊爲假設是一個字符串，如果裏面參數是true或者默認則表示光標在假設這個字符串的前面，否則就在假設的字符串後面。
select：表示將用move設置的選區進行選擇。
compareEndPoints：方法：比較兩個選區邊界位置。用法：range1.compareEndPoints(a,range2);其中a可以是StartToStart、StartToEnd、EndToStart、EndToEnd。如果兩個邊界相同返回0，第一個位於第二個範圍前面返回-1，否則返回1；
另外還有一個屬性text：這個屬性可以爲我們給選區內的內容進行賦值或者得到當前選中值。
上述方式可以有助於我們對光標以及選區進行編輯控制，但是還不能直接獲取到光標位置（只能根據move去編輯）；
所以在dom層面還有另外一個屬性selection，這個屬性有一個屬性方法叫做createRange也就是document.selection.createRange();這個方法可以根據當前文字選擇或者光標位置來返回textRange對象.而這個對象就是我們當前光標位置或者選區對象.
這個方法也有一些屬性及方法：text屬性：同createTextRange.text屬性一樣。所不同的是不用move等方式也可以設置選區內容
htmlText屬性：跟text類似不過如果選區包含html標籤也會被返回;
collapse方法：同上述一樣；
如此一來我們就可以完成第一個需求（在光標或選區處插入文字）
var range=document.selection.createRange();
range.text='yuchao';
當然如果你不想替代選區而只是想在選區後面加文字可以這樣做：
range.text=range.text+"yuchao";
或者利用先複製選區再填充文字再恢復選區來實現（網上資料）
var oS=document.selection.createRange();
inputFile.selectRange=document.selection.createRange().duplicate();
inputFile.selectRange.text="77";
inputFile.selectRange.select();
講了這麼多ie的東西實際這兩句代碼就可以完成對ie的第一個需求。當然你也可以根據上述進行擴展想象新需求。
第二個需求：
對於第二個需求來說我們就要用到createTextRange了，同樣舉個上述的非ie中例子：
實現方式如下：
var sel = inputFile.createTextRange();
sel.moveStart('character', 1);
sel.moveEnd('character',-1);
sel.select();
當然看起來ie下實現起來很簡單，不過非ie的實現才更加易懂一些。
總結ie下：
selection的createRange方法大多數情況下應用於我們不知道到底用戶把光標放到哪，或者選擇選區在哪部分，用這個方法後就可以獲得這些信息了。
ele.createTextRange()方法常常應用到我們已經知道了用戶選擇選區，或者需求要求開發者可以控制選區內容或者光標內容。比較繞，解釋不清了。。。
換句話來說就是前者可以得到未知的客戶操作的光標以及選區內容。後者可以由開發者自定義編輯用戶光標以及選區，並且加以控制。
補充：這裏說到的ie下兩種方法不是一個層面的，一個是全局的一個是細化的。兩者都還有更多的屬性以及方法，由於篇幅過長在此未一一枚舉，等遇到可以再一一分析！
如果上述有什麼問題還請大家不吝賜教！謝謝