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：きちんと論理的なコードが欲しいのですが。

編集

フェリックスへの応答として：はい、私はfromとtoを2つの整数として扱います。また、空白については、私のアプリケーションでは、各空白を個別に理解する必要があります。つまり、&nbsp;&nbsp;2文字です。

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 に答える