如何将简单HTML解析为树?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (209)

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

以下是我面临的一些制约因素:

  • HTML代码将只有对标记,没有属性,我不得不忽略空格
  • 标记之间可以有文本,例如<p><h1><a>
  • 我不能用图书馆

我在想regex,但从来没试过.有什么想法吗?

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

  typedef struct tag
  {
      struct tag* parent;
      struct tag* nextSibling;
      struct tag* previousSibling;
      struct tag* firstChild;
      struct tag* lastChild;     
      char* name;
      char* text;     
  }node;
提问于
用户回答回答于

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

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

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

{
    cn: [{
        tag: 'html',
        cn: [{
            tag: 'body',
            cn: [
                { tag: 'h1', cn: ['test'] },
                ' some text ',
                ...
            ]
        }] 
    }]
}

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

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));

热门问答

腾讯会议共享屏幕,其他人收到的是黑屏?

腾讯云音视频 支持 移动端h5吗( 不是小程序的)?

shixin

腾讯 · 高级产品经理 (已认证)

推荐

实时音视频TRTC的Web版是基于WebRTC的方案,需要浏览器的对WebRTC的支持,支持WebRTC的浏览器就可以。但是,移动端浏览器对WebRTC支持的情况并不好,建议使用小程序版。

腾讯云IoT物联平台中如何自定义Topic?

DylanRichard

腾讯 · 产品经理 (已认证)

万物互联的时代,欢迎来到IoT的世界
推荐已采纳
第二个是物联网通信平台(IoT Hub)的,https://cloud.tencent.com/document/product/634/32546。目前物联网开发平台(IoT explorer)只支持基于数据模板协议的接入(文档 https://cloud.tencent.co...... 展开详请

如何用命令修改腾讯云解析目标ip?

氧化先生道可道 非常道 名可名 非常名
推荐
可以,参考: https://cns.api.qcloud.com/v2/index.php? &<公共请求参数> &Action=RecordCreate &domain=qcloud.com &subDomain=www &recordType=A &recordLine=默...... 展开详请

组队匹配完整流程是怎样的?感觉缺少API支持?

您好,matchgroup匹配成功后,小组成员会进入同一个房间和同一个队伍,这个API需要传玩家ID,通过邀请好友进房间就能拿到玩家的id,解散房间后再调用matchgroup,在没有解散房间不能调用matchGroup 接口。

SCF使用了k8s或docker容器技术吗?

Mason-Serverless

腾讯 · 产品经理 (已认证)

推荐

SCF的新架构使用的轻量化虚拟机技术,同时MVM里内嵌的有docker,但是没有使用K8S

所属标签

扫码关注云+社区

领取腾讯云代金券