JS Range 对象的使用

yanwei 发布于2019-08-20 17:26 / 803人阅读

摘要：二获取当前的选区由于兼容性的问题需要区分浏览器，现代浏览器对象三属性如果范围的开始点和结束点在文档的同一位置，则为，即范围是空的，或折叠的。包含范围的结束点的节点。四操作选中区域的文字选中区域的元素选中区域的选区是否为空

一：什么是Range对象

Range是指html文档中的区域，如用户用鼠标拖动选中的区域，如下图：

通过Range对象，可以获取用户选中的区域，或者指定选中区域，得到Range的起点和终点、修改或者复制里边的文本，甚至是html。在富文本编辑器开发中，经常会使用到这些功能。

二：获取当前的选区

由于兼容性的问题,需要区分ie浏览器，

var selection, range;
if (window.getSelection) { 
    //现代浏览器
    selection = window.getSelection();
} else if (document.selection) { 
    //IE
    selection = document.selection.createRange();
}

//Range对象
range = selection.getRangeAt(0);

三：range属性

> collapsed     如果范围的开始点和结束点在文档的同一位置，则为 true，即范围是空的，或折叠的。
> commonAncestorContainer     范围的开始点和结束点的（即它们的祖先节点）、嵌套最深的 Document 节点。
> endContainer         包含范围的结束点的 Document 节点。 
> endOffset     endContainer 中的结束点位置。
> startContainer     包含范围的开始点的 Document 节点。
> startOffset    startContainer中的开始点位置。

四：range操作

//选中区域的文字
var text = range.toString();

//选中区域的Element元素
var elem = range.commonAncestorContainer;
if(elem.nodeType != 1){
     elem = elem.parentNode;
}

//选中区域的html
var span = document.createElement("SPAN");
span.appendChild(range.cloneContents());

//选区是否为空
var isSelectionEmpty = false;
if (range.startContainer === range.endContainer) {
   if (range.startOffset === range.endOffset) {
       isSelectionEmpty = true;
   }
}

GPU云服务器云服务器 Range对象客户如何使用腾讯云的对象存储 js中的对象 js数据对象和对象的区别吗

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83587.html

JS Range 对象的使用

摘要：二获取当前的选区由于兼容性的问题需要区分浏览器，现代浏览器对象三属性如果范围的开始点和结束点在文档的同一位置，则为，即范围是空的，或折叠的。包含范围的结束点的节点。四操作选中区域的文字选中区域的元素选中区域的选区是否为空一：什么是Range对象 Range是指html文档中的区域，如用户用鼠标拖动选中的区域，如下图： showImg(https://segmentfault.co...

pcChao 2019-08-01 17:02 评论0 收藏0
JS实现将图片复制到剪贴板

摘要：前言最近项目新增需求用户能够拖拽页面上的图片文件到文档。在现有的拖拽事件所提供无法满足需求的情况下，换一个思路走尝试将图片复制到剪贴板。只复制目标节点的子节点，对于标签，如果不额外包裹一层父元素，无法实现图片复制。前言最近项目新增需求：用户能够拖拽页面上的图片文件到word文档。当操作浏览器里拖拽图片至别的程序，在word文档中展示出获取到的只是图片的url地址，而非预期的图片文件...

MageekChiu 2019-08-22 18:02 评论0 收藏0
详解JavaScript模块化开发

摘要：目前，通行的模块规范主要有两种和。所有依赖某些模块的语句均放置在回调函数中。首先采用了模块化的概念。然后通过参数一，参数二参数一是数组，传入我们需要引用的模块名，第二个参数是个回调函数，回调函数传入一个变量，代替刚才所引入的模块。什么是模块化开发？前端开发中，起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果，后来js得到重视，应用也广泛起来了，jQuery，...

waruqi 2019-08-21 10:20 评论0 收藏0
FE.ES-(for...of) 可迭代对象Range(n) in JS

摘要：可迭代对象浏览器需支持注意返回一个实时的返回一个静态的语句在可迭代对象上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。与的区别语句以原始插入顺序迭代对象的可枚举属性。语句遍历可迭代对象定义要迭代的数据。可迭代对象 Array [10, 20, 30] String boo TypedArrayc new Uint8Array([0x00, 0xff]) ...

miracledan 2019-08-23 16:02 评论0 收藏0
类和模块类和原型工厂方法构造函数 constructor

摘要：即两个构造函数创建的实例的是指向同一个原型对象当原型链修改的时候，其子不会发生改变通过运算符来进行计算属性对就是上文中的构造器。类和模块每个js的对象都是属性的集合。相互之间没有联系。js也能定义对象的类，让每个对象都共享某些属性。类的成员或者实例包含一些属性，用来存放或者定义他们的状态。有些属性定义了其行为，（行为或者称为方法）方法是类定义的，被所有的实例共享。例如，用一个类来表示...

hedzr 2019-08-22 18:47 评论0 收藏0