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 相关文章推荐
载入进度条 效果
Jul 08 Javascript
javascript parseInt 函数分析(转)
Mar 21 Javascript
Cookie 小记
Apr 01 Javascript
JavaScript中的异常捕捉介绍
Dec 31 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 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
全国FM电台频率大全 - 23 四川省
2020/03/11 无线电
用函数读出数据表内容放入二维数组
2006/10/09 PHP
计算一段日期内的周末天数的php代码(星期六,星期日总和)
2009/11/12 PHP
PHP的PSR规范中文版
2013/09/28 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
Js可拖拽放大的层拖动特效实现方法
2015/02/25 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
Python的设计模式编程入门指南
2015/04/02 Python
Python实现句子翻译功能
2017/11/14 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
Flask配置Cors跨域的实现
2019/07/12 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
python中的垃圾回收(GC)机制
2020/09/21 Python
英国网上花店:Bunches
2016/11/29 全球购物
澳大利亚汽车零部件、音响及配件超市:Automotive Superstore
2018/06/19 全球购物
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
妇女儿童发展规划实施方案
2014/03/16 职场文书
义和团口号
2014/06/17 职场文书
小爸爸观后感
2015/06/15 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python