2

标题可能看起来不言自明，但问题实际上很简单。想象一下下面的代码：

<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)，只是这只有在 div 中没有标签时才有效。我已经考虑过创建一个文本范围并使用 deleteContent 删除内容，但我不知道这是否是最简单的方法。你有什么建议？

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

编辑

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

4

1 回答 1

2

我正在为我的Rangy库做这个，我几乎准备好发布它了。同时，您可以使用以下在大多数情况下都可以使用但有缺点的东西：

  • 在 IE < 9 中不起作用
  • 不考虑块元素和<br>s 的隐式换行符
  • 不会忽略不可见的文本，例如元素的内容或 CSS设置为<script>的<style>元素内的文本displaynone
  • 不会折叠空间，因为它们会出现在呈现的页面上
  • 其他细微之处

现场演示：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();
}
于 2012-04-24T14:05:34.323 回答