JS Range 对象的使用

一：什么是Range对象

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

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

二：获取当前的选区

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

var selection, range;
if (window.getSelection) { //现代浏览器selection = window.getSelection();
} else if (document.selection) { //IEselection = 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;}
}

JS Range 对象的使用相关推荐

js range 对象研究
range对象光标对象他有4个常用属性 startContainer startoffset endContainer endoffset 举个例子 range : span 1 div ...
javascript range 转为 html,javascript Range对象跨浏览器常用操作
开发的功能主要涉及即时代码着色(CodeColoring)和语法提示(CodeHints)功能,稍后会总结功能开发中问题或提供源码. 以下是个人对Range对象的了解和常用操作的实例和总结: Rang ...
js空对象undefined
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>js空 ...
js空对象undefined测试
代码示例: <!DOCTYPE html> <html><head><meta charset="UTF-8"><title& ...
Node.js 全局对象
Node.js 全局对象在浏览器 JavaScript 中,通常 window 是全局对象, 而 Node.js 中的全局对象是 global,所有全局变量(除了 global 本身以外)都是 gl ...
python内置函数可以返回列表元组_Python内置函数()可以返回列表、元组、字典、集合、字符串以及range对象中元素个数....
Python内置函数()可以返回列表.元组.字典.集合.字符串以及range对象中元素个数. 青岛远洋运输有限公司冷聚吉船长被评为全国十佳海员.()A:错B:对有源逆变是将直流电逆变成其它频率的交流 ...
web前端学习（二）html学习笔记部分（3）--range对象
1.2.8 html5编辑api之range对象(一) 1.2.8.1 Range 对象基本概念 Range 对象的基本概念,通过使用 Range 对象所提供的方法实现一个鼠标选取内容,通过点击按 ...
分支结构||分支循环结构||使用原生js遍历对象
分支循环结构分支结构 v-show的原理:控制元素样式是否显示 display:none <!DOCTYPE html> <html lang="en"> ...
对象的内置属性和js的对象之父Object()
js中对象有constructor,valueOf(),toString()等内置属性和方法; 创建一个空对象的方法: var o = {}; 或者 var o= new Object(); o.co ...

JS Range 对象的使用

JS Range 对象的使用相关推荐

最新文章

热门文章