以这段文字为例子。。

<p><b>法国国营铁路公司(SNCF)20日承认,</b>新订购的2000列火车因车体过宽，<strong>无法开进国内许多火车站的站台，从而不得不花大笔资金改造站台。</strong>法国国营铁路公司发言人克里斯托夫·皮耶诺埃尔告诉法国新闻电台：“我们发现问题晚了点。<b>我们承认这一失误并为此承担责任。”</b></p>

一个P标签包含了文字节点以及其他几个标签，标签中包含了文字节点。

selection 对象有一下几个属性：（以下都为chrome下单测的结果，firefox，IE另说）

anchorNode:anchorNode为selection对象的起点Node，假如选中的文字为“新订购的2000列火”，那么anchorNode就为“ 新订购的2000列火车因车体过宽”， ”这个文字节点。anchorNode还有几个子属性，我选出有用的有这么几个：length：这个节点的文字个数、nextSibling:这个文字节点的下一个同级节点，这里为 Strong标签、previousSibling：这个文字节点的前一个标签，这里是 B标签、textContent：这个选中的文字节点的全部文字，全部文字就是“ 新订购的2000列火车因车体过宽， ”即便只选择了“ 新订购的2000列火 ”。以上只是选择了单个的文字，还没有跨标签进行选择，比如“  列火车因车体过宽，<strong>无法开进国内 ”这样的选择。也不会属性对其造成影响。假如anchorNode起点为“  司(SNCF)20日承认,</b>新订购的2000列火 ”这样的呢？anchorNode起点就为 B 标签里面的textNode，有部分属性就会产生变化。length:不变，都是textNode，nextSibling：变化了，B标签里面只有一个textnode，textnode的nextsibling就为null、previousSibling：和nextsibling 同理；textContent：不变；

anchorOffset：基于anchorNode也就是起点节点的偏移量，选中“  订购的2000列火车因车体过 ”这段话，起点节点为“ 新订购的2000列火车因车体过宽 “ 那么偏移量就为1；

baseNode：和anchorNode 属性一致。但是选择的起点不同的话则完全不一样。 假如选择 ” 订购的2000列火车因车体过 “ 这段话，anchorNode和baseNode的属性完全一致。假如选择起点为0，即anchorOffset为0的话属性就 完全不一样 了。比如”  新订购的2000列火车因车体过宽， “这段话，baseNode的起点就是这个textNode的previousSibling： B标签。其属性length、nextsibling，previoussibling都为B标签的文字节点属性

baseOffset：和anchorOffset的一致，如果像”  新订购的2000列火车因车体过宽， “这段话的话，那么值就为previousSibling的textNode的length。

extentNode：selection选中文字的结束节点，假如选中的文字为“ 新订购的2000列火 ”，那么extentNode就为“ 新订购的2000列火车因车体过宽 ”，这个属性还有几个子属性，有用的几个和anchorNode和baseNode基本一致，length：这个节点的文字个数、nextSibling:这个文字节点的下一个同级节点，这里为 Strong标签、previousSibling：这个文字节点的前一个标签，这里是 B标签、textContent：这个选中的文字节点的全部文字，全部文字就是“ 新订购的2000列火车因车体过宽， ”即便只选择了“ 新订购的2000列火 ”。以上只是选择了单个的文字，还没有跨标签进行选择，比如“  列火车因车体过宽，<strong>无法开进国内 ”这样的选择的话，看最后选中的文字所处的地方，“  列火车因车体过宽，<strong>无法开进国内 ” 国内所处的标签是 Strong标签，那么extentNode就为Strong标签的 textNode，其length，nextSiblint,previousSibling，textContents都要做出相应的改变.

extentOffset：选中文字最后所处的标签的偏移量。“  列火车因车体过宽，<strong>无法开进国 内 ” 这个内字在Strong标签内所处的位置就是extentOffset的值。

focusNode：属性和定于与extentNode完全一致

focusOffset：属性和定义与extentOffset完全一致

getRangeAt：把选中的文字转化为range对象，可以进行操作。接受一个参数，一般填写为0，表示从selection对象的0开是进行转化;

以上的属性为chrome下console selection对象出来的与FF IE不一致,下面来说FF的selection对象属性，方法；

FF的selection 方法基本和chrome的一样，但是少了baseNode和extentNode以及extentOffset,baseOffset这4个属性，所以综上所述胃： 起点节点用的属性为anchorNode,结束节点为focusNode的属性 即可

IE下的的selection对象与上面又不相同为：

