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 相关文章推荐
JQUERY操作JSON实例代码
Feb 09 Javascript
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
js获取浏览器基本信息大全
Nov 27 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
微信小程序组件 marquee实例详解
Jun 23 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
Js视频播放器插件Video.js使用方法详解
Feb 04 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
隐性调用php程序的方法
2009/03/09 PHP
php写的简易聊天室代码
2011/06/04 PHP
微信公众平台接口开发入门示例
2014/12/24 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
给Function做的OOP扩展
2009/05/07 Javascript
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
ionic开发中点击input时键盘自动弹出
2016/12/23 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
vue给对象动态添加属性和值的实例
2019/09/09 Javascript
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
Python解惑之True和False详解
2017/04/24 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
CSS3的resize属性使用初探
2015/09/27 HTML / CSS
联想澳大利亚官网:Lenovo Australia
2018/01/18 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
什么是方法的重载
2013/06/24 面试题
函授毕业自我鉴定
2013/12/19 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
2014年党小组工作总结
2014/12/20 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
关于React Native 无法链接模拟器的问题
2021/06/21 Javascript
小程序与后端Java接口交互实现HelloWorld入门
2021/07/09 Java/Android
基于Python实现流星雨效果的绘制
2022/03/18 Python