7

在您开始链接到正则表达式之前，匹配开放标签（XHTML 自包含标签除外）阅读整个问题。

我想编写一个 HTML 解析器（仅适用于 HTML 5，它应该检查它是否是 HTML 5，如果不是，则返回错误）只是为了让自己学习一些新东西，但我不知道什么是最好的方法去做。让我给你看一个例子：

<!doctype html>
<html>
<head>
    <!-- #TITLE -->
    <title>Just an example</title>
</head>
<body>
    <p class='main'>Simple paragraph with an <a href='/a.html'>anchor</a></p>
</body>
</html>

现在，谁能告诉我如何解析这个（最终形式无关紧要，只是一个概念）？我有一些想法（比如使用递归函数，或者引用包含实际标签的数组），但我不认为这些是最好的概念。我应该逐个检查 char 然后调用特定函数还是使用正则表达式（如下所述）？

通过使用正则表达式，我并不是指整个标签的一种模式。我的意思是对标记名使用一种模式（如果该模式返回 true，则检查下一个模式），然后用于属性（如果该模式返回 true，请再次检查），最后检查标签的结尾。

找到标签时该怎么办？运行一个检查标签的循环（如果找到标签，一次又一次地调用它......）？但对我来说，当函数 X 调用 Y 调用 X 时，它似乎是递归函数或至少是半递归的......

所以最后一个问题是：最有效和最正确的结构是什么？

4

2 回答 2

6

@Kian 的回答提到使用词法分析器，但就算法而言，我认为您会想要使用递归。HTML毕竟是一个递归结构：

<div>
    <div>
        <div>
        </div>
    </div>
</div>

这是一个简单的 JS 示例——尽管它不是一个完整的实现。（我没有包含对<empty />元素的支持；for <!-- comments -->; for &entities;; for xmlns:namespaces... 编写一个完整的 HTML 或 XML 解析器是一项艰巨的任务，所以不要掉以轻心）

该解决方案明显跳过了词法分析的过程，但我故意省略了这一点，以将我的答案与@Kian 的答案进行对比。

var markup = "<!DOCTYPE html>\n"+
             "<html>\n"+
             " <head>\n"+
             "   <title>Example Input Markup</title>\n"+
             " </head>\n"+
             " <body>\n"+
             "   <p id=\"msg\">\n"+
             "     Hello World!\n"+
             "   </p>\n"+
             " </body>\n"+
             "</html>";

parseHtmlDocument(markup);

// Function definitions

function parseHtmlDocument(markup) {
    console.log("BEGIN DOCUMENT");
    markup = parseDoctypeDeclaration(markup);
    markup = parseElement(markup);
    console.log("END DOCUMENT");
}

function parseDoctypeDeclaration(markup) {
    var regEx = /^(\<!DOCTYPE .*\>\s*)/i;
    console.log("DOCTYPE DECLARATION");
    var matches = regEx.exec(markup);
    var doctypeDeclaration = matches[1];
    markup = markup.substring(doctypeDeclaration.length);
    return markup;
}

function parseElement(markup) {
    var regEx = /^\<(\w*)/i;
    var matches = regEx.exec(markup);
    var tagName = matches[1];
    console.log("BEGIN ELEMENT: "+tagName);
    markup = markup.substring(matches[0].length);
    markup = parseAttributeList(markup);
    regEx = /^\>/i;
    matches = regEx.exec(markup);
    markup = markup.substring(matches[0].length);
    markup = parseNodeList(markup);
    regEx = new RegExp("^\<\/"+tagName+"\>");
    matches = regEx.exec(markup);
    markup = markup.substring(matches[0].length);
    console.log("END ELEMENT: "+tagName);
    return markup;
}

function parseAttributeList(markup) {
    var regEx = /^\s+(\w+)\=\"([^\"]*)\"/i;
    var matches;
    while(matches = regEx.exec(markup)) {
        var attrName = matches[1];
        var attrValue = matches[2];
        console.log("ATTRIBUTE: "+attrName);
        markup = markup.substring(matches[0].length);
    }
    return markup;
}

function parseNodeList(markup) {
    while(markup) {
        markup = parseTextNode(markup);
        var regEx = /^\<(.)/i;
        var matches = regEx.exec(markup);
        if(matches[1] !== '/') {

            markup = parseElement(markup);
        }
        else {
            return markup;
        }
    }
}

function parseTextNode(markup) {
    var regEx = /([^\<]*)\</i;
    var matches = regEx.exec(markup);
    markup = markup.substring(matches[1].length);
    return markup;
}

理想情况下，这些函数中的每一个都非常接近地映射到XML 规范中定义的语法。例如，规范定义element如下：

element    ::=    EmptyElemTag | STag content ETag

...所以理想情况下，我们希望parseElement()函数看起来更像这样：

function parseElement(markup) {
    if(nextTokenIsEmptyElemTag) { // this kind of logic is where a lexer will help!
        parseEmptyElemTag(markup);
    }
    else {
        parseSTag(markup);
        parseContent(markup);
        parseETag(markup);
    }
}

...但我在写我的例子时偷工减料，所以它并没有尽可能地反映实际的语法。

于 2013-08-02T01:42:14.820 回答
5

编写基于 SGML 的解析器的最大部分是词法分析器。这是一篇关于构建自定义词法分析器的文章：http: //onoffswitch.net/building-a-custom-lexer/。

在我看来，正则表达式可能是矫枉过正/不合适的——你想匹配 HTML 标记，逐个字符的解析可能是最好的方法。

于 2013-08-01T16:44:22.540 回答