seletion对象属性和方法完全不同于W3C的selection之属性，方法；

RANGE对象

range对象也分为IE和W3C对象；range对象可以对选中的文字进行添加对象，删除，变粗，改变字体等适合用于网页富文本编辑等。在网上一搜一大片，我选几个目前能用到的属性来记录下。

W3C range：可以由selection对象创建也可以由document来创建。两者的区别为selection已经选好的range对象，通过selection.getRangeAt(0);来得到从selection 0开始的range对象；通过Document来创建就要稍微复杂一点，首先要确定range对象来自哪个元素，就拿上面的列子来讲；range对象来自P标签这个DOM对象；另外，range对象有4个基本属性：

startContainer:要选中的range对象开始的父节点，比如range对象是“法国国营铁路公司”   那么startContainer就是这个段文字所在标签B的文字节点。这个对象是可以被制定为文字节点或则一般节点。

startOffset:选中的range对象的起点，假如是文字节点，注释等，那么这个值就是这个range对象第一个字所在该文字节点的索引值；比如“国营铁路公司” 这个range对象第一个字是“国”，所在的text节点是“  法国国营铁路公司(SNCF)20日承认, ” 那么国字在这段文字的第2个。所以startOffset的值就为2。。万一我们选择的startContainer为一般节点，那么该值就为子节点的索引值；就拿上面列子来说，选择range对象为“ 无法开进国内许多火车站的站台，从而不得不花大笔资金改造站台。 ”，startContainer为P标签的话。那么startOffset就为“ 1 ”；

endOffset:选择规则和startOffset一致

endContainer：range结束时文字的父对象所在节点；比如” 台：“我们发现问题晚了点。<b>我们承认这一 “  那么endContainer就是B节点的文本节点；

commonAncestorContainer：endContainer和startContainer的共同父节点在这个Document最深的一个（最近的一个）；比如“法国国营铁路公司“ 这种range对象所在End和startContainer的共同祖先都是文本节点。如果是跨标签的话，比如” 20日承认,</b>新订购的 “ startContainer是B标签的文本节点，endContainer是P标签。那么他们的共同祖先就是P标签；

一般选择 ：使用range.SelectNode(Dom)连同startContainer和endContainer一同选中；包含标签；range.SelectNodeContents(Dom);选中除了start,endContainer之外的内容，只是内容，不包含标签；

复杂选择： 可以指定选择某段文字从哪开始从哪结束；有2个方法，为setStart,setEnd；方法分别接受2个参数，第一个参数为这个range对象的container，第2个参数为索引值；start和end2个方法的参数分别对应为setStart(startContainer,startOffset);setEnd(endContainer,endOffset);

以上就是range对象的基本属性和选择方式，分为selection选择和自己输入参数创建；下面就是实际操作range对象，让其实现富文本编辑；

insertNode:插入节点，创建一个节点，比如span标签，插入到这个range对象的开始处；用法：range.insertNode(span标签);

surroundContent:环绕节点，创建一个节点，比如span标签，把range对象添加进这个span标签。用处：一般用来设置其CSS样式等比如设置背景色；用法:range.surroundContents(span标签);（注：这个方法只能用于startContaienr和endContainer都是文本节点并且range没有跨标签。比如” 台：“我们发现问题晚了点。<b>我们承认这一 “  这种不行，要报错，解决方法是用extractContents方法提出来，添加进span，使用insetAdjacentHTML添加；

extractContents:提取并删除range对象，返回一个document.fragment对象；相当于我们的剪切功能；这方法和insertAdjacentHTML配合非常牛逼；例子：比如我们” 台：“我们发现问题晚了点。<b>我们承认这一 “  这种range对象的话有一部分的B标签在里面，那么使用这个方法的话，剪切后，B标签会自动补全开始和闭合标签，内容为剪切剩下的内容。比如剪切上面的range后，B标签就变成了<b>失误并为此承担责任。”</b> range中含有B标签部分的文字也会自动闭合成一个完整的B标签例如：<b>我们承认这一</b>;

要使用insetAdjacentElement的话，必须知道调用insetAdjacentElement的节点为哪个。比如要把剪切出来的内容原原本本添加个背景色后还原，那么就必须知道确切的使用“insetAdjacentElement”的DOM节点。insetAdjacentElement可以添加在这个DOM节点的标签面前，内容开始前，内容结束后，标签结束后。分别为beforeBegin,beforeBegin,beforeEnd,afterEnd; 如何知道确切的调用这个方法的DOM节点呢？前面的selection对象的anchorNode和focusNode就派上用场了。我们分别得到这2个节点的父节点;总共有这么几种可能性：

