JavaScript的Range简介与使用示例

原创
2014/11/24 09:23
阅读数 896

介绍DOM标准的Range和IE标准的Range。前者针对节点,后者针对文本。虽然少用,但可以了解下。


/**
 * DOM标准的Range
 */

// 创建范围
var range = document.createRange();

// 选择dom作为范围
range.selectNode(dom);

// 选择dom的内容/子节点作为范围
range.selectNodeContents(dom);

// 将范围起点设置在dom之前
range.setStartBefore(dom);

// 将范围起点设置在dom之后
range.setStartAfter(dom);

// 将范围终点设置在dom之前
range.setEndBefore(dom);

// 将范围终点设置在dom之后
range.setEndAfter(dom);

// 直接设置范围起点
// @param dom: startContainer。参数1,引用的节点,作为范围的startContainer
// @param offset: startOffset。参数2,起点偏移量
range.setStart(startContainer, startOffset);

// 直接设置范围终点
range.setEnd(endContainer, endOffset);

// 删除范围里的内容
range.deleteContents();

// 删除范围里的内容,并将该内容返回
range.extractContents();

// 创建范围里内容的副本
range.cloneContents();

// 插入包围范围的内容
// @param dom: 要包围范围内容的节点
// 1.抽取范围里的内容,类似extractContents()
// 2.将dom插入范围原所在位置
// 3.将文档碎片内容添加到dom中
range.surroundContents(dom);

// 清空范围,但并不删除内容,也叫折叠范围
range.collapse(true); // true就折叠在范围的开头,false就结尾
range.collapsed;      // 返回是否已被折叠了

// 比较DOM范围,compareBoundaryPoints()
// 如果第一个范围被测点在第二个范围被测点之前,返回-1;相同则返回0;如果在之后返回1
// START_TO_START(0), START_TO_END(1), END_TO_START(2), END_TO_END(3)
range1.compareBoundaryPoints(Range.START_TO_START,range2);

// 复制范围
var rangeCloned = range.cloneRange();

// 清理并销毁范围
range.detach();


/**
 * IE标准的Range
 * 在IE下,范围主要是针对文本,而不是DOM标准下的节点
 */

// 创建文本范围
// 创建的元素必须是<body/>,<button/>,<input/>,<textarea/>,而不是document
// <body/>创建的范围能在任何位置使用,其他元素创建的只能在内部使用
var range = document.body.createTextRange();

// 通过给定文本来指定范围
var found = range.findText('hello'); // 发现的第一个实例
var foundAgain = range.findText('hello', 1); // 正数表示搜索继续往前,负数表示往回搜索

// 选择特定dom的文本,包括HTML标签,类似DOM下的selectNode()
range.moveToElementText(dom);
alert(range.htmlText);

// parentElement(),类似DOM的commonAncestorContainer
var commonAncestor = range.parentElement();

// 在前面创建简单选区后,可使用move(), moveStart(), moveEnd(), expand()来进一步给范围定位
// 这些方法都接受两个参数:移动的单位和移动的单位个数
// 单位包括:'character', 'word', 'sentence', 'textedit'
range.moveStart('word', 2);
range.moveEnd('character', 1);
range.move('character', 5); // move()会先折叠范围,再移动,移动后必须再调用moveStart(),moveEnd()

// 与范围进行交互
range.text = 'hello2';
range.pasteHTML('<em>hello3</em>'); // 注意使用pasteHTML中的HTML语法正确

// 折叠范围
range.collapse(true); // true|false与DOM标准的一样

// 是否已折叠,是用boundingWidth,返回范围宽度的像素值
// 还有boundingHeight, boundingTop, boundingLeft
var isCollapsed = 0 === range.boundingWidth;

// 比较范围,类似DOM的compareBoundingPoints()
// 参数值:'StartToStart', 'StartToEnd', 'EndToEnd', 'EndToStart'
range1.compareEndPoints('StartToStart', range2);

range1.isEqual(range2); // 范围1是否与范围2完全一样
range1.inRange(range2); // 范围1包含范围2,范围2在范围1内部

// 创建范围副本
var rangeCloned = range.duplicate();

展开阅读全文
打赏
1
8 收藏
分享
加载中
更多评论
打赏
0 评论
8 收藏
1
分享
返回顶部
顶部