1 |
<!DOCTYPE HTML> |
<!DOCTYPE HTML> |
2 |
<html lang=en> |
<html lang=en> |
3 |
<head> |
<head> |
4 |
<title>Demo of HTML5 Parsing Algorithm with Scripting Enabled</title> |
<title>Live Scripting HTML Parser</title> |
5 |
<style> |
<style> |
6 |
h1, h2 { |
h1, h2 { |
7 |
margin: 0; |
margin: 0; |
34 |
} // update |
} // update |
35 |
|
|
36 |
function update2 () { |
function update2 () { |
|
document.logElement.textContent = ''; |
|
37 |
var v = document.sourceElement.value; |
var v = document.sourceElement.value; |
38 |
var p = new Parser (new InputStream (v)); |
if (v != document.previousSourceText) { |
39 |
var doc = p.doc; |
document.previousSourceText = v; |
40 |
p.parse (); |
document.links['permalink'].href |
41 |
log (dumpTree (doc, '')); |
= location.pathname + '?s=' + encodeURIComponent (v); |
42 |
|
document.links['ldvlink'].href |
43 |
document.links['permalink'].href |
= 'http://software.hixie.ch/utilities/js/live-dom-viewer/?' |
44 |
= location.href + '?s=' + encodeURIComponent (v); |
+ encodeURIComponent (v); |
45 |
|
|
46 |
|
document.logElement.textContent = ''; |
47 |
|
var p = new Parser (new InputStream (v)); |
48 |
|
var doc = p.doc; |
49 |
|
p.parse (); |
50 |
|
log (dumpTree (doc, '')); |
51 |
|
} |
52 |
} // update2 |
} // update2 |
53 |
|
|
54 |
var logIndentLevel = 0; |
var logIndentLevel = 0; |
71 |
} |
} |
72 |
this.doc = doc; |
this.doc = doc; |
73 |
this.openElements = [doc]; |
this.openElements = [doc]; |
74 |
this.in = i; |
this.input = i; |
75 |
this.scriptsExecutedAfterParsing = []; |
this.scriptsExecutedAfterParsing = []; |
76 |
} // Parser |
} // Parser |
77 |
|
|
78 |
Parser.prototype.getNextToken = function () { |
Parser.prototype.getNextToken = function () { |
79 |
var p = this; |
var p = this; |
80 |
var i = this.in; |
var i = this.input; |
81 |
if (this.parseMode == 'script') { |
if (this.parseMode == 'script') { |
82 |
var token; |
var token; |
83 |
if (p.insertionPoint <= 0) { |
if (p.insertionPoint <= 0) { |
356 |
if (ip == undefined || ip == null || isNaN (ip)) { |
if (ip == undefined || ip == null || isNaN (ip)) { |
357 |
log ('insertion point: set to undefined'); |
log ('insertion point: set to undefined'); |
358 |
this.insertionPoint = undefined; |
this.insertionPoint = undefined; |
359 |
} else if (ip == this.in.s.length) { |
} else if (ip == this.input.s.length) { |
360 |
log ('insertion point: end of file'); |
log ('insertion point: end of file'); |
361 |
this.insertionPoint = ip; |
this.insertionPoint = ip; |
362 |
} else { |
} else { |
363 |
log ('insertion point: set to ' + ip + |
log ('insertion point: set to ' + ip + |
364 |
' (before "' + this.in.s.substring (0, 10) + '")'); |
' (before "' + this.input.s.substring (0, 10) + '")'); |
365 |
this.insertionPoint = ip; |
this.insertionPoint = ip; |
366 |
} |
} |
367 |
}; // setInsertionPoint |
}; // setInsertionPoint |
543 |
// Step 3. |
// Step 3. |
544 |
if (this._parser && |
if (this._parser && |
545 |
!this._parser.scriptCreated && |
!this._parser.scriptCreated && |
546 |
this._parser.in.insertionPoint != undefined) { |
this._parser.input.insertionPoint != undefined) { |
547 |
log ('document.open () in parsing mode is ignored'); |
log ('document.open () in parsing mode is ignored'); |
548 |
return this; |
return this; |
549 |
} |
} |
577 |
} |
} |
578 |
|
|
579 |
// Step 11. |
// Step 11. |
580 |
this._parser.setInsertionPoint (this._parser.in.s.length); |
this._parser.setInsertionPoint (this._parser.input.s.length); |
581 |
|
|
582 |
// Step 12. |
// Step 12. |
583 |
return this; |
return this; |
597 |
// 2. ... inserted into the input stream just before the insertion point. |
// 2. ... inserted into the input stream just before the insertion point. |
598 |
var s = Array.join (arguments, ''); |
var s = Array.join (arguments, ''); |
599 |
log ('document.write: insert "' + s + '"' + |
log ('document.write: insert "' + s + '"' + |
600 |
' before "' + p.in.s.substring (p.insertionPoint, p.insertionPoint + 10) + '"'); |
' before "' + |
601 |
p.in.s = p.in.s.substring (0, p.insertionPoint) + s |
p.input.s.substring (p.insertionPoint, p.insertionPoint + 10) + '"'); |
602 |
+ p.in.s.substring (p.insertionPoint, p.in.s.length); |
p.input.s = p.input.s.substring (0, p.insertionPoint) + s |
603 |
|
+ p.input.s.substring (p.insertionPoint, p.input.s.length); |
604 |
p.insertionPoint += s.length; |
p.insertionPoint += s.length; |
605 |
|
|
606 |
// 3. If there is a script that will execute as soon as the parser resumes |
// 3. If there is a script that will execute as soon as the parser resumes |
658 |
</head> |
</head> |
659 |
<body onload=" |
<body onload=" |
660 |
document.sourceElement = document.getElementsByTagName ('textarea')[0]; |
document.sourceElement = document.getElementsByTagName ('textarea')[0]; |
661 |
|
|
662 |
|
var q = location.search; |
663 |
|
if (q != null) { |
664 |
|
q = q.substring (1).split (/;/); |
665 |
|
for (var i = 0; i < q.length; i++) { |
666 |
|
var v = q[i].split (/=/, 2); |
667 |
|
v[0] = decodeURIComponent (v[0]); |
668 |
|
v[1] = decodeURIComponent (v[1] || ''); |
669 |
|
if (v[0] == 's') { |
670 |
|
document.sourceElement.value = v[1]; |
671 |
|
} |
672 |
|
} |
673 |
|
} |
674 |
|
|
675 |
document.logElement = document.getElementsByTagName ('output')[0]; |
document.logElement = document.getElementsByTagName ('output')[0]; |
676 |
update (); |
update (); |
677 |
"> |
"> |
678 |
<h1>Live Scripting Parser</h1> |
<h1>Live Scripting <abbr title="Hypertext Markup Language">HTML</abbr> |
679 |
|
Parser</h1> |
680 |
|
|
681 |
<h2>Markup to test |
<h2>Markup to test |
682 |
(<a href=data:, id=permalink rel=bookmark>permalink</a>)</h2> |
(<a href=data:, id=permalink rel=bookmark>permalink</a>, |
683 |
|
<a href="http://software.hixie.ch/utilities/js/live-dom-viewer/" |
684 |
|
id=ldvlink>Live <abbr title="Document Object Model">DOM</abbr> |
685 |
|
Viewer</a>)</h2> |
686 |
<p> |
<p> |
687 |
<textarea onkeydown=" update () " onchange=" update () " oninput=" update () "><html> |
<textarea onkeydown=" update () " onchange=" update () " oninput=" update () "><html> |
688 |
<head></head><body> |
<head></head><body> |
696 |
<h2>Log</h2> |
<h2>Log</h2> |
697 |
<p><output></output> |
<p><output></output> |
698 |
|
|
699 |
<!-- TODO: short description --> |
<h2>Note</h2> |
700 |
|
|
701 |
|
<p>This is a <em>simplified</em> implementation of |
702 |
|
<a href="http://www.whatwg.org/specs/web-apps/current-work/#parsing">HTML5 |
703 |
|
Parsing Algorithm</a>. It only implements script-related part of the |
704 |
|
algorithm. Especially, this parser: |
705 |
|
<ul> |
706 |
|
<li>Does not support <code>DOCTYPE</code> and comment tokens. |
707 |
|
<li>Does not support entities except for <code>&quot;</code>, |
708 |
|
<code>&apos;</code>, and <code>&amp;</code> in <code>script</code> |
709 |
|
<code>src</code> attribute value. |
710 |
|
<li>Does not support omissions of start or end tags, the <abbr>AAA</abbr> |
711 |
|
algorithm, and so on. |
712 |
|
<li>Does not raise parse errors for invalid attribute specifications in start |
713 |
|
or end tags. |
714 |
|
<li>Does not support CDATA/PCDATA element other than <code>script</code>. |
715 |
|
<li>Does not support <code><!--</code>..<code>--></code> parsing rule |
716 |
|
in <code>script</code> element. |
717 |
|
<li>Does not support foreign (SVG or MathML) elements. |
718 |
|
<li>Only supports <code>script</code> <code>type</code> |
719 |
|
<code>text/javascript</code>. <code>type</code> and <code>language</code> |
720 |
|
attributes are ignored. |
721 |
|
<li>Only supports <code>document.write</code>. |
722 |
|
The script code must be match to the regular expression |
723 |
|
<code>^\s*(?:document\.write\s*\(<var>v</var>\s*(?:,\s*<var>v</var>\s*)*\)\s*;\s*)*$</code> |
724 |
|
where <var>v</var> is <code>"[^"]*"|'[^']*'</code>. |
725 |
|
<li>Only supports <code>javascript:</code> |
726 |
|
<abbr title="Uniform Resourace Identifiers">URI</abbr> scheme in the |
727 |
|
<code>src</code> attribute of the <code>script</code> element. In addition, |
728 |
|
the <abbr title="Uniform Resource Identifiers">URI</abbr> must be conform to |
729 |
|
the regular expression <code>^javascript:\s*(?:"[^"]*"|'[^']*')\s*$</code>. |
730 |
|
</ul> |
731 |
|
|
732 |
<!-- TODO: permalink query -> textarea --> |
<p>For some reason, this parser does not work in browsers that do |
733 |
|
not support JavaScript 1.5. |
734 |
|
|
735 |
<!-- TODO: multiple attributes are not supported yet --> |
<!-- TODO: multiple attributes are not supported yet --> |
736 |
|
|