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 相关文章推荐
弹出广告特效代码(一个IP只弹出一次)
May 11 Javascript
node.js中的fs.writeSync方法使用说明
Dec 15 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 Javascript
基于JavaScript实现单例模式
Oct 30 Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
利用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
海贼王:最美的悬赏令!
2020/03/02 日漫
用PHP和ACCESS写聊天室(二)
2006/10/09 PHP
PHP中的array数组类型分析说明
2010/07/27 PHP
paypal即时到账php实现代码
2010/11/28 PHP
php学习之数据类型之间的转换代码
2011/05/29 PHP
探讨PHP函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
php使用GeoIP库实例
2014/06/27 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
JavaScript类库D
2010/10/24 Javascript
读jQuery之五(取DOM元素)
2011/06/20 Javascript
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
2013/06/24 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
详解JS面向对象编程
2016/01/24 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
详解vue表单验证组件 v-verify-plugin
2017/04/19 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
微信小程序云开发使用方法新手初体验
2019/05/16 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
销售经理竞聘书
2014/03/31 职场文书
学校教师读书活动总结
2014/07/08 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
2014年护士长工作总结
2014/11/11 职场文书
公司员工奖惩制度
2015/08/04 职场文书