html/scripting-parser/parser.html

<!DOCTYPE HTML>
<html lang=en>
<head>
<title>Demo of HTML5 Parsing Algorithm with Scripting Enabled</title>
<style>
  textarea {
     display: block;
     width: 80%;
     margin-left: auto;
     margin-right: auto;
     min-height: 20em;
  }
  output {
    display: block;
    font-family: monospace;
    white-space: pre;
  }
</style>
<script>
  function update () {
    document.logElement.textContent = '';
    var p = new Parser ();
    p.parse (new InputStream (document.sourceElement.value));
    log (dumpTree (p.doc, ''));
  } // update

  function log (s) {
    document.logElement.appendChild (document.createTextNode (s + "\n"));
  } // log

  function InputStream (s) {
    this.s = s;
  } // InputStream

  function Parser () {
    this.parseMode = 'pcdata';
    this.doc = new JSDocument ();
    this.openElements = [this.doc];
  } // Parser

  Parser.prototype.getNextToken = function (i) {
    if (this.parseMode == 'script') {
      var token;
      i.s = i.s.replace (/^([\s\S]+?)<\/[Ss][Cc][Rr][Ii][Pp][Tt]>/,
      function (s, t) {
        token = {type: 'char', value: t};
        return '<' + '/script>';
      });
      if (token) return token;
      i.s = i.s.replace (/^<\/[Ss][Cc][Rr][Ii][Pp][Tt]>/, function () {
        token = {type: 'end-tag', value: 'script'};
        return '';
      });
      if (token) return token;
      return {type: 'eof'};
    }

    var token;
    i.s = i.s.replace (/^<\/([^>]+)>/, function (s, e) {
      token = {type: 'end-tag', value: e.toLowerCase ()};
      return '';
    });
    if (token) return token;
    i.s = i.s.replace (/^<([^>]+)>/, function (s, e) {
      token = {type: 'start-tag', value: e.toLowerCase ()};
      return '';
    });
    if (token) return token;
    i.s = i.s.replace (/^[^<]+/, function (s) {
      token = {type: 'char', value: s};
      return '';
    });
    if (token) return token;
    i.s = i.s.replace (/^[\s\S]/, function (s) {
      token = {type: 'char', value: s};
      return '';
    });
    if (token) return token;
    return {type: 'eof'};
  } // getNextToken

  Parser.prototype.parse = function (i) {
    log ('start parsing');

    while (true) {
      var token = this.getNextToken (i);
      log ('token: ' + token.type + ' "' + token.value + '"');

      if (token.type == 'start-tag') {
        var el = new JSElement (token.value);
        if (token.value == 'script') {
          this.parseMode = 'script';

          while (true) {
            var token = this.getNextToken (i);
            log ('token: ' + token.type + ' "' + token.value + '"');

            if (token.type == 'char') {
              el.manakaiAppendText (token.value);
            } else if (token.type == 'eof' ||
                       (token.type == 'end-tag' && token.value == 'script')) {
              this.parseMode = 'pcdata';
              break;
            }
          }

          this.openElements[this.openElements.length - 1].appendChild (el);
        } else {
          this.openElements[this.openElements.length - 1].appendChild (el);
          this.openElements.push (el);
        }
      } else if (token.type == 'end-tag') {
        if (this.openElements[this.openElements.length - 1].localName ==
            token.value) {
          this.openElements.pop ();
        } else {
          log ('parse error: unmatched end tag: ' + token.value);
        }
      } else if (token.type == 'eof') {
        break;
      }
    }

    log ('stop parsing');
  } // parse

  function JSDocument () {
    this.childNodes = [];
  } // JSDocument

  function JSElement (localName) {
    this.localName = localName;
    this.childNodes = [];
  } // JSElement

  JSDocument.prototype.appendChild = JSElement.prototype.appendChild =
  function (e) {
    this.childNodes.push (e);
    e.parentNode = this;
    return e;
  }; // appendChild

  function JSText (data) {
    this.data = data;
  } // JSText

  JSDocument.prototype.manakaiAppendText =
  JSElement.prototype.manakaiAppendText =
  function (s) {
    if (this.childNodes.length > 0 &&
        this.childNodes[this.childNodes.length - 1] instanceof JSText) {
      this.childNodes[this.childNodes.length - 1].data += s;
    } else {
      this.childNodes.push (new JSText (s));
    }
  }; // manakaiAppendText

  function dumpTree (n, indent) {
    var r = '';
    for (var i = 0; i < n.childNodes.length; i++) {
      var node = n.childNodes[i];
      if (node instanceof JSElement) {
        r += '| ' + indent + node.localName + '\n';
        r += dumpTree (node, indent + '  ');
      } else if (node instanceof JSText) {
        r += '| ' + indent + '"' + node.data + '"\n';
      } else {
        r += '| ' + indent + node + '\n';
      }
    }
    return r;
  } // dumpTree
</script>
</head>
<body onload="
  document.sourceElement = document.getElementsByTagName ('textarea')[0];
  document.logElement = document.getElementsByTagName ('output')[0];
  update ();
">

<textarea onchange=" update () ">&lt;html>
&lt;head>&lt;/head>&lt;body>
&lt;p>
&lt;script>
document.write ('aaaaaaa&lt;/p>\n&lt;script>\ndocument.write("cccccc")\n&lt;/', 'script>\nbbbbbb');
&lt;/script>
&lt;p>
</textarea>

<output></output>

