Необходимо иметь возможность добавлять текст в произвольное место в теге div в качестве маркера

Question

У меня есть тег div на моей странице, который может иметь произвольное количество дочерних узлов.Но есть определенная длина, на которой мне нужно нарезать его и показывать только нарезанный текст.Это код, который у меня есть:

var myDiv = document.getElementById("myDiv")
var range = document.body.createTextRange();
range.moveToElementText(myDiv);
range.move("character",150);
range.text = "!!!";
var html = myDiv.innerHTML;
html = html.slice(0,html.indexOf("!!!"));//+"...";
myDiv.innerHTML = html;

Я делаю это таким образом, чтобы я мог сохранить HTML-код на значение div и в то же время я могу убедиться, что я не нарезать вмежду тегом.Это прекрасно работает в IE, но, очевидно, не так в FirefoxКто-нибудь может мне помочь дать мне эквивалентный код для Firefox.

Заранее спасибо!

Answer 1

Вот некоторый код для извлечения HTML для первых 150 символов <div>. Он основан на этом ответе , и применяются те же предостережения о наивности реализации.

Демонстрационная версия: http://jsfiddle.net/mrEme/2/

Код:

function getTextNodesIn(node) {
    var textNodes = [];
    if (node.nodeType == 3) {
        textNodes.push(node);
    } else {
        var children = node.childNodes;
        for (var i = 0, len = children.length; i < len; ++i) {
            textNodes.push.apply(textNodes, getTextNodesIn(children[i]));
        }
    }
    return textNodes;
}

function copyCharacterRange(srcEl, destEl, start, end) {
    if (document.createRange && window.getSelection) {
        var range = document.createRange();
        range.selectNodeContents(srcEl);
        var textNodes = getTextNodesIn(srcEl);
        var foundStart = false;
        var charCount = 0, endCharCount;

        for (var i = 0, textNode; textNode = textNodes[i++]; ) {
            endCharCount = charCount + textNode.length;
            if (!foundStart && start >= charCount
                    && (start < endCharCount ||
                    (start == endCharCount && i < textNodes.length))) {
                range.setStart(textNode, start - charCount);
                foundStart = true;
            }
            if (foundStart && end <= endCharCount) {
                range.setEnd(textNode, end - charCount);
                break;
            }
            charCount = endCharCount;
        }

        destEl.appendChild(range.cloneContents());
        range.detach();
    } else if (document.selection && document.body.createTextRange) {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(srcEl);
        textRange.collapse(true);
        textRange.moveEnd("character", end);
        textRange.moveStart("character", start);

        destEl.innerHTML = textRange.htmlText;
    }
}

var srcEl = document.getElementById("src");
var destEl = document.getElementById("dest");

copyCharacterRange(srcEl, destEl, 0, 150);