javascript - 更新/删除传播到不同节点的文本

Question

标题似乎不言自明，但问题其实很简单。想象一下下面的代码:

<div class="line">
    Some text node here. <span>Some nodeType 3 here.</span> 
    More text here. <span>And here as well.</span>
</div>

现在，我想使用 javascript 删除 div 的内容。所以像这样:

function deleteContent(from, to) { 
    // Some code to execute here
}

结果会是这样的:

<div class="line">
    Some text node here. <span>Some nodeType</span>
</div>

所以基本上，理论上，这就像使用 slice 函数 div.innerHTML.slice(from, to) 不同的是这只有在没有标签的情况下才有效在分区内。我已经考虑过创建文本范围并使用 deleteContent 删除内容，但我不知道这是否是最简单的方法。你有什么建议？

PS:我想要一个简洁且合乎逻辑的代码。

编辑

作为对 Felix 的回应:是的，我将 from 和 to 视为两个整数。对于空格，在我的应用程序中我必须分别理解每个空格。也就是说，  是两个字符。

Answer 1

我正在为我的 Rangy 做这件事库，我几乎准备好发布它了。同时，您可以使用类似以下的方法，它在大多数情况下都有效，但也有缺点:

• 不适用于 IE < 9
• 不考虑 block 元素和 <br> 的隐式换行符小号
• 不忽略不可见文本，例如 <script> 的内容和 <style>使用 CSS 的元素或元素内的文本 display设置为 none
• 不会折叠呈现页面上出现的空间
• 其他细节

现场演示:http://jsfiddle.net/nT28h/

代码:

function createRangeFromCharacterIndices(containerEl, start, end) {
    var charIndex = 0, range = document.createRange(), foundStart = false, stop = {};
    range.setStart(containerEl, 0);
    range.collapse(true);

    function traverseTextNodes(node) {
        if (node.nodeType == 3) {
            var nextCharIndex = charIndex + node.length;
            if (!foundStart && start >= charIndex && start <= nextCharIndex) {
                range.setStart(node, start - charIndex);
                foundStart = true;
            }
            if (foundStart && end >= charIndex && end <= nextCharIndex) {
                range.setEnd(node, end - charIndex);
                throw stop;
            }
            charIndex = nextCharIndex;
        } else {
            for (var i = 0, len = node.childNodes.length; i < len; ++i) {
                traverseTextNodes(node.childNodes[i]);
            }
        }
    }

    try {
        traverseTextNodes(containerEl);
    } catch (ex) {
        if (ex == stop) {
            return range;
        } else {
            throw ex;
        }
    }
}

function deleteBetweenCharacterIndices(el, from, to) {
    var range = createRangeFromCharacterIndices(el, from, to);
    range.deleteContents();
}