Question

我有一串文字，我单独存储标记。例如：

var content = {
    text: "a little white rabbit hops",
    style: [
        {
            type: "strong",
            start: 0,
            length: 8
         },
         {
            type: "em",
            start: 2,
            length: 14
         }
    ]
}

然后我将其解析为html，但必须打开和关闭em标记两次才能正确格式化：

<strong>a <em>little</em></strong><em> white</em> rabbit hops

我的问题是：解析从DOM检索到的html以整合分离的em标记（或者可以想象为strong标记的最佳方法是什么：在我的场景中可以嵌套）。

如果我迭代NodeList个孩子（p.getElementsByTagName('em')），我将不得不做多个for循环并检查所有嵌套标签的开始/长度。必须有一种更简单的方法，但我没想过 - 有没有一个库可以处理这种格式化（或者是通过DOM直接执行此操作的方法）？

我没有使用jQuery，也不想将它添加到我的项目中。非常感谢任何帮助！

--- 修改 ---

澄清问题：这主要是关于将格式转换为HTML /格式，问题是处理标记嵌套的最佳方法：即使有两个em子标记，也有实际上只有一个em格式化的块（em子标记1和2的结束/开始是连续的）

Answer 1

以下是两个方向转换的两个函数。

首先将HTML字符串转换为您描述的内容结构：

function htmlToContent(html) {
    // The object to fill and return:
    var content = {
        text: '',
        style: []
    };
    // Keep track of recently closed tags (i.e. without text following them as of yet)
    var closedStyles = [];

    // Recursive function
    function parseNode(elem) {
        var style;
        if (elem.nodeType === 3) {
            // This is a text node (no children)
            content.text += elem.nodeValue;
            // Any styles that were closed should be added to the content 
            // style array, as they cannot be "extended" any more
            [].push.apply(content.style, closedStyles);
            closedStyles = [];
        } else {
            // See if we can extend a style that was closed
            if (!closedStyles.some(function (closedStyle, idx) {
                if (closedStyle.type === elem.nodeName) {
                    style = closedStyle;
                    // Style will be extended, so it's no longer closed
                    closedStyles.splice(idx, 1);
                    return true; // exit ".some"
                }
            })) {
                // No style could be extended, so we create a new one
                style = {
                    type: elem.nodeName,
                    start: content.text.length,
                    length: 0
                };
            }
            // Recurse into the child nodes:
            [].forEach.call(elem.childNodes, function(child) {
                parseNode(child);
            });
            // set style length and store it as a closed one
            style.length = content.text.length - style.start;
            closedStyles.push(style);
        }
    }
    // Create a node with this html
    wrapper = document.createElement('p');
    wrapper.innerHTML = html;
    parseNode(wrapper);
    // Flush remaining styles to the result
    closedStyles.pop(); // Discard wrapper
    [].push.apply(content.style, closedStyles);
    return content;
}

此函数首先将HTML字符串注入DOM包装器元素，然后递归到节点层次结构中以构建内容结构。此代码中的主要思想是它首先在临时closedStyles数组中收集闭合节点。只有当确定这些不能再用于与即将到来的节点合并时，才会将它们添加到内容结构中。在遇到文本节点时会发生这种情况。但是，如果标签关闭并再次打开而没有中间文本，则匹配样式将从此closedStyles数组中找到并提取，并重新用于扩展。

相反的功能可以定义如下：

function contentToHtml(content) {
    var tags = [];
    // Build list of opening and closing tags with the offset of injection
    content.style.forEach(function (tag) {
        tags.push({
            html: '<' + tag.type + '>',
            offset: tag.start
        }, {
            html: '</' + tag.type + '>',
            offset: tag.start + tag.length
        });
    });
    // Sort this list by decreasing offset:
    tags.sort(function(a, b) {
        return b.offset - a.offset;
    });
    var html = '';
    var text = content.text;
    // Insert opening and closing tags from end to start in text
    tags.forEach(function (tag) {
        // Prefix the html with the open/close tag and the escaped text that follows it
        html = tag.html + textToHtml(text.substr(tag.offset)) + html;
        // Reduce the text to the part that still needs to be processed
        text = text.substr(0, tag.offset);
    });
    // Remaining text:
    html = textToHtml(text) + html;
    // Create a node with this html, in order to get valid html tag sequences
    p = document.createElement('p');
    p.innerHTML = html;
    // p.innerHTML will change here if html was not valid.
    return p.innerHTML;
}

此函数首先将每个样式转换为两个对象，一个表示开始标记，另一个表示结束标记。然后将这些标签插入到正确位置的文本中（从文本的那一段到开头）。最后应用你自己描述的技巧：生成的html放在一个dom对象中并再次取出它。这样就可以修复任何无效的HTML标记序列。

该函数使用textToHtml效用函数，可以定义如下：

function textToHtml(text) {
    // See http://www.w3.org/International/questions/qa-escapes#use
    return text.replace('&', '&amp;').replace('<', '&lt;').replace('>', '&gt;');
}

您可以在此fiddle中看到它的工作原理，其中使用的示例HTML字符串也包含相同类型的嵌套标记。这些都得到了维护。

合并嵌套的重叠<strong>和<em>标记

1 个答案: