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处理table表格的代码
Dec 06 Javascript
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
js关闭当前页面(窗口)的几种方式总结
Mar 05 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
微信小程序搭建自己的Https服务器
May 02 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 Javascript
小程序实现左滑删除的效果的实例代码
Oct 19 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中Session的概念
2006/10/09 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
探究python中open函数的使用
2016/03/01 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
pytorch ImageFolder的覆写实例
2020/02/20 Python
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
英国打印机墨盒销售网站:Ink Factory
2019/10/07 全球购物
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
银行演讲稿范文
2014/01/03 职场文书
2014年重阳节老干部座谈会局领导发言稿
2014/09/25 职场文书
2014年政工师工作总结
2014/12/18 职场文书
贷款工资证明范本
2015/06/12 职场文书
银行工作心得体会范文
2016/01/23 职场文书
导游词之青岛崂山
2019/12/27 职场文书
新手初学Java List 接口
2021/07/07 Java/Android