Simpler HTML2DOM Ansatz

    • C#

      Simpler HTML2DOM Ansatz

      HTML ist eine sogenannte Auszeichnungssprache, das ist, der Text wird (syntaktisch) so strukturiert, dass sie in erster Linie maschinenlesbar wird, aus der dann' ein Parser ein sogenanntes Document Object Model (DOM) generiert. Das DOM ist dabei hierarchisch aufgebaut (Wurzel, Eltern/Kind-Knoten) und erleichtert weiterführende Operationen wie das Rendern der Webseite, oder der Manipulation (etwa mit Javascript) von Inhalten eben dieser Webseite.

      Im Folgenden soll ein simpler DOM Generator präsentiert werden.

      Der Prozess besteht aus zwei Phasen:

      In der ersten Phase wird der Text tokenisiert (die Zeichen also in logische Einheiten zusammengefasst, im gewissen Sinne kontextualisiert):

      Spoiler anzeigen

      C#-Quellcode

      1. enum TokenType
      2. {
      3. BracketOpen,
      4. BracketClose,
      5. Slash,
      6. String
      7. }
      9. struct Token
      10. {
      11. public TokenType TokenType { get; set; }
      12. public string? Data { get; set; }
      13. }
      15. IEnumerable<Token> Tokenize(string html)
      16. {
      17. Dictionary<char, TokenType> TOKENS = new Dictionary<char, TokenType>()
      18. {
      19. { '<', TokenType.BracketOpen },
      20. { '>', TokenType.BracketClose },
      21. { '/', TokenType.Slash },
      22. };
      23. StringBuilder charAccum = new StringBuilder();
      25. bool bracketOpened = false;
      26. int whiteSpaces = 0;
      28. for (int i = 0; i < html.Length; i++)
      29. {
      30. var c = html[i];
      32. if (TOKENS.ContainsKey(c))
      33. {
      34. if (charAccum.Length > 0)
      35. {
      36. yield return new Token()
      37. {
      38. Data = charAccum.ToString(),
      39. TokenType = TokenType.String
      40. };
      41. charAccum.Clear();
      42. }
      44. yield return new Token()
      45. {
      46. Data = c + "",
      47. TokenType = TOKENS[c]
      48. };
      50. if (c == '<')
      51. bracketOpened = true;
      52. else if (c == '>')
      53. bracketOpened = false;
      54. }
      55. else
      56. {
      57. if (bracketOpened && c == ' ')
      58. {
      59. if (whiteSpaces > 0)
      60. {
      61. continue;
      62. }
      63. else whiteSpaces++;
      64. }else if (bracketOpened && c!=' ')
      65. {
      66. whiteSpaces = 0;
      67. }
      69. charAccum.Append(c);
      70. }
      72. }
      73. }


      Im zweiten Schritt wird' aus den Tokens dann das DOM generiert:
      Spoiler anzeigen

      C#-Quellcode

      1. class HtmlNode
      2. {
      3. private StringBuilder _attributeBuilder = new StringBuilder();
      4. private StringBuilder _contentBuilder = new StringBuilder();
      6. public List<HtmlNode> Children { get; private set; } = new List<HtmlNode>();
      8. public string? Type { get; private set; }
      9. public string Attribute => _attributeBuilder.ToString();
      10. public string Content => _contentBuilder.ToString();
      12. public void PutAttribute(string? data)
      13. {
      14. string[]? args = data?.Split(' ');
      15. if (args == null) return;
      16. Type = args[0];
      18. _attributeBuilder.Append(string.Join(' ', args.Skip(1)));
      19. }
      21. public void PutContent(string? data)
      22. {
      23. _contentBuilder.Append(data);
      24. }
      26. public override string ToString()
      27. {
      28. return $"[{Type}] {Content}";
      29. }
      30. }
      32. HtmlNode Html2DOM(IEnumerable<Token> tokens)
      33. {
      34. HtmlNode root = new HtmlNode();
      35. Stack<HtmlNode> nodeStack = new Stack<HtmlNode>();
      37. var enumerator = tokens.GetEnumerator();
      38. while (enumerator.MoveNext())
      39. {
      40. var token = enumerator.Current;
      42. if (token.TokenType == TokenType.BracketOpen)
      43. {
      44. enumerator.MoveNext();
      45. HtmlNode currentNode = new();
      47. if(enumerator.Current.TokenType == TokenType.Slash)
      48. {
      49. nodeStack.Push(root);
      51. enumerator.MoveNext();
      52. var endingType = enumerator.Current.Data;
      54. var endingTag = nodeStack.Pop();
      55. List<HtmlNode> nodeAccumulator = new List<HtmlNode>();
      57. while (endingTag.Type != null && !endingTag.Type.Equals(endingType))
      58. {
      59. nodeAccumulator.Add(endingTag);
      60. endingTag = nodeStack.Pop();
      61. }
      63. foreach (var child in nodeAccumulator)
      64. {
      65. endingTag.Children.Add(child);
      66. }
      68. root = nodeStack.Pop();
      69. root.Children.Add(endingTag);
      70. }
      71. else
      72. {
      73. nodeStack.Push(root);
      74. currentNode.PutAttribute(enumerator.Current.Data);
      75. root = currentNode;
      76. }
      77. continue;
      78. }
      80. if (token.TokenType == TokenType.BracketClose) continue;
      81. root.PutContent(token.Data);
      82. }
      83. return root;
      84. }



      Möglicher Aufruf:

      C#-Quellcode

      1. var dom = Html2DOM(Tokenize("<html><head><link a=b></head><body><p>Test</p><b>Test</b></body>"));


      Viel Spaß.
      Und Gott alleine weiß alles am allerbesten und besser.