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 小贴士一星期合集
Apr 07 Javascript
JavaScript 获取当前时间戳的代码
Aug 05 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
jquery的ajax简单结构示例代码
Feb 17 Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 Javascript
ionic实现底部分享功能
May 11 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
vue 简单自动补全的输入框的示例
Mar 12 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
Mar 15 Javascript
webpack项目使用eslint建立代码规范实现
May 16 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 Javascript
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 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实现文件上传二法
2006/10/09 PHP
php项目打包方法
2008/02/18 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
php+mysql数据库查询实例
2015/01/21 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
分析Node.js connect ECONNREFUSED错误
2013/04/09 Javascript
jquery事件preventDefault()方法用法实例
2015/01/16 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
Python虚拟环境项目实例
2017/11/20 Python
numpy返回array中元素的index方法
2018/06/27 Python
Python实现网站表单提交和模板
2019/01/15 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
Python devel安装失败问题解决方案
2020/06/09 Python
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
欧铁通票官方在线销售网站:Eurail.com
2017/10/14 全球购物
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
高三历史教学反思
2014/01/09 职场文书
创先争优承诺书范文
2014/03/31 职场文书
治超工作实施方案
2014/05/04 职场文书
经理任命书模板
2014/06/06 职场文书
学校计划生育责任书
2015/05/09 职场文书
安全学习心得体会范文
2016/01/18 职场文书
使用Pytorch训练two-head网络的操作
2021/05/28 Python