1:假如起始节点的父节点不这个例子的根节点的话，那么说明range对象的anchroeNode是一个子节点而非文本节点，那么我们就把提取出来的range添加进span使用ahchorNode.insetAdjacentElement('afterEnd',span)来添到经过extractContents后自动闭合的起始节点的后面；

2：假如起始父节点为这个例子的根节点，但是结束父节点不是的话，那么就是FocusNode.insetAdjacentElement('beforeBegin',span)来添加到这个节点的前面；

3：假如起始父节点和结束父节点为相同的话，那么说明这个range的anchor和FocusNode都在子节点里面；使用surroundContents即可。

4：起始父节点为例子的根节点，结束父节点不是，那么就以结束父节点为起点，使用FocusNode.insetAdjacentElement('beforeBegin',span)；

5：假如起始和结束父节点都是例子的话使用surroungContents即可。

但是有一点不同的是，在firefox下insetAdjacentElement不是一个有效的方法，firefox只支持insetAdjacentHTML。在chrome下HTML,TEXT,ELEMENT都支持。

目前在firefox下要使用怎么办呢？只支持insetAdjacentHTML的话我们就用span的innerHTML来拼接一个新的span就是了哇

如：FocusNode.insetAdjacentElement('beforeBegin',"<span style='background-color:red'>"+span.innerHTML+"</span>")   problem solved~~

IE下实现range给背景添加颜色等操作

IE下的selection为document.selection;获取selection选中的range对象为document.selection.createRange();

由于IE的selection对象没有anchorNode等属性，所以添加背景色等操作就用不到insetAdjacentElement这样的函数，那么是怎么样进行操作的呢？

IE特有的execCommad来执行的，这个方法非常的强大，可以把range对象替换为其他的文本，input，img标签，还可以给range对象的文字进行样式设置；

获取range对象的方式和W3C一致，分别是通过selection 来获取，还有就是通过创建range对象；

selection创建：document.selection.createRange();

range对象创建：IE可以用不同标签来创建不同选择区域的range对象。比如用body创建range对象，那么range对象的选择区域就是整个页面了：获取整个body的range:document.body.createTextRange();目前IE range对象支持由body,input,button,textarea创建的range对象

简单的选择range对象：range.findText（”查找的文字“)，返回一个bool值，true为找到值，false为没找到;例如上面的例子”  公司(SNCF) “  range.findText('公司(SNCF)'); 返回true，就可以使用execCommad操作对象了；注意：使用这个方法时候要注意range对象是由哪个标签创建的。比如Button创建的range对象要查找由textarea创建的range对象在textarea中的值，肯定是找不到的；

复杂的选择:IE range复杂的选择是通过moveStart,moveEnd来前后移动range选区；

这2个方法接受2个参数，第一个是移动的类型; 有4个类型：

character：按照字符进行移动，最小单位

word:按照单词进行移动；

sentence:按照句子进行移动；

textedit:直接移动到选区的结束位置，start传入这个参数无效，只有end方法传入才还效

第2个参数是数字，具体移动的个数，可以接受负值；start方法的数字是range开始起第几个开始计算；end方法的传入数字是这段range的结束位置起开始算，正数的话就是range的结束范围就是range本身的长度。负数的话那么就是range的长度减去负数值（绝对值）；比如 一段完整的range文字，法国国营铁路公司(SNCF)20日承认,  我们要截取“铁路公司” 话看下面的例子：

这里用character来做例子；

range.moveStart('character',4);

range.moveEnd('character',-11);

那么range的范围就是创建这个range的元素的开始第4个到第8个之间的位置；

操作range对象

IE操作range对象全是通过execCommad来进行操作的

execCommad的参数有3个，

参数A，操作的类型比如设置range的css属性，剪切，复制，把range的文字转化成input、textarea标签等，

参数B，为bool值，在参数A为替换元素，添加链接的情况下才有用，目的为是否弹出框来确定这个操作，true为弹出，false为不弹出；

参数C，为参数A的具体属性，比如设置背景色的颜色，替换元素的ID属性，替换超链接的URL等；

参数A的部分参数为：

2D-Position 允许通过拖曳移动绝对定位的对象。

AbsolutePosition 设定元素的 position 属性为“absolute”(绝对)。

BackColor 设置或获取当前选中区的背景颜色。

BlockDirLTR 目前尚未支持。

BlockDirRTL 目前尚未支持。

Bold 切换当前选中区的粗体显示与否。

BrowseMode 目前尚未支持。

Copy 将当前选中区复制到剪贴板。

CreateBookmark 创建一个书签锚或获取当前选中区或插入点的书签锚的名称。

CreateLink 在当前选中区上插入超级链接，或显示一个对话框允许用户指定要为当前选中区插入的超级链接的 URL。

Cut 将当前选中区复制到剪贴板并删除之。

Delete 删除当前选中区。

DirLTR 目前尚未支持。

DirRTL 目前尚未支持。

EditMode 目前尚未支持。

FontName 设置或获取当前选中区的字体。

FontSize 设置或获取当前选中区的字体大小。

ForeColor 设置或获取当前选中区的前景(文本)颜色。

FormatBlock 设置当前块格式化标签。

Indent 增加选中文本的缩进。

InlineDirLTR 目前尚未支持。

InlineDirRTL 目前尚未支持。

InsertButton 用按钮控件覆盖当前选中区。

InsertFieldset 用方框覆盖当前选中区。

InsertHorizontalRule 用水平线覆盖当前选中区。

InsertIFrame 用内嵌框架覆盖当前选中区。

InsertImage 用图像覆盖当前选中区。

InsertInputButton 用按钮控件覆盖当前选中区。

InsertInputCheckbox 用复选框控件覆盖当前选中区。

InsertInputFileUpload 用文件上载控件覆盖当前选中区。

InsertInputHidden 插入隐藏控件覆盖当前选中区。

InsertInputImage 用图像控件覆盖当前选中区。

InsertInputPassword 用密码控件覆盖当前选中区。

InsertInputRadio 用单选钮控件覆盖当前选中区。

InsertInputReset 用重置控件覆盖当前选中区。

InsertInputSubmit 用提交控件覆盖当前选中区。

InsertInputText 用文本控件覆盖当前选中区。

InsertMarquee 用空字幕覆盖当前选中区。

InsertOrderedList 切换当前选中区是编号列表还是常规格式化块。

InsertParagraph 用换行覆盖当前选中区。

InsertSelectDropdown 用下拉框控件覆盖当前选中区。

InsertSelectListbox 用列表框控件覆盖当前选中区。

InsertTextArea 用多行文本输入控件覆盖当前选中区。

InsertUnorderedList 切换当前选中区是项目符号列表还是常规格式化块。

Italic 切换当前选中区斜体显示与否。

JustifyCenter 将当前选中区在所在格式化块置中。

JustifyFull 目前尚未支持。

JustifyLeft 将当前选中区所在格式化块左对齐。

JustifyNone 目前尚未支持。

JustifyRight 将当前选中区所在格式化块右对齐。

LiveResize 迫使 MSHTML 编辑器在缩放或移动过程中持续更新元素外观，而不是只在移动或缩放完成后更新。

MultipleSelection 允许当用户按住 Shift 或 Ctrl 键时一次选中多于一个站点可选元素。

Open 目前尚未支持。

Outdent 减少选中区所在格式化块的缩进。

OverWrite 切换文本状态的插入和覆盖。

Paste 用剪贴板内容覆盖当前选中区。

PlayImage 目前尚未支持。

Print 打开打印对话框以便用户可以打印当前页。

Redo 目前尚未支持。

Refresh 刷新当前文档。

RemoveFormat 从当前选中区中删除格式化标签。

RemoveParaFormat 目前尚未支持。

SaveAs 将当前 Web 页面保存为文件。

SelectAll 选中整个文档。

SizeToControl 目前尚未支持。

SizeToControlHeight 目前尚未支持。

SizeToControlWidth 目前尚未支持。

Stop 目前尚未支持。

StopImage 目前尚未支持。

StrikeThrough 目前尚未支持。

Subscript 目前尚未支持。

Superscript 目前尚未支持。

UnBookmark 从当前选中区中删除全部书签。

Underline 切换当前选中区的下划线显示与否。

Undo 目前尚未支持。

Unlink 从当前选中区中删除全部超级链接。

Unselect 清除当前选中区的选中状态。

列如我们要设置背景色就为ragne.execCommad('BackColor','true','red');背景色为红色，其他css属性一直；

替换元素成TextBox并且把textbox的值设置为替换前的值:

var text=range.text;

range.execCommad('InsertInputText','false','tba');

document.getElementById('tba').value=text;

转自https://www.cnblogs.com/strangerqt/p/3745426.html

喜欢这篇文章？欢迎打赏~~