首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >将简单的HTML解析为树

将简单的HTML解析为树
EN

Stack Overflow用户
提问于 2013-03-27 05:44:13
回答 1查看 2K关注 0票数 7

我想问一下,将简单的html代码解析成DOM Node树的最佳方法是什么:

以下是我面临的一些限制:

  • HTML代码将只有成对的标记,没有属性,并且我必须忽略空格
  • 标记之间可以有文本,如<p><h1><a>等。
  • 我不能使用库< code >H210

我正在考虑正则表达式,但从未尝试过..有什么想法吗?

树中的每个节点都是这个结构:

代码语言:javascript
复制
  typedef struct tag
  {
      struct tag* parent;
      struct tag* nextSibling;
      struct tag* previousSibling;
      struct tag* firstChild;
      struct tag* lastChild;     
      char* name;
      char* text;     
  }node;
EN

回答 1

Stack Overflow用户

发布于 2013-03-28 15:34:47

我知道它不是用C语言编写的,但是这个演示文稿可能会给你一些关于如何有效地解决这个问题的意见。

https://web.archive.org/web/20120115060003/http://cuddle.googlecode.com/hg/talk/lex.html#landing-slide

根据您的初始需求,我还用JavaScript编写了一个非常简单的解析器示例(同样不是用C编写的,但希望您也了解JS ),这意味着它不会解析任何属性,也不会处理自结束标记和许多其他应该根据HTML规范处理的事情。它将生成如下格式的解析树:

代码语言:javascript
复制
{
    cn: [{
        tag: 'html',
        cn: [{
            tag: 'body',
            cn: [
                { tag: 'h1', cn: ['test'] },
                ' some text ',
                ...
            ]
        }] 
    }]
}

下面是代码和小提琴:http://jsfiddle.net/LUpyZ/3/

请注意,空白不会被忽略,并将在文本节点中捕获。

代码语言:javascript
复制
var html = '<html><body><h1>test</h1> some text <div> <p>text</p></div></body></html>';

var parseHTML = (function () {
    var nodesStack = [],
        i = 0,
        len = html.length,
        stateFn = parseText,
        parseTree = { cn: [] },
        alphaNumRx = /\w/,
        currentNode = parseTree,
        text = '',
        tag = '',
        newNode;

    function parseTag(token) {
        if (token === '/') {
            return parseCloseTag;
        }

        i--; //backtrack to first tag character
        return parseOpenTag;
    }

    function parseCloseTag(token) {
        if (token === '>') {
            if (currentNode.tag !== tag) {
                throw 'Wrong closed tag at char ' + i;
            }

            tag = '';

            nodesStack.pop();

            currentNode = currentNode.parentNode;

            return parseText;            
        }

        assertValidTagNameChar(token);

        tag += token;

        return parseCloseTag;
    }

    function parseOpenTag(token) {
        if (token === '>') {
            currentNode.cn.push(newNode = { tag: tag, parentNode: currentNode,  cn: []});
            nodesStack.push(currentNode = newNode);

            tag = '';

            return parseText;
        }

        assertValidTagNameChar(token);

        tag += token;

        return parseOpenTag;
    }

    function parseText(token) {
        if (token === '<') {

            if (text) {
                currentNode.cn.push(text);
                text = '';
            }

            return parseTag;
        }

        text += token;

        return parseText;
    }

    function assertValidTagNameChar(c) {
        if (!alphaNumRx.test(c)) {
            throw 'Invalid tag name char at ' + i;
        }
    }

    return function (html) {
        for (; i < len; i++) {
            stateFn = stateFn(html[i]);
        }

        if (currentNode = nodesStack.pop()) {
            throw 'Unbalanced tags: ' + currentNode.tag + ' is never closed.';
        }

        return parseTree;
    };
})();

console.log(parseHTML(html));
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/15647971

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档