Html-Code Parser und Renderer

    • Beta
    • Open Source

    Es gibt 41 Antworten in diesem Thema. Der letzte Beitrag () ist von nikeee13.

      Der Lexer geht erstmal durch den ganzen Code durch und filtert sogenannte Tokens raus, also z.B. /, <, >, =,keyword,text,number. Diese schiebt er in eine Liste, oder ggf.auch natürlich über yield(nicht die beste performance), was automatisch eine StateMachine erzeugt und lexer werden häufig als StateMachine implementiert, das ganze selbst als StateMachine(oder auch auf andere Art, gibt ein paar Möglichkeiten) zu implementieren ist natürlich performanter, aber die Syntax ist denke ich ganz nett über eine Coroutine...
      Und diese Tokens werden anschließend erst von dem parser durchgegangen und analysiert, erst dann findet also tatsächliche Syntax Analyse und DOM aufbau statt. Das ganze logisch auf diese Art zu trennen vereinfacht die logische Strukturierung, die Erweiterbarkeit(neuer HTML Standard z.B. muss eben nicht alles neu gemacht werden) und die Fehlererkennung(und Ignorierung) dürfte auch vereinfacht werden.

      Das ist auch die Standardherangehensweise für die meisten Parser und Compiler. Ob dies für HTML genauso gilt wie für sonstige Sprachen kann ich dir nicht sicher sagen(weiß nicht was die Browser machen), aber ich denke es ist trotzdem sinnvoll und gehe zumindest davon aus, dass es für HTML gilt wie für alles andere halt auch^^
      Ich wollte auch mal ne total überflüssige Signatur:
      ---Leer---

      jvbsl schrieb:

      und die Fehlererkennung(und Ignorierung)

      Kannst du das konkretisieren? Wie sähe das im Bezug auf HTML aus? Mir fiele da nur das Fehlen der End-Tags ein.

      Lieben Dank.
      Und Gott alleine weiß alles am allerbesten und besser.

      Fehlen von end tags oder endtag ohne starttag bei Anführungszeichen..viel mehr fällt mir im Moment nicht wirklich ein. Das merkst du evtl mit der Zeit beim testen von Webseiten, was da nötig ist
      Edit: oder natürlich >< ohne Bedeutung
      Ich wollte auch mal ne total überflüssige Signatur:
      ---Leer---

      Also die obige Implementierung hat keine Probleme mit dem Fehlen von End-Tags:

      Quellcode

      1. <style>#lol{color:red;}</style><h1 id="lol">a<p>b


      Wird erfolgreich geparst:


      Vergleich das mal mit Webkit: Ist fast identisch.

      jvbsl schrieb:

      oder endtag ohne starttag bei Anführungszeichen

      Beispiel?

      jvbsl schrieb:

      oder natürlich >< ohne Bedeutung

      Beispiel?

      Lieben Dank.
      Und Gott alleine weiß alles am allerbesten und besser.

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „φConst“ ()

      Quellcode

      1. </head><head>bla<body>
      3. <h1 id="lol><a src="...
      5. <head><><<</head>

      So in die Richtung..

      Und ich behaupte nicht, dass es nicht möglich ist, das auf einmal zu parsen. Ist sogar sehr gut möglich. Früher war das Normal das parsing direkt zu machen
      Ich wollte auch mal ne total überflüssige Signatur:
      ---Leer---

      eigt. meinte ich title statt head aber sonst prinzipiell schon. Und waren nur Dinge die mir eingefallen sind, wie die dann von jeweiligen Engines geparst werden bzw. was die "richtige" Herangehensweise ist: Keine Ahnung - schließlich ist die Syntax ansich einfach nur falsch^^
      Ich wollte auch mal ne total überflüssige Signatur:
      ---Leer---

      Hier mal ein Tokenizer:

      Spoiler anzeigen

      C#-Quellcode

      1. public class HtmlTokenizer
      2. {
      3. public StringBuilder RawHtmlSource { get; private set; }
      4. public List<Token> Tokens { get; private set; }
      6. public HtmlTokenizer(string rawHtmlSrc)
      7. {
      8. RawHtmlSource = new StringBuilder("<html>" + rawHtmlSrc + "</html>;");
      9. Tokens = new List<Token>();
      10. }
      12. public void Tokenize()
      13. {
      14. bool possibleTagFound = false;
      15. bool foundString = false;
      16. bool letterFound = true;
      17. bool endFound = false;
      19. Token currentToken = new Token();
      22. for (int i = 0; i < RawHtmlSource.Length - 1; i++)
      23. {
      24. char c = RawHtmlSource[i];
      25. char c1 = RawHtmlSource[i + 1];
      27. if (c == '"')
      28. foundString = !foundString;
      30. switch (possibleTagFound)
      31. {
      32. case true:
      33. currentToken.Content.Append(c);
      35. if (!foundString && c == '/')
      36. endFound = true;
      37. if (!foundString && char.IsLetter(c))
      38. letterFound = true;
      40. if (endFound && c == '>' && letterFound)
      41. currentToken.Type = Token.TokenType.EndTag;
      42. else if (!endFound && !foundString && letterFound && c == '>')
      43. currentToken.Type = Token.TokenType.BeginTag;
      45. if (currentToken.Type == Token.TokenType.Content || currentToken.Type == Token.TokenType.Default)
      46. continue;
      48. Tokens.Add(currentToken);
      49. currentToken = new Token()
      50. {
      51. Type = Token.TokenType.Content
      52. };
      54. possibleTagFound = false;
      55. letterFound = false;
      56. endFound = false;
      58. break;
      59. case false:
      61. currentToken.Content.Append(c);
      63. if (!foundString && c == '<')
      64. {
      65. if (c1 != '/' && !char.IsLetter(c1))
      66. continue;
      68. if (currentToken.Type == Token.TokenType.Content && (char.IsLetter(c1) || c1 == '/') && currentToken.Content.Length > 0)
      69. {
      70. currentToken.Content.Remove(currentToken.Content.Length - 1, 1);
      71. if (currentToken.Content.Length > 0)
      72. Tokens.Add(currentToken);
      74. currentToken = new Token();
      75. currentToken.Content.Append("<");
      76. }
      77. possibleTagFound = true;
      78. }
      81. break;
      82. }
      83. }
      85. if (currentToken.Content.Length > 0)
      86. Tokens.Add(currentToken);
      88. }
      89. }


      C#-Quellcode

      1. public class Token
      2. {
      3. public enum TokenType
      4. {
      5. BeginTag,
      6. Content,
      7. EndTag,
      8. Default
      9. };
      11. public TokenType Type { get; set; }
      12. public StringBuilder Content { get; set; }
      14. public Token()
      15. {
      16. Type = TokenType.Default;
      17. Content = new StringBuilder();
      18. }
      20. }





      Aufruf:

      C#-Quellcode

      1. class Program
      2. {
      3. static void Main(string[] args)
      4. {
      5. string html = "<html id=\"lol\">x<p><lol>x</lol><<<>>></html><<><<>>><><><html><title>";
      7. HtmlTokenizer tokenizer = new HtmlTokenizer(html);
      8. tokenizer.Tokenize();
      10. foreach (var token in tokenizer.Tokens)
      11. Console.WriteLine(token);
      13. Console.Read();
      15. }
      16. }


      Ergebnis:


      In der Tat ist das sehr hilfreich.
      So können im Quelltext auch Sonderzeichen stehen..

      Dein Beispiel ergibt folgende Anordnung:


      Das deckt sich mit Google Chrome:


      Beachte das der Tokenizer auch "bla<><<" als Content kennzeichnet.

      _
      Und Gott alleine weiß alles am allerbesten und besser.

      Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „φConst“ ()

      Ich kenns zwar eher so, dass der lexer wirklich noch nichts HTML spezifisches großartig erkennt und das eher der Parser macht, also so in diese Richtung:
      codereview.stackexchange.com/q…ml-xhtml-xml-tokenization
      es werden nur <,>, /, = und ähnliches als tokens erkannt.
      Aber ansonsten schon ganz nette Arbeit.
      Ich wollte auch mal ne total überflüssige Signatur:
      ---Leer---

      deins ist immernoch ein Tokenizer(Lexer), der aber schon Dinge macht, die man meist gerne dem Parser überlässt.
      Wie gesagt falsch ists nicht.

      Nur ist der Lexer/Tokenizer meist wirklich sehr einfach und allein am Tokenizer erkennt man nicht unbedingt die Sprache.
      Auch ein C Tokenizer hätte <, >, ", / als Tokens, zwar mit einer anderen Bedeutung, aber das würde dann vom Parser interpretiert werden
      Ich wollte auch mal ne total überflüssige Signatur:
      ---Leer---

      ich wüsste nicht das man soetwas macht, denn das würde nur sehr vieles verkomplizieren und bringt einem vermutlich auch nicht so viel geschwindigkeit...
      Ich wollte auch mal ne total überflüssige Signatur:
      ---Leer---

      Mir fiele ein wo man parallelisieren könnte:

      Die Token-Klasse besteht aus
      TokenTyp und Content.

      Um additionale Informationen wie Tag-Name, Tag-Attribute und ähnliches zu extrahieren, könnte man eine Methode .ProcessToken(), im neuen Thread ausführen, die eben
      den Tag prozessiert.

      _
      Und Gott alleine weiß alles am allerbesten und besser.

      Ee gibt halt trotzdem token, die von zwei zeichen abhängig sind. Das könnte mit threading probleme machen. Für js z.b. == ist nicht dasselbe wie = =

      Also was man eher parallelisiert sind unterschiedliche Dokumente. Z.b. die ganzen css und js...
      Ich wollte auch mal ne total überflüssige Signatur:
      ---Leer---

      Hier mal ein Tokenizer + DOM-Repräsentation:
      Tokenizer.zip

      Funktioniert eigentlich_souverän.

      HTML-Quellcode

      1. string html = "<p>LOL<p>rofl</p><html>TEST!<>><<<>>><<</html>";

      ergibt:

      p
      __->_LOL
      _____p
      ______->rofl
      _____html
      _________->TEST!<>><<<>>><<<

      _
      Und Gott alleine weiß alles am allerbesten und besser.

      Fehlerkorrektur Alpha

      Durch die Methode
      Spoiler anzeigen

      C#-Quellcode

      1. public void Analyze()
      2. {
      3. Dictionary<string, int> knownTags = new Dictionary<string, int>();
      4. Token endToken = null;
      6. for (int i = 0; i < Tokens.Count; i++)
      7. {
      8. Token currentToken = Tokens[i];
      9. if (currentToken.Type == Token.TokenType.Content || currentToken.Type == Token.TokenType.Default) continue;
      11. string name = currentToken.HtmlData.Name;
      13. switch (currentToken.Type)
      14. {
      15. case Token.TokenType.BeginTag:
      17. if (endToken != null)
      18. {
      19. Tokens.Insert(i, endToken);
      20. endToken = null;
      21. continue;
      22. }
      24. if (Declarations.UniqueTags.Contains(name))
      25. {
      26. endToken = new Token()
      27. {
      28. Type = Token.TokenType.EndTag,
      29. Content = new StringBuilder("</" + name + ">;"),
      30. HtmlData = new HtmlData(endToken)
      31. {
      32. NameBuilder = new StringBuilder(name)
      33. }
      34. };
      35. continue;
      36. }
      37. else if (!knownTags.ContainsKey(name))
      38. knownTags.Add(name, 1);
      39. else knownTags[name]++;
      41. break;
      42. case Token.TokenType.EndTag:
      43. if (endToken != null)
      44. if (name.Equals(endToken.HtmlData.Name))
      45. endToken = null;
      47. if (endToken != null)
      48. {
      49. Tokens.Insert(i, endToken);
      50. endToken = null;
      51. continue;
      52. }
      54. if (!knownTags.ContainsKey(name))
      55. {
      56. Tokens.RemoveAt(i);
      57. i--;
      58. continue;
      59. }
      61. if (knownTags[name] <= 0)
      62. {
      63. Tokens.RemoveAt(i);
      64. i--;
      65. }
      66. knownTags[name]--;
      67. break;
      68. }
      69. }
      70. }


      werden nun überflüssige Tags entfernt und einige End-Tags automatisch gesetzt.

      Die Eingabe

      Quellcode

      1. <div><div><p>hallo</rofl></div></div></div></div></div></div></div></div></div>


      ergibt die Ausgabe:
      [BEGIN]html
      [BEGIN]div
      [BEGIN]div
      [BEGIN]p
      [CONTENT]hallo
      [END]p
      [END]div
      [END]div
      [END]html

      _
      Und Gott alleine weiß alles am allerbesten und besser.

      Neuer Parser

      -1-
      Die HTML-Dokumente werden nun in zwei Schritten analysiert:
      Zunächst wird es in die korrespondierenden Komponenten zerlegt (id est: Start/End/Special-Tag, Content) und abschließend als DOM repräsentiert.

      Funktioniert_relativ schnell und solide.

      Git ist aktualisiert.

      Der Tokenizer unter "Analysis"-Namespace zu finden: github.com/NET-D3v3l0p3r/HTMLR…LRenderer/Parser/Analysis
      _
      Und Gott alleine weiß alles am allerbesten und besser.