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 相关文章推荐
详细讲解JS节点知识
Jan 31 Javascript
始终在屏幕中间显示Div的代码(css+js)
Mar 10 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
May 23 Javascript
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
Oct 17 Javascript
javascript中数组方法汇总
Jul 07 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
BootStrap Tooltip插件源码解析
Dec 27 Javascript
jquery easyui DataGrid简单示例
Jan 23 Javascript
Ajax实现页面无刷新留言效果
Mar 24 Javascript
vue使用watch监听属性变化
Apr 30 Vue.js
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定时执行任务设置详解
2015/02/06 PHP
PhpStorm terminal无法输入命令的解决方法
2016/10/09 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
javascript常见操作汇总
2014/09/03 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
JavaScript原型对象原理与应用分析
2018/12/27 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
浅析Python基础-流程控制
2016/03/18 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
pytorch之添加BN的实现
2020/01/06 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
教师求职推荐信范文
2013/11/20 职场文书
公开承诺书格式
2014/05/21 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
辩护词格式
2015/05/22 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
python实现简单聊天功能
2021/07/07 Python