blocks|key|45524|text|我知道它不是用C语言编写的，但是这个演示文稿可能会给你一些关于如何有效地解决这个问题的意见。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|45525|https://web.archive.org/web/20120115060003/http://cuddle.googlecode.com/hg/talk/lex.html#landing-slide|offset|length|45526|根据您的初始需求，我还用JavaScript编写了一个非常简单的解析器示例(同样不是用C编写的，但希望您也了解JS+)，这意味着它不会解析任何属性，也不会处理自结束标记和许多其他应该根据HTML规范处理的事情。它将生成如下格式的解析树：|45527|{
++++cn:+[{
++++++++tag:+'html',
++++++++cn:+[{
++++++++++++tag:+'body',
++++++++++++cn:+[
++++++++++++++++{+tag:+'h1',+cn:+['test']+},
++++++++++++++++'+some+text+',
++++++++++++++++...
++++++++++++]
++++++++}]+
++++}]
}|code-block|syntax|javascript|45528|下面是代码和小提琴：http://jsfiddle.net/LUpyZ/3/|45529|请注意，空白不会被忽略，并将在文本节点中捕获。|45530|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+'+%2B+i;
++++++++++++}

++++++++++++tag+=+'';

++++++++++++nodesStack.pop();

++++++++++++currentNode+=+currentNode.parentNode;

++++++++++++return+parseText;++++++++++++
++++++++}

++++++++assertValidTagNameChar(token);

++++++++tag+%2B=+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+%2B=+token;

++++++++return+parseOpenTag;
++++}

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

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

++++++++++++return+parseTag;
++++++++}

++++++++text+%2B=+token;

++++++++return+parseText;
++++}

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

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

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

++++++++return+parseTree;
++++};
})();

console.log(parseHTML(html));|45531|entityMap|0|LINK|mutability|MUTABLE|url|1|http://jsfiddle.net/LUpyZ/3/^0|0|0|2U|0|0|0|0|A|S|1|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@$D|13|E|14|1|15]]|A|$]]|$1|F|3|G|5|6|7|16|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|17|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|18|8|@]|9|@$D|19|E|1A|1|1B]]|A|$]]|$1|O|3|P|5|6|7|1C|8|@]|9|@]|A|$]]|$1|Q|3|R|5|J|7|1D|8|@]|9|@]|A|$K|L]]|$1|S|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|C]]|Z|$5|V|W|X|A|$Y|10]]]]

<p>I know it isin't in C, but that presentation might give you some input on how you could efficiently tackle the problem.</p>

<p><a href="https://web.archive.org/web/20120115060003/http://cuddle.googlecode.com/hg/talk/lex.html#landing-slide" rel="nofollow noreferrer">https://web.archive.org/web/20120115060003/http://cuddle.googlecode.com/hg/talk/lex.html#landing-slide</a></p>

<p>I also wrote a very simple parser example in JavaScript (again not in C, but hopefully you know JS as well) based on your initial requirements, meaning that it will not parse any attributes and do not handle self-closing tags and many other things that should be handled according to the HTML specs. It will produce a parse tree in this format:</p>

<pre><code>{
    cn: [{
        tag: 'html',
        cn: [{
            tag: 'body',
            cn: [
                { tag: 'h1', cn: ['test'] },
                ' some text ',
                ...
            ]
        }] 
    }]
}
</code></pre>

<p>Here's the code and fiddle: <a href="http://jsfiddle.net/LUpyZ/3/" rel="nofollow noreferrer">http://jsfiddle.net/LUpyZ/3/</a></p>

<p>Note that white space is not ignored and will be captured in text nodes.</p>

<pre><code>var html = '&lt;html&gt;&lt;body&gt;&lt;h1&gt;test&lt;/h1&gt; some text &lt;div&gt; &lt;p&gt;text&lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;';

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 === '&gt;') {
            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 === '&gt;') {
            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 === '&lt;') {

            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 &lt; len; i++) {
            stateFn = stateFn(html[i]);
        }

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

        return parseTree;
    };
})();

console.log(parseHTML(html));
</code></pre>


<p>I'd like to ask what is the best way to parse a simple html code into DOM Node tree like this one:</p>

<p><img src="https://i.stack.imgur.com/V2vrr.gif" alt="example tree"></p>

<p>Here are some constraints I am facing:</p>

<ul>
<li>HTML code will have only pair tags, no attributes and I've to ignore spaces</li>
<li>There can be Text between tags like <code>&lt;p&gt;</code>, <code>&lt;h1&gt;</code>, <code>&lt;a&gt;</code> etc.</li>
<li>I can't use libraries</li>
</ul>

<p>I was thinking about regex, but never tried it so.. Any ideas?</p>

<p>Every node in the tree is this struct:</p>

<pre><code>  typedef struct tag
  {
      struct tag* parent;
      struct tag* nextSibling;
      struct tag* previousSibling;
      struct tag* firstChild;
      struct tag* lastChild;     
      char* name;
      char* text;     
  }node;
</code></pre>


Parsing simple HTML into tree

我想问一下，将简单的html代码解析成DOM Node树的最佳方法是什么：​​以下是我面临的一些限制：HTML代码将只有成对的标记，没有属性，并且我必须忽略空格标记之间可以有文本，如<p>、<h1>、<a>等。我不能使用库< code >H210</code>我正在考虑正则表达式，但从未尝试过..有什么想法吗？树中的每...

问将简单的HTML解析为树
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将简单的HTML解析为树EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将简单的HTML解析为树
EN