| 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 |
|
|