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 相关文章推荐
javascritp实现input输入框相关限制用法
Jun 29 Javascript
javascript 表单规则集合对象
Jul 21 Javascript
javascript Demo模态窗口
Dec 06 Javascript
基于jquery跨浏览器显示的file上传控件
Oct 24 Javascript
JS完成代码前最好对其做5件事
Apr 07 Javascript
JS烟花背景效果实现方法
Mar 03 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
Mar 10 Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
Jan 05 Javascript
理解Koa2中的async&amp;await的用法
Feb 05 Javascript
学习Vue组件实例
Apr 28 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
MySQL中create table语句的基本语法是
2007/01/15 PHP
php array_intersect()函数使用代码
2009/01/14 PHP
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
javascript设置金额样式转换保留两位小数示例代码
2013/12/04 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
Vue实现简单计算器案例
2020/02/25 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
python控制台显示时钟的示例
2014/02/24 Python
python用字典统计单词或汉字词个数示例
2014/04/22 Python
Python中logging模块的用法实例
2014/09/29 Python
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
python实现下载文件的三种方法
2017/02/09 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
python实现三次样条插值
2018/12/17 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
C语言基础笔试题
2013/04/27 面试题
为什么要做架构设计
2015/07/08 面试题
如何填写个人简历自我评价
2013/12/10 职场文书
学生会主席就职演讲稿
2014/01/14 职场文书
物理专业大学生职业生涯规划书
2014/02/07 职场文书
女儿满月酒致辞
2015/07/29 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