以这段文字为例子。。

<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');

 

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