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解析XML字符串和XML文件的方法说明
Feb 21 Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 Javascript
js中各种类型的变量在if条件中是true还是false
Jul 16 Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
JS如何设置iOS中微信浏览器的title
Nov 22 Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 Javascript
Vue 动态设置路由参数的案例分析
Apr 24 Javascript
vue实现搜索过滤效果
May 28 Javascript
Vue+Element实现网页版个人简历系统(推荐)
Dec 31 Javascript
JS使用正则表达式实现常用的表单验证功能分析
Apr 30 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 HandlerSocket的使用
2011/05/02 PHP
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
php实现向javascript传递数组的方法
2015/07/27 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
JavaScript类和继承 constructor属性
2010/03/04 Javascript
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
js返回顶部实例分享
2016/12/21 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
webpack的pitching loader详解
2019/09/23 Javascript
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
Python实现Linux下守护进程的编写方法
2014/08/22 Python
python实现静态服务器
2019/09/05 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
牵手50台湾:专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
古汉语文学求职信范文
2014/03/16 职场文书
早会主持词
2014/03/17 职场文书
住房抵押登记委托书
2014/09/27 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
被委托人身份证明
2015/08/07 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
DE1103使用报告
2022/04/05 无线电
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang