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与CSS写在同一个文件里的书写方法
Jun 02 Javascript
Ajax同步与异步传输的示例代码
Nov 21 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
Feb 24 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
Aug 05 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
JS与jQ读取xml文件的方法
Dec 08 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
vue图片上传组件使用详解
Dec 23 Javascript
canvas实现贪食蛇的实践
Feb 15 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
PHP4实际应用经验篇(9)
2006/10/09 PHP
php面向对象全攻略 (二) 实例化对象 使用对象成员
2009/09/30 PHP
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
vue+element实现表单校验功能
2019/05/20 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
keras topN显示,自编写代码案例
2020/07/03 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
Banana Republic英国官网:香蕉共和国,GAP集团旗下偏贵族风
2018/04/24 全球购物
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
本科生的职业生涯规划范文
2014/01/09 职场文书
签约仪式策划方案
2014/06/02 职场文书
信息与工商管理职业规划范文:为梦想而搏击
2014/09/11 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
党员评议自我评价
2015/03/03 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
Python提取PDF指定内容并生成新文件
2021/06/09 Python