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 相关文章推荐
javascript 函数速查表
Feb 07 Javascript
jquery获取tr并更改tr内容示例代码
Feb 13 Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
JQuery中Bind()事件用法分析
May 05 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
深入理解vue-loader如何使用
Jun 06 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
Angular实现响应式表单
Aug 04 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
微信小程序实现弹出层效果
May 26 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
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
第二节 对象模型 [2]
2006/10/09 PHP
php简单提示框alert封装函数
2010/08/08 PHP
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
[30:37]【全国守擂赛】第三周擂主赛 Dark Knight vs. Leopard Gaming
2020/05/04 DOTA
python之yield表达式学习
2014/09/02 Python
python中map、any、all函数用法分析
2015/04/21 Python
Python正规则表达式学习指南
2016/08/02 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
在什么时候需要使用"常引用"
2015/12/31 面试题
财务部副经理岗位职责
2014/03/14 职场文书
调解协议书
2014/04/16 职场文书
怎样拟定创业计划书
2014/05/01 职场文书
保护环境倡议书范文
2014/05/13 职场文书
会计人员演讲稿
2014/09/11 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
Python如何使用循环结构和分支结构
2022/04/13 Python