JS实现选定指定HTML元素对象中指定文本内容功能示例


Posted in Javascript onFebruary 13, 2017

本文实例讲述了JS实现选定指定HTML元素对象中指定文本内容功能。分享给大家供大家参考,具体如下:

该功能用处多多,可以灵活运用之!主要函数如下:

//选中文本中指定部分
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();
  }
}

然后调用之,For example:

selectSomeText(document.getElementById('jiu_textarea'),2,8)
//选中ID为jiu_textarea内的第2至8个字!

完整示例如下:

<!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">欢迎访问三水点靠木https://3water.com</textarea>
<script type="text/javascript" language="javascript" >
selectSomeText(document.getElementById('jiu_textarea'),2,8)//选中ID为jiu_textarea内的第2至8个字!
</script>
</body>
</html>

运行效果图如下:

JS实现选定指定HTML元素对象中指定文本内容功能示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js parsefloat parseint 转换函数
Jan 21 Javascript
jsTree 基于JQuery的排序节点 Bug
Jul 26 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
jquery幻灯片插件bxslider样式改进实例
Oct 15 Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
vue.js实现简单轮播图效果
Oct 10 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 Javascript
在vue中使用公共过滤器filter的方法
Jun 26 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 Javascript
JS面向对象实现飞机大战
Aug 26 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 #Javascript
详谈js中window.location.search的用法和作用
Feb 13 #Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 #Javascript
js获取当前页的URL与window.location.href简单方法
Feb 13 #Javascript
js实现九宫格拼图小游戏
Feb 13 #Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 #Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 #Javascript
You might like
3种php生成唯一id的方法
2015/11/23 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
在php的yii2框架中整合hbase库的方法
2018/09/20 PHP
来自qq的javascript面试题
2010/07/24 Javascript
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
jQuery中toggle()函数的使用实例
2015/04/17 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
2018/09/30 Javascript
VUE实现移动端列表筛选功能
2019/08/23 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
Python3实现生成随机密码的方法
2014/08/23 Python
Python生成随机验证码的两种方法
2015/12/22 Python
python 排序算法总结及实例详解
2016/09/28 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
python如何生成各种随机分布图
2018/08/27 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
基于Python打造账号共享浏览器功能
2019/05/30 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
IRO美国官网:法国服装品牌
2018/03/06 全球购物
当当网软件测试笔试题
2015/11/24 面试题
单位门卫岗位职责
2013/12/20 职场文书
美德好少年事迹材料
2014/01/19 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
党日活动总结
2014/05/07 职场文书
置业顾问岗位职责
2015/02/09 职场文书
商业计划书格式、范文
2019/03/21 职场文书
Vue.Draggable实现交换位置
2022/04/07 Vue.js