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 相关文章推荐
提高网站信任度的技巧
Oct 17 Javascript
关于viewport,Ext.panel和Ext.form.panel的关系
May 07 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
如何将php数组或者对象传递给javascript
Mar 20 Javascript
js实现倒计时关键代码
May 05 Javascript
webpack踩坑之路图片的路径与打包
Sep 05 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
Nov 12 Javascript
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 Javascript
基于angular实现树形二级表格
Oct 16 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实现大流量下抢购方案
2017/12/15 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
JS相册图片抖动放大展示效果的示例代码
2021/01/29 Javascript
Python每天必学之bytes字节
2016/01/28 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
怎样创建、运行java程序
2014/08/01 面试题
土木工程实习生自我鉴定
2013/09/19 职场文书
单位门卫岗位职责
2013/12/20 职场文书
高一家长会邀请函
2014/01/12 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
三下乡个人总结
2015/03/04 职场文书
法制主题班会教案
2015/08/13 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python