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 相关文章推荐
javascript Base类 包含基本的方法
Jul 22 Javascript
jQuery中调用WebService方法小结
Mar 28 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
Vue中div contenteditable 的光标定位方法
Aug 25 Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 Javascript
vue 实现走马灯效果
Oct 28 Javascript
JavaScript如何操作css
Oct 24 Javascript
React如何创建组件
Jun 27 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的ob_start() 控制您的浏览器cache
2009/08/03 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
JS 树形递归实例代码
2010/05/18 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
js+canvas简单绘制圆圈的方法
2016/01/28 Javascript
jQuery实现HTML表格单元格的合并功能
2016/04/06 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
js 调用百度分享功能
2017/02/27 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
2018/01/24 Javascript
如何为你的JavaScript代码日志着色详解
2019/04/08 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
python实现简单中文词频统计示例
2017/11/08 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
英国在线花园中心:You Garden
2018/06/03 全球购物
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
新员工入职感言
2014/02/01 职场文书
新郎结婚保证书
2015/02/26 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
用人单位聘用意向书
2015/05/11 职场文书
部门主管竞聘书
2015/09/15 职场文书
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS