JS Range HTML文档/文字内容选中、库及应用介绍

一、前面的些话

Range

W3C Range

Microsoft
Text Range对象

二、什么是Range？

"Range"

Range

Range

Range

Range

Range

2011-04-12
负责调查切尔诺贝利核事故对人与环境造成影响的俄科学家亚布罗科夫博士指出，因福岛核电站使用的燃料较切尔诺贝利核电站多，且有反应堆使用了含有高毒性的钚的燃料，因此"福岛核电站事故可能会比切尔诺贝利带来更严重的后果"。

Range对象

Range对象

Range

Range对象

Range对象

<time>2011-04-12</time>
<p>据日本广播协会电视台12日报道，日本经济产业省原子能安全保安院决定将福岛第一核电站核泄漏事故等级提高至7级。这使日本核泄漏事故等级与苏联切尔诺贝利核电站核泄漏事故等级相同。</p>
<p>负责调查切尔诺贝利核事故对人与环境造成影响的俄科学家亚布罗科夫博士指出，因福岛核电站使用的燃料较切尔诺贝利核电站多，且有反应堆使用了含有高毒性的钚的燃料，因此"福岛核电站事故可能会比切尔诺贝利带来更严重的后果"。</p>

Range对象

泄漏事故等级与苏联切尔诺贝利核电站核泄漏事故等级相同。</p>
<p>负责调查切尔诺贝

<p>泄漏事故等级与苏联切尔诺贝利核电站核泄漏事故等级相同。</p>
<p>负责调查切尔诺贝</p>

Range

Range

三、浏览器的兼容性

Range对象

类似Range对象

	Explorer 6/7	Firefox 2	Safari 1.3	Opera 9
cloneContents()
cloneRange()
collapse()	tbd	tbd	tbd	tbd
collapsed
commonAncestorContainer
compareBoundaryPoints()
comparePoint() – Mozilla 扩展
createContextualFragment() – Mozilla 扩展
deleteContents()
detach()
endContainer
endOffset
extractContents()
insertNode()
isPointInRange() – Mozilla 扩展
selectNode()
selectNodeContents()
setEnd()
setEndAfter()
setEndBefore()
setStart()
setStartAfter()
setStartBefore()
startContainer
startOffset
surroundContents()

cloneContents()

docFrag
= rangeObject.cloneContents()

Range对象

null

docFrag
= rangeObject.cloneContents() || document.createDocumentFragment()

deleteContents()

Range

endContainer

extractContents()

docFrag
= rangeObject.extractContents()

Range对象

startContainer

startOffset

0

	Explorer 6/7	Firefox 2	Safari 1.3	Opera 9
addRange()
anchorNode
anchorOffset
collapse()	tbd	tbd	tbd	tbd
collapseToEnd()
collapseToStart()
containsNode()
deleteFromDocument()
extend()
focusNode
focusOffset
getRangeAt()
isCollapsed
rangeCount
removeAllRanges()
removeRange()
selectAllChildren()
selectionLanguageChange()

anchorNode

userSelection.anchorNode

anchorNode

0

focusNode

userSelection.focusNode

focusOffset

0

getRangeAt()

Mozilla Selection

W3C
Range

	Explorer 6/7	Firefox 2	Safari 1.3	Opera 9
boundingHeight
boundingLeft
boundingTop
boundingWidth
collapse()	tbd	tbd	tbd	tbd
compareEndPoints()
duplicate()
expand()
findText()
htmlText
move()
moveEnd()
moveStart()
moveToElementText()
moveToPoint()
offsetLeft
offsetTop
parentElement()
pasteHTML()
scrollIntoView()
select()
text

htmlText

htmlString
= userSelection.htmlText

TextRange

innerHTML

pasteHTML()

text

string
= userSelection.text

TextRange

innerText

	Explorer 6/7	Firefox 2	Safari 1.3	Opera 9
W3C Range 详述
Mozilla Selection 详述
Microsoft Text Range 详述

W3C Range对象

Range

Mozilla Selection对象

W3C
Range对象

Microsoft Text Range对象

Text
Range

Mozilla Selection对象

Range对象

Selection对象

四、获得用户选择内容

var userSelection;
if (window.getSelection) { //现代浏览器
userSelection = window.getSelection();
} else if (document.selection) { //IE浏览器 考虑到Opera，应该放在后面
userSelection = document.selection.createRange();
}

userSelection

Selection对象

Text
Range对象

Text Ranges

Selection

Range对象

Mozilla Selection

window.getSelection()

Selection对象

document.selection

Text
Range对象

Mozilla Selection

W3C
Range

Microsoft Text Range

window.getSelection()

五、

userSelection

的内容

userSelection

Mozilla
Selection

Microsoft Text Range对象

alert(userSelection)

泄漏事故等级与苏联切尔诺贝利核电站核泄漏事故等级相同。负责调查切尔诺贝

Microsoft Text Range 对象

userSelection.text

var selectedText = userSelection;
if (userSelection.text) {
selectedText = userSelection.text;
}

selectedText

六、从Selection对象创建Range对象

userSelection

Text
Range

userSelection

Selection对象

Selection对象

Range对象

var getRangeObject = function(selectionObject) {
if (selectionObject.getRangeAt)
return selectionObject.getRangeAt(0);
else { // 较老版本Safari!
var range = document.createRange();
range.setStart(selectionObject.anchorNode,selectionObject.anchorOffset);
range.setEnd(selectionObject.focusNode,selectionObject.focusOffset);
return range;
}
}
var rangeObject = getRangeObject(userSelection);

Selection

getRangeAt()

W3C
Range对象

range对象

Range

0

getRangeAt()

Range对象

var range = document.createRange();

Range

setStart()

setEnd()

Range

Range

setStart()

startContainer

startOffset

setEnd()

endContainer

endOffset

<p>男人，即使到了50岁，也千万不要碰超过26岁还没有结婚的女人。她可以是离婚，丧偶等等的，但是绝对不能是没有结婚。超过了26岁没有结婚，这种女人一般心理变态，不然就是有严重问题。市场很少犯错。即使它犯了错，那被你捡到宝的概率也很小。</p>
<p>婚姻市场未来的变化将会是很有趣的问题，而且对未来大陆经济的走势也有举足轻重的影响，对于行业的分布，经济的整体效率有决定性的影响。</p>

<ol>
<li>为什么是26这个准确的数字？</li>
<li>找骂帖</li>
<li>言论是对的，在100年前，lz穿越了而已。</li>
</ol>

Range

<p>

<li>

0

<p>

<li>

var startP = [the p node];
var endLi = [the second li node];
range.setStart(startP, 8);
range.setEnd(endLi, 5);

setStart(startContainer, startOffset)

setEnd(endContainer,
endOffset)

Range对象

Selection对象相似

anchorNode/anchorOffset

focusNode/focusOffset

range.setStart(selectionObject.anchorNode,selectionObject.anchorOffset);
range.setEnd(selectionObject.focusNode,selectionObject.focusOffset);

Range

getRangeAt()

Selection对象

Range对象

var userSelection, rangeObject;
if (window.getSelection) {
//现代浏览器
userSelection = window.getSelection();
} else if (document.selection) {
//IE浏览器 考虑到Opera，应该放在后面
userSelection = document.selection.createRange();
}

//Range对象
rangeObject = userSelection;
if (userSelection.getRangeAt) {
//现代浏览器
rangeObject = userSelection.getRangeAt(0);
}

七、rangy – JavaScript Range&Selection库

var sel = rangy.getSelection();
alert(sel.toString());

<script type="text/javascript" src="http://www.zhangxinxu.com/study/201104/rangy/rangy-core.js"></script>
<script type="text/javascript" src="http://www.zhangxinxu.com/study/201104/rangy/rangy-cssclassapplier.js"></script>
<script>
var cssApplier;
window.onload = function() {
rangy.init();
cssApplier = rangy.createCssClassApplier("selectClass", true);
document.body.onmouseup = function() {
cssApplier.toggleSelection();
};
};
</script>

八、实际的应用

九、结语相关

Range

Range