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之卸载鼠标事件的代码
May 14 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
Feb 03 Javascript
js判断鼠标同时离开两个div的思路及代码
May 31 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
js与applet相互调用的方法
Jun 22 Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
Aug 23 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
基于mysql的论坛(2)
2006/10/09 PHP
function.inc.php超越php
2006/12/09 PHP
PHP源码之 ext/mysql扩展部分
2009/07/17 PHP
PHP递归调用的小技巧讲解
2013/02/19 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
vue.js表格分页示例
2016/10/18 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
vue购物车插件编写代码
2017/11/27 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
Javascript实现简易天数计算器
2020/05/18 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
python实现2014火车票查询代码分享
2014/01/10 Python
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
python实现简单购物商城
2016/05/21 Python
itchat接口使用示例
2017/10/23 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
高一新生军训方案
2014/05/12 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书