JavaScript操作选择对象的简单实例


Posted in Javascript onMay 16, 2016

JavaScript操作选择对象的简单实例

//替换选中文本内容,参数text为要替换的内容
function SetSelectionText(text) {
  //非IE浏览器
  if (window.getSelection) {
    var sel = window.getSelection();
    alert(sel.rangeCount); //选区个数, 通常为 1 .
    sel.deleteFromDocument(); //清除选择的内容
    var r = sel.getRangeAt(0); //即使已经执行了deleteFromDocument(), 这个函数仍然返回一个有效对象.
    var selFrag = r.cloneContents(); //克隆选择的内容
    var frag = selFrag.childNodes; //如果执行了deleteFromDocument(), 这个数组长度将会是 0 
    for (var i = 0; i < frag.length; i++) {
      alert(frag[i].nodeName); //枚举选择的对象
    }
    var h1 = document.createElement('H1'); //生成一个插入对象
    h1.innerHTML = text; //设置这个对象的内容
    r.insertNode(h1); //把对象插入到选区, 这个操作不会替换选择的内容, 而是追加到选区的后面, 所以如果需要普通粘贴的替换效果, 之前执行deleteFromDocument()函数.
  }
  else if (document.selection && document.selection.createRange) {
    //IE浏览器
    var sel = document.selection.createRange(); //获得选区对象
    alert(sel.htmlText); //选择区的html文本.
    sel.pasteHTML('<h1>标题</h1>'); //粘贴到选区的html内容, 会替换选择的内容.
  }
}

以上这篇JavaScript操作选择对象的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
js刷新框架子页面的七种方法代码
Nov 20 Javascript
JavaScript 学习技巧
Feb 17 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
javascript为下拉列表动态添加数据项
May 23 Javascript
JavaScript 作用域链解析
Nov 13 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
Dec 10 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
vue-cli3.0使用及部分配置详解
Aug 29 Javascript
JS正则表达式封装与使用操作示例
May 15 Javascript
vue+layui实现select动态加载后台数据的例子
Sep 20 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 #Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 #Javascript
JS获取元素多层嵌套思路详解
May 16 #Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
May 16 #Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
May 16 #Javascript
在javascript中创建对象的各种模式解析
May 16 #Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 #Javascript
You might like
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
js实现打字小游戏
2019/12/17 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
Python创建系统目录的方法
2015/03/11 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
Python2包含中文报错的解决方法
2018/07/09 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
Linux上比较文件的命令都有哪些
2012/02/24 面试题
最新教师自我评价分享
2013/11/12 职场文书
幼儿园教师请假制度
2014/01/16 职场文书
森林防火工作方案
2014/02/14 职场文书
合作意向书模板
2014/03/31 职场文书
工程造价专业求职信
2014/07/17 职场文书
邀请书模板
2015/02/02 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android
Python爬虫入门案例之爬取去哪儿旅游景点攻略以及可视化分析
2021/10/16 Python