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 相关文章推荐
json 定义
Jun 10 Javascript
JQuery困惑—包装集 DOM节点
Oct 16 Javascript
jQuery学习之prop和attr的区别示例介绍
Nov 15 Javascript
了不起的node.js读书笔记之node.js中的特性
Dec 22 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
JSONObject使用方法详解
Dec 17 Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 Javascript
详解Node.js开发中的express-session
May 19 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
在Angular中使用JWT认证方法示例
Sep 10 Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 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 获取本机外网/公网IP的代码
2010/05/09 PHP
如何使用php实现评委评分器
2015/07/31 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
checkbox设置复选框的只读效果不让用户勾选
2013/08/12 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
微信小程序 后台登录(非微信账号)实例详解
2017/03/31 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
用Pygal绘制直方图代码示例
2017/12/07 Python
tornado 多进程模式解析
2018/01/15 Python
Python从零开始创建区块链
2018/03/06 Python
python numpy中cumsum的用法详解
2019/10/17 Python
python return逻辑判断表达式实现解析
2019/12/02 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
Java基础知识面试题
2014/03/25 面试题
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
火锅店营销方案
2014/02/26 职场文书
企业宗旨标语
2014/06/10 职场文书
企业环保标语
2014/06/10 职场文书
机械工程师岗位职责
2014/06/16 职场文书
爱心捐款感谢信
2015/01/20 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang
pandas 实现将NaN转换为None
2021/05/14 Python