如何修改我的html truncate函数以允许链接和跨度？

Question

我目前正在使用以下函数来截断某些元素的文本内容，这些元素可能包含也可能不包含其他元素，例如<a>或<span>。

之前尝试了几种基于正则表达式的解决方案，我已经确定了这种方法，因为它无限快，更可靠。

但是，我希望任何<span>或<a>元素在整个输出中保持不变，即使它们的内容被截断也是如此。现在因为我目前只过滤文本节点，所以这是不可能的。

无论如何我可以修改下面的功能以保持上述元素的完整性吗？

var cloneNode = rootNode.cloneNode(true);
var currentNode = cloneNode;
var ni = document.createNodeIterator(currentNode, NodeFilter.SHOW_TEXT);
var frag = document.createDocumentFragment();
var len = 0;
var max = 300;



while (currentNode = ni.nextNode()) {
    if (currentNode.parentNode === cloneNode) {
        if (len + currentNode.textContent.length > max){
            currentNode.textContent = currentNode.textContent.substring(0, max - len).replace(/\s*$/,"");

            var ellipsis = document.createElement('span');
            ellipsis.classList.add('inline_ellipsis');
            ellipsis.appendChild(document.createTextNode('... '));


            var seeMore = document.createElement('button');
            seeMore.classList.add('comment_truncated');
            seeMore.appendChild(document.createTextNode('See more'));


            frag.appendChild(currentNode);
            frag.appendChild(ellipsis);
            frag.appendChild(seeMore);

            self.truncatedElement = rootNode;

            break;
        }
        else{
            frag.appendChild(currentNode);
        }
    }
    else{
        frag.appendChild(currentNode.parentNode);
    }
    len += currentNode.textContent.length;
}

rootNode.setAttribute('data-fullcontent', rootNode.innerHTML);

rootNode.innerHTML = '';
rootNode.appendChild(frag);

rootNode.setAttribute('data-truncatedcontent', rootNode.innerHTML);