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下IE与FF兼容函数收集
Sep 17 Javascript
javascript 操作cookies及正确使用cookies的属性
Oct 15 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
Java  Spring 事务回滚详解
Oct 17 Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 Javascript
jQuery中的100个技巧汇总
Dec 15 Javascript
详解小程序缓存插件(mrc)
Aug 17 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 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
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
基于jquery封装的一个js分页
2011/11/15 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
理解JS绑定事件
2016/01/19 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
python thread 并发且顺序运行示例
2009/04/09 Python
Python新手入门最容易犯的错误总结
2017/04/24 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
torch 中各种图像格式转换的实现方法
2019/12/26 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
深圳茁壮笔试题
2015/05/28 面试题
部队万能检讨书
2014/02/20 职场文书
商超业务员岗位职责
2014/03/12 职场文书
离职感谢信怎么写
2015/01/22 职场文书
办公经费申请报告
2015/05/15 职场文书
采购员工作总结范文
2015/08/12 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
了解MySQL查询语句执行过程(5大组件)
2022/08/14 MySQL