// At the end of text if (ns) {
sc.parentNode.insertBefore(node, sc.nextSibling); } else {
sc.parentNode.appendChild(node); } } else {
// Middle, need to split
// http://msdn.microsoft.com/zh-cn/library/ms536764.aspx nn = sc.splitText(so);
sc.parentNode.insertBefore(node, nn); }
第二种情形：startContainer 节点为非 第一种情形中的节点。“偏移是 Range 中的第一个节点在其父节点中的索引”。获取 startContainer 中子节点偏移量为 startOffset 的节点 cn = sc.childNodes[so];，如果存在，则按照 insertNode 方法的定义，应将 node 插入到该节点之前 sc.insertBefore(node, cn);，如果不存在，即 startOffset 大于等于 sc.childNodes.length，则应将 node 插入到 startContainer 的子节点最后sc.appendChild(node);。 if (sc.childNodes.length > 0) { cn = sc.childNodes[so]; }
if (cn) {
sc.insertBefore(node, cn); } else {
sc.appendChild(node); }
详细代码实现如下：
zRange.prototype.insertNode = function(node) { var sc = this.startContainer, so = this.startOffset, p = sc.parentNode, ns = sc.nextSibling, nn, cn;
// 如果节点是 TEXT_NODE 或者 CDATA_SECTION_NODE
if ((sc.nodeType === 3 || sc.nodeType === 4 || sc.nodeType === 8 ) && sc.nodeValue) {
if (so === 0) {
// At the start of text p.insertBefore(node, sc);
} else if (so >= sc.nodeValue.length) { // At the end of text if (ns) {
p.insertBefore(node, ns); } else {
p.appendChild(node); } } else {
// Middle, need to split
// http://msdn.microsoft.com/zh-cn/library/ms536764.aspx nn = sc.splitText(so); p.insertBefore(node, nn); } } else {
if (sc.childNodes.length > 0) { cn = sc.childNodes[so]; }
if (cn) {
sc.insertBefore(node, cn); } else {
sc.appendChild(node); } } }
剩下的方法，大家可以尝试着去模拟一把，其实并不复杂，也许会其乐无穷，呵呵
获取 Textarea 的光标位置
2010-11-17 下午 - JS/Ajax/AS/Flex - javascript - selection - textarea 在任何编辑器中，获取光标位置都是非常重要的，很多人可能认为较难，其实只要处理好浏览器的兼容，还是比较容易实现的。
下面我们一起来看看如何获取到 Textarea 元素中的光标位置（测试地址）。 首先，我们用 rangeData 对象作为数据存储，并获得焦点：
var rangeData = {start: 0, end: 0, text: \textarea.focus();
对于非 IE 浏览器获取选区的起始和末尾位置其实非常容易： rangeData.start= el.selectionStart; rangeData.end = el.selectionEnd; 通过截取我们可以得到光标的选区内容：
rangeData.text = (rangeData.start != rangeData.end) ? el.value.substring(rangeData.start, rangeData.end): \
而对于 IE 浏览器处理起来就比较麻烦了，但我们依旧可以获取到选区： oS = document.selection.createRange(); 同时还可获取 Textarea 元素的选区：
// 为了使 oR 与 oS 在同一等级上比较，请勿使用：oR = textarea.createTextRange()
oR = document.body.createTextRange(); oR.moveToElementText(textarea);
如果光标在 Textarea 元素内，很自然 oS.text 就是我们需要的选区内容： rangeData.text = oS.text;
并且我们可以通过 oS.getBookmark() 方法获取到选区的位置数据，该位置数据可以通过 moveToBookmark() 方法设置回去。
getBookmark: Retrieves a bookmark (opaque string) that can be used with moveToBookmark to return to the same range. moveToBookmark: Moves to a bookmark.
我们用 rangeData.bookmark 来记录该位置数据： rangeData.bookmark = oS.getBookmark();
下面是最重要的步骤：我们比较 oR 与 oS 的选区起始位置（使用
object.compareEndPoints(sType, oRange) 方法比较），如果 oR 的起始位置在 oS 之前，我们向前移动 oS 的起始位置1个字符（使用 object.moveStart(sUnit [, iCount]) 方法移动），一直当 oS 的起始位置在 oR 之前停止，移动的位置，则是选区的起始位置。
compareEndPoints: Compares an end point of a TextRange object with an end point of another range.
moveStart: Changes the start position of the range. for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart(\rangeData.start = i;
但由于在 IE 中，Textarea 元素中的所有换行符都占 1 个字符，可以通过 alert(textarea.value.length) 查看，故要对上面的代码做部分处理： for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart(\
// Why? You can alert(textarea.value.length) if (textarea.value.charAt(i) == '\\n') { i ++; } }
rangeData.start = i;
既然得到了选区的起始位置和选区字符串的字符，很自然我们可以计算得到选区的末尾位置：
rangeData.end = rangeData.text.length + rangeData.start; 获取 Textarea 的光标位置的 getCursorPosition 函数方法整理如下： /**
* getCursorPosition Method *
* Created by Blank Zheng on 2010/11/12.
* Copyright (c) 2010 PlanABC.net. All rights reserved. *
* The copyrights embodied in the content of this file are licensed under the BSD (revised) open source license. */
function getCursorPosition(textarea) {
var rangeData = {text: \ textarea.focus();
if (textarea.setSelectionRange) { // W3C
rangeData.start= textarea.selectionStart; rangeData.end = textarea.selectionEnd;
rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end): \
