快捷導(dǎo)航

JS實(shí)現(xiàn)選定指定HTML元素對(duì)象中指定文本內(nèi)容功能示例

更新時(shí)間：2017年02月13日 09:58:36 作者：風(fēng)起從容

這篇文章主要介紹了JS實(shí)現(xiàn)選定指定HTML元素對(duì)象中指定文本內(nèi)容功能,涉及javascript針對(duì)HTML頁面元素的運(yùn)算與選定相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)選定指定HTML元素對(duì)象中指定文本內(nèi)容功能。分享給大家供大家參考，具體如下：

該功能用處多多，可以靈活運(yùn)用之！主要函數(shù)如下：

//選中文本中指定部分
function selectSomeText(obj,start,end){
  if(document.selection){
  if(obj.tagName=='TEXTAREA'){
   var i=obj.value.indexOf("\r",0);
   while(i!=-1&&i<end){
   end--;
   if(i<start){
    start--;
   }
   i=obj.value.indexOf("\r",i+1);
   }
  }
  var range=obj.createTextRange();
  range.collapse(true);
  range.moveStart('character',start);
  if(end!=undefined){
   range.moveEnd('character',end-start);
  }
  range.select();
  }else{
  obj.selectionStart=start;
  var sel_end=end==undefined?start:end;
  obj.selectionEnd=Math.min(sel_end,obj.value.length);
  obj.focus();
  }
}

然后調(diào)用之，F(xiàn)or example：

selectSomeText(document.getElementById('jiu_textarea'),2,8)
//選中ID為jiu_textarea內(nèi)的第2至8個(gè)字！

完整示例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript" language="javascript" >
//選中文本中指定部分
function selectSomeText(obj,start,end){
  if(document.selection){
  if(obj.tagName=='TEXTAREA'){
   var i=obj.value.indexOf("\r",0);
   while(i!=-1&&i<end){
   end--;
   if(i<start){
    start--;
   }
   i=obj.value.indexOf("\r",i+1);
   }
  }
  var range=obj.createTextRange();
  range.collapse(true);
  range.moveStart('character',start);
  if(end!=undefined){
   range.moveEnd('character',end-start);
  }
  range.select();
  }else{
  obj.selectionStart=start;
  var sel_end=end==undefined?start:end;
  obj.selectionEnd=Math.min(sel_end,obj.value.length);
  obj.focus();
  }
}
</script>
</head>
<body>
<textarea name="jiu_textarea" rows="15" id="jiu_textarea">歡迎訪問腳本之家http://www.fzitv.net</textarea>
<script type="text/javascript" language="javascript" >
selectSomeText(document.getElementById('jiu_textarea'),2,8)//選中ID為jiu_textarea內(nèi)的第2至8個(gè)字！
</script>
</body>
</html>

運(yùn)行效果圖如下：