</body>
</html>
1	wakaba	1.1	<!DOCTYPE HTML>
2			<html lang=en>
3			<head>
4			<title>Demo of HTML5 Parsing Algorithm with Scripting Enabled</title>
5			<style>
6			textarea {
7			display: block;
8			width: 80%;
9			margin-left: auto;
10			margin-right: auto;
11			min-height: 20em;
12			}
13			output {
14			display: block;
15			font-family: monospace;
16			white-space: pre;
17			}
18			</style>
19			<script>
20			function update () {
21			document.logElement.textContent = '';
22			var p = new Parser ();
23			p.parse (new InputStream (document.sourceElement.value));
24			log (dumpTree (p.doc, ''));
25			} // update
26
27			function log (s) {
28			document.logElement.appendChild (document.createTextNode (s + "\n"));
29			} // log
30
31			function InputStream (s) {
32			this.s = s;
33			} // InputStream
34
35			function Parser () {
36			this.parseMode = 'pcdata';
37			this.doc = new JSDocument ();
38			this.openElements = [this.doc];
39			} // Parser
40
41			Parser.prototype.getNextToken = function (i) {
42			if (this.parseMode == 'script') {
43			var token;
44			i.s = i.s.replace (/^([\s\S]+?)<\/[Ss][Cc][Rr][Ii][Pp][Tt]>/,
45			function (s, t) {
46			token = {type: 'char', value: t};
47			return '<' + '/script>';
48			});
49			if (token) return token;
50			i.s = i.s.replace (/^<\/[Ss][Cc][Rr][Ii][Pp][Tt]>/, function () {
51			token = {type: 'end-tag', value: 'script'};
52			return '';
53			});
54			if (token) return token;
55			return {type: 'eof'};
56			}
57
58			var token;
59			i.s = i.s.replace (/^<\/([^>]+)>/, function (s, e) {
60			token = {type: 'end-tag', value: e.toLowerCase ()};
61			return '';
62			});
63			if (token) return token;
64			i.s = i.s.replace (/^<([^>]+)>/, function (s, e) {
65			token = {type: 'start-tag', value: e.toLowerCase ()};
66			return '';
67			});
68			if (token) return token;
69			i.s = i.s.replace (/^[^<]+/, function (s) {
70			token = {type: 'char', value: s};
71			return '';
72			});
73			if (token) return token;
74			i.s = i.s.replace (/^[\s\S]/, function (s) {
75			token = {type: 'char', value: s};
76			return '';
77			});
78			if (token) return token;
79			return {type: 'eof'};
80			} // getNextToken
81
82			Parser.prototype.parse = function (i) {
83			log ('start parsing');
84
85			while (true) {
86			var token = this.getNextToken (i);
87			log ('token: ' + token.type + ' "' + token.value + '"');
88
89			if (token.type == 'start-tag') {
90			var el = new JSElement (token.value);
91			if (token.value == 'script') {
92			this.parseMode = 'script';
93
94			while (true) {
95			var token = this.getNextToken (i);
96			log ('token: ' + token.type + ' "' + token.value + '"');
97
98			if (token.type == 'char') {
99			el.manakaiAppendText (token.value);
100			} else if (token.type == 'eof' \|\|
101			(token.type == 'end-tag' && token.value == 'script')) {
102			this.parseMode = 'pcdata';
103			break;
104			}
105			}
106
107			this.openElements[this.openElements.length - 1].appendChild (el);
108			} else {
109			this.openElements[this.openElements.length - 1].appendChild (el);
110			this.openElements.push (el);
111			}
112			} else if (token.type == 'end-tag') {
113			if (this.openElements[this.openElements.length - 1].localName ==
114			token.value) {
115			this.openElements.pop ();
116			} else {
117			log ('parse error: unmatched end tag: ' + token.value);
118			}
119			} else if (token.type == 'eof') {
120			break;
121			}
122			}
123
124			log ('stop parsing');
125			} // parse
126
127			function JSDocument () {
128			this.childNodes = [];
129			} // JSDocument
130
131			function JSElement (localName) {
132			this.localName = localName;
133			this.childNodes = [];
134			} // JSElement
135
136			JSDocument.prototype.appendChild = JSElement.prototype.appendChild =
137			function (e) {
138			this.childNodes.push (e);
139			e.parentNode = this;
140			return e;
141			}; // appendChild
142
143			function JSText (data) {
144			this.data = data;
145			} // JSText
146
147			JSDocument.prototype.manakaiAppendText =
148			JSElement.prototype.manakaiAppendText =
149			function (s) {
150			if (this.childNodes.length > 0 &&
151			this.childNodes[this.childNodes.length - 1] instanceof JSText) {
152			this.childNodes[this.childNodes.length - 1].data += s;
153			} else {
154			this.childNodes.push (new JSText (s));
155			}
156			}; // manakaiAppendText
157
158			function dumpTree (n, indent) {
159			var r = '';
160			for (var i = 0; i < n.childNodes.length; i++) {
161			var node = n.childNodes[i];
162			if (node instanceof JSElement) {
163			r += '\| ' + indent + node.localName + '\n';
164			r += dumpTree (node, indent + ' ');
165			} else if (node instanceof JSText) {
166			r += '\| ' + indent + '"' + node.data + '"\n';
167			} else {
168			r += '\| ' + indent + node + '\n';
169			}
170			}
171			return r;
172			} // dumpTree
173			</script>
174			</head>
175			<body onload="
176			document.sourceElement = document.getElementsByTagName ('textarea')[0];
177			document.logElement = document.getElementsByTagName ('output')[0];
178			update ();
179			">
180
181			<textarea onchange=" update () "><html>
182			<head></head><body>
183			<p>
184			<script>
185			document.write ('aaaaaaa</p>\n<script>\ndocument.write("cccccc")\n</', 'script>\nbbbbbb');
186			</script>
187			<p>
188			</textarea>
189
190			<output></output>
191
192			</body>
193			</html>