比较深入的认识一下textrange

textrange是一个很有用的玩意，今天仔细研究了一下，弄了几个典型的例子，估计都是有可能被用到的情形。

直接拷贝下面的代码到一个html文件就可以运行测试。写的比较粗。

参考了1篇比较好的文章：http://blog.sina.com.cn/s/blog_4b8d35b70100a047.html~type=v5_one&label=rela_nextarticle

document.body.createTextRange().text得到当前页面的纯文本。<br>
document.body.createTextRange().htmlText得到当前页面的html文本。<br>
<script>
 document.body.onload = function(){
  //alert(document.body.createTextRange().text);
  //alert(document.body.createTextRange().htmlText);
 };
</script>
<hr>
rnga.inRange(rngb) 将测试rngb是否在rnga中<br>
<input id="inp1" type="text" value="1234567890">
<input id="inp2" type="text" value="9876543210">
<input type="button" onclick="test()" value="看看你当前选择的内容是否是第一个输入框中"><br><br>
<script language="javascript">
 function test(){
  var o=document.getElementById("inp1")
  var r = document.selection.createRange();
  alert(r.text);
  if(o.createTextRange().inRange(r))
  alert(r.text);
 }
</script>
<br>
<hr>
页面文本倒序查找<br>
<input value="倒序查找a" onclick=myfindtext("a") type="button" />
<script language='javascript'>
 var rng = document.body.createTextRange();
 function myfindtext(text){
  rng.collapse(false);
  if(rng.findText(text,-1,1)){
   rng.select();
   rng.collapse(true);
  }
  else{
   alert("end");
  }
 }
</script>
<hr>
<br>
得到文本框内光标位置<br>
<script language="javascript">
function getPos(obj){
obj.focus();
var s=document.selection.createRange();
s.setEndPoint("StartToStart",obj.createTextRange())
alert(s.text.length);
}
</script>
<input type="text" id="txt1" value="1234567890">
<input type="button" value="得到光标位置" onclick=getPos(txt1)>
<hr>
控制input框内光标位置<br>
<script language="javascript">
 function setPos(num){
  var e =document.getElementById("text1");
  var r =e.createTextRange();
  r.moveStart('character',num);
  r.collapse(true);
  r.select();
 }
</script>
<input type="text" id="text1" value="1234567890">
<select onchange="setPos(this.selectedIndex)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<hr>
选中文本框中的一段文字<br>
<script language=javascript>
 function sel(id,num){
  var obj = document.getElementById(id);
  var rng=obj.createTextRange();
  var sel = rng.duplicate();
  sel.moveStart("character", num);
  sel.setEndPoint("EndToStart", rng);
  sel.select();
 }
</script>
<input type="text" id="text11" value="1234567890">
<select onchange="sel('text11',this.value)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<hr>
控制文本框内光标的移动<br>
<input type="button" value="<-" onclick=go(-1)>
<input id="word" value="这里是文字1234567890">
<input type="button" value="->" onclick=go(1)>
<script language="javascript">
 function go(n){
  word.focus();
  with(document.selection.createRange()){
   moveStart("character",n);
   collapse();
   select();
  }
 }
 go(6);
</script>
<hr>
document.selection.createRange().text得到被选择的文本的内容<br>
<textarea cols=50 rows=15>
 hello,dfdsfsf;ajthisf ;aslfjds;alfjas;flkdsjf;slfjd 1
 hello,dfdsfsf;ajthisf ;aslfjds;alfjas;flkdsjf;slfjd 2
</textarea>
<div>hello,dfdsfsf;ajthisf ;aslfjds;alfjas;flkdsjf;slfjd 3<div>
<input type=button value='Get the selected words' onclick=alert(document.selection.createRange().text)>
<hr>
还可以把代码写的更通用一点<br>
<script>
 function getSel(){
    var t=window.getSelection?window.getSelection():(
     document.getSelection?document.getSelection():(
      document.selection?document.selection.createRange().text:""))
    document.getElementById('selectedtext').value = t;
 }
 document.onmouseup = getSel;
</script>
<textarea id="selectedtext" name="selectedtext" rows="5" cols="50"></textarea>
<hr>
下面的代码将演示如何选择一部分文本<br>
<SCRIPT   LANGUAGE="JavaScript">  
   function   test2(){
   var   t=document.getElementById("test1");
   var   o=t.createTextRange();
   alert(o.text);
   o.moveStart("character",2); 
   alert(o.text);
   o.select();
  } 
</SCRIPT>
<input type='text' id='test1' name='test1' value="1234567890">
<input type="button" onclick='test2()' value='Click Me' name='test3'>
<br>
please try to select some text in this page, you will see <a href="">this is a test link</a> that
the text content will be copyed into the textarea without html tag.
document.selection.createRange().text??document.selection.createRange().htmlText
<hr>
下面代码演示如何在光标位置插入字符<br>
<script language="javascript" type="text/javascript">
 function insertText(text){
  document.getElementById("demo2").focus();
  document.selection.createRange().text+=text;
  document.getElementById("demo2").blur();
 }
</script>
<input id="demo2" type="text" value="123456789">
<input type="button" onclick="insertText('111111')" value="在左边的输入框插入字符">
<hr>
下面的代码演示把光标移动到末尾<br>
<input type="text" id="tt" value="12345678901234567890" />
<input type="button" value="光标移动到末尾" onclick="moveCursorToEnd('tt')" />
<script>
 function moveCursorToEnd(obj){
  var o = document.getElementById(obj);
  if(o==null){
     o=event.srcElement;
  }
  var rtextRange =o.createTextRange();
  rtextRange.moveStart('character',o.value.length);
  rtextRange.collapse(true);
  rtextRange.select();
 }
 //moveCursorToEnd("tt");
</script>

http://blog.chinaunix.net/u/14250/showart_102441.html

http://blog.sina.com.cn/s/blog_4b8d35b70100a047.html~type=v5_one&label=rela_nextarticle