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操作Cookies的实现代码
Oct 09 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 Javascript
你不知道的高性能JAVASCRIPT
Jan 18 Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
React Native基础入门之初步使用Flexbox布局
Jul 02 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
JQuery发送ajax请求时中文乱码问题解决
Nov 14 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
PHP+DBM的同学录程序(3)
2006/10/09 PHP
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
dedecms系统常用术语汇总
2007/04/03 PHP
PHP常用技巧汇总
2016/03/04 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
javascript模拟枚举的简单实例
2014/03/06 Javascript
jquery和css3实现的炫酷时尚的菜单导航
2014/09/01 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
2017/03/27 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
vue移动端模态框(可传参)的实现
2019/11/20 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
python正则表达式re模块详解
2014/06/25 Python
详解Python爬虫的基本写法
2016/01/08 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
Python八皇后问题解答过程详解
2019/07/29 Python
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
大三学生入党思想汇报
2014/01/02 职场文书
会议邀请书范文
2014/02/02 职场文书
玲玲的画教学反思
2014/02/04 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
银行催款通知书
2015/04/17 职场文书
运动会主持人开幕词
2016/03/04 职场文书