+Pure JavaScript HTML Parser

+ +

Credit goes to John Resig for his code written back in 2008.

+ +

This code had been updated to fix several problems.

+ +

+4 Libraries in One!

+ +

+A SAX-style API

+ +

Handles tag, text, and comments with callbacks. For example, let’s say you wanted to implement a simple HTML to XML serialization scheme – you could do so using the following:

+ +

var results = "";
+
+HTMLParser("<p id=test>hello <i>world", {
+  start: function( tag, attrs, unary ) {
+    results += "<" + tag;
+
+    for ( var i = 0; i < attrs.length; i++ )
+      results += " " + attrs[i].name + '="' + attrs[i].escaped + '"';
+
+    results += (unary ? "/" : "") + ">";
+  },
+  end: function( tag ) {
+    results += "</" + tag + ">";
+  },
+  chars: function( text ) {
+    results += text;
+  },
+  comment: function( text ) {
+    results += "<!--" + text + "-->";
+  }
+});
+
+results == '<p id="test">hello <i>world</i></p>"
+

+ +

+XML Serializer

+ +

Now, there’s no need to worry about implementing the above, since it’s included directly in the library, as well. Just feed in HTML and it spits back an XML string.

+ +

var results = HTMLtoXML("<p>Data: <input disabled>")
+results == '<p>Data: <input disabled="disabled"/></p>'
+

+ +

+DOM Builder

+ +

If you’re using the HTML parser to inject into an existing DOM document (or within an existing DOM element) then htmlparser.js provides a simple method for handling that:

+ +

// The following is appended into the document body
+HTMLtoDOM("<p>Hello <b>World", document)
+
+// The follow is appended into the specified element
+HTMLtoDOM("<p>Hello <b>World", document.getElementById("test"))
+

+ +

+DOM Document Creator

+ +

This is a more-advanced version of the DOM builder – it includes logic for handling the overall structure of a web page, returning a new DOM document.

+ +

A couple points are enforced by this method:

+ +

There will always be a html, head, body, and title element.
There will only be one html, head, body, and title element (if the user specifies more, then will be moved to the appropriate locations and merged). +link and base elements are forced into the head.

You would use the method like so:

+ +

var dom = HTMLtoDOM("<p>Data: <input disabled>");
+dom.getElementsByTagName("body").length == 1
+dom.getElementsByTagName("p").length == 1
+

+ +

While this library doesn’t cover the full gamut of possible weirdness that HTML provides, it does handle a lot of the most obvious stuff. All of the following are accounted for:

+ +

Unclosed Tags:

+ +

HTMLtoXML("<p><b>Hello") == '<p><b>Hello</b></p>'
+

+ +

Empty Elements:

+ +

HTMLtoXML("<img src=test.jpg>") == '<img src="test.jpg"/>'
+

+ +

Block vs. Inline Elements:

+ +

HTMLtoXML("<b>Hello <p>John") == '<b>Hello </b><p>John</p>'
+

+ +

Self-closing Elements:

+ +

HTMLtoXML("<p>Hello<p>World") == '<p>Hello</p><p>World</p>'
+

+ +

Attributes Without Values:

+ +

HTMLtoXML("<input disabled>") == '<input disabled="disabled"/>'
+

4 Libraries in One!

hello world\", {\r\n start: function( tag, attrs, unary ) {\r\n results += \"<\" + tag;\r\n \r\n for ( var i = 0; i < attrs.length; i++ )\r\n results += \" \" + attrs[i].name + '=\"' + attrs[i].escaped + '\"';\r\n \r\n results += (unary ? \"/\" : \"\") + \">\";\r\n },\r\n end: function( tag ) {\r\n results += \"\";\r\n },\r\n chars: function( text ) {\r\n results += text;\r\n },\r\n comment: function( text ) {\r\n results += \"\";\r\n }\r\n });\r\n \r\n results == '

hello world

\"\r\n\r\n### XML Serializer ###\r\n\r\nNow, there’s no need to worry about implementing the above, since it’s included directly in the library, as well. Just feed in HTML and it spits back an XML string.\r\n\r\n var results = HTMLtoXML(\"

Data: \")\r\n results == '

Data:

'\r\n\r\n\r\n### DOM Builder ###\r\n\r\nIf you’re using the HTML parser to inject into an existing DOM document (or within an existing DOM element) then htmlparser.js provides a simple method for handling that:\r\n\r\n // The following is appended into the document body\r\n HTMLtoDOM(\"

Hello World\", document)\r\n \r\n // The follow is appended into the specified element\r\n HTMLtoDOM(\"

Hello World\", document.getElementById(\"test\"))\r\n\r\n\r\n### DOM Document Creator ###\r\n\r\nThis is a more-advanced version of the DOM builder – it includes logic for handling the overall structure of a web page, returning a new DOM document.\r\n\r\nA couple points are enforced by this method:\r\n\r\n - There will always be a html, head, body, and title element.\r\n - There will only be one html, head, body, and title element (if the user specifies more, then will be moved to the appropriate locations and merged).\r\nlink and base elements are forced into the head.\r\n\r\nYou would use the method like so:\r\n\r\n var dom = HTMLtoDOM(\"

Data: \");\r\n dom.getElementsByTagName(\"body\").length == 1\r\n dom.getElementsByTagName(\"p\").length == 1\r\n\r\n\r\nWhile this library doesn’t cover the full gamut of possible weirdness that HTML provides, it does handle a lot of the most obvious stuff. All of the following are accounted for:\r\n\r\n**Unclosed Tags:**\r\n\r\n HTMLtoXML(\"

Hello\") == '

Hello

'\r\n**Empty Elements:**\r\n\r\n HTMLtoXML(\"\") == ''\r\n\r\n**Block vs. Inline Elements:**\r\n\r\n HTMLtoXML(\"Hello
John\") == 'Hello
John
'\r\n**Self-closing Elements:**\r\n\r\n HTMLtoXML(\"
Hello
World\") == '
Hello
World
'\r\n**Attributes Without Values:**\r\n\r\n HTMLtoXML(\"\") == ''","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."} \ No newline at end of file +{"name":"Pure-javascript-html-parser","tagline":"A Pure JavaScript HTML Parser, based on John Resig's http://ejohn.org/blog/pure-javascript-html-parser/","body":"# Pure JavaScript HTML Parser #\r\n\r\nCredit goes to John Resig for his [code](http://ejohn.org/blog/pure-javascript-html-parser/) written back in 2008.\r\n\r\nThis code had been updated to fix several problems.\r\n\r\n\r\n### Demo ###\r\nA working demo can be seen [here](http://htmlpreview.github.io/?https://github.com/blowsie/Pure-JavaScript-HTML-Parser/blob/master/demo.html)\r\n\r\n\r\n## 4 Libraries in One! ##\r\n\r\n### A SAX-style API ###\r\n\r\nHandles tag, text, and comments with callbacks. For example, let’s say you wanted to implement a simple HTML to XML serialization scheme – you could do so using the following:\r\n\r\n var results = \"\";\r\n \r\n HTMLParser(\"
hello world\", {\r\n start: function( tag, attrs, unary ) {\r\n results += \"<\" + tag;\r\n \r\n for ( var i = 0; i < attrs.length; i++ )\r\n results += \" \" + attrs[i].name + '=\"' + attrs[i].escaped + '\"';\r\n \r\n results += (unary ? \"/\" : \"\") + \">\";\r\n },\r\n end: function( tag ) {\r\n results += \"\";\r\n },\r\n chars: function( text ) {\r\n results += text;\r\n },\r\n comment: function( text ) {\r\n results += \"\";\r\n }\r\n });\r\n \r\n results == '
hello world
\"\r\n\r\n### XML Serializer ###\r\n\r\nNow, there’s no need to worry about implementing the above, since it’s included directly in the library, as well. Just feed in HTML and it spits back an XML string.\r\n\r\n var results = HTMLtoXML(\"
Data: \")\r\n results == '
Data:
'\r\n\r\n\r\n### DOM Builder ###\r\n\r\nIf you’re using the HTML parser to inject into an existing DOM document (or within an existing DOM element) then htmlparser.js provides a simple method for handling that:\r\n\r\n // The following is appended into the document body\r\n HTMLtoDOM(\"
Hello World\", document)\r\n \r\n // The follow is appended into the specified element\r\n HTMLtoDOM(\"
Hello World\", document.getElementById(\"test\"))\r\n\r\n\r\n### DOM Document Creator ###\r\n\r\nThis is a more-advanced version of the DOM builder – it includes logic for handling the overall structure of a web page, returning a new DOM document.\r\n\r\nA couple points are enforced by this method:\r\n\r\n - There will always be a html, head, body, and title element.\r\n - There will only be one html, head, body, and title element (if the user specifies more, then will be moved to the appropriate locations and merged).\r\nlink and base elements are forced into the head.\r\n\r\nYou would use the method like so:\r\n\r\n var dom = HTMLtoDOM(\"
Data: \");\r\n dom.getElementsByTagName(\"body\").length == 1\r\n dom.getElementsByTagName(\"p\").length == 1\r\n\r\n\r\nWhile this library doesn’t cover the full gamut of possible weirdness that HTML provides, it does handle a lot of the most obvious stuff. All of the following are accounted for:\r\n\r\n**Unclosed Tags:**\r\n\r\n HTMLtoXML(\"
Hello\") == '
Hello
'\r\n**Empty Elements:**\r\n\r\n HTMLtoXML(\"\") == ''\r\n\r\n**Block vs. Inline Elements:**\r\n\r\n HTMLtoXML(\"Hello
John\") == 'Hello
John
'\r\n**Self-closing Elements:**\r\n\r\n HTMLtoXML(\"
Hello
World\") == '
Hello
World
'\r\n**Attributes Without Values:**\r\n\r\n HTMLtoXML(\"\") == ''\r\n","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."} \ No newline at end of file From c338f981470684be6f3423a8047db1ca4d652517 Mon Sep 17 00:00:00 2001 From: Sam Blowes Date: Tue, 11 Jun 2013 05:51:28 -0700 Subject: [PATCH 4/5] Create gh-pages branch via GitHub --- index.html | 7 ++----- params.json | 2 +- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index e54d3a6..c613f0f 100644 --- a/index.html +++ b/index.html @@ -36,12 +36,9 @@

Credit goes to John Resig for his code written back in 2008.
-
This code had been updated to fix several problems.
+
This code has been updated to fix several problems.
-
-Demo
- -
A working demo can be seen here
+
A working demo can be seen here.

4 Libraries in One!
diff --git a/params.json b/params.json index 7f59eb4..0a72369 100644 --- a/params.json +++ b/params.json @@ -1 +1 @@ -{"name":"Pure-javascript-html-parser","tagline":"A Pure JavaScript HTML Parser, based on John Resig's http://ejohn.org/blog/pure-javascript-html-parser/","body":"# Pure JavaScript HTML Parser #\r\n\r\nCredit goes to John Resig for his [code](http://ejohn.org/blog/pure-javascript-html-parser/) written back in 2008.\r\n\r\nThis code had been updated to fix several problems.\r\n\r\n\r\n### Demo ###\r\nA working demo can be seen [here](http://htmlpreview.github.io/?https://github.com/blowsie/Pure-JavaScript-HTML-Parser/blob/master/demo.html)\r\n\r\n\r\n## 4 Libraries in One! ##\r\n\r\n### A SAX-style API ###\r\n\r\nHandles tag, text, and comments with callbacks. For example, let’s say you wanted to implement a simple HTML to XML serialization scheme – you could do so using the following:\r\n\r\n var results = \"\";\r\n \r\n HTMLParser(\"
hello world\", {\r\n start: function( tag, attrs, unary ) {\r\n results += \"<\" + tag;\r\n \r\n for ( var i = 0; i < attrs.length; i++ )\r\n results += \" \" + attrs[i].name + '=\"' + attrs[i].escaped + '\"';\r\n \r\n results += (unary ? \"/\" : \"\") + \">\";\r\n },\r\n end: function( tag ) {\r\n results += \"\";\r\n },\r\n chars: function( text ) {\r\n results += text;\r\n },\r\n comment: function( text ) {\r\n results += \"\";\r\n }\r\n });\r\n \r\n results == '
hello world
\"\r\n\r\n### XML Serializer ###\r\n\r\nNow, there’s no need to worry about implementing the above, since it’s included directly in the library, as well. Just feed in HTML and it spits back an XML string.\r\n\r\n var results = HTMLtoXML(\"
Data: \")\r\n results == '
Data:
'\r\n\r\n\r\n### DOM Builder ###\r\n\r\nIf you’re using the HTML parser to inject into an existing DOM document (or within an existing DOM element) then htmlparser.js provides a simple method for handling that:\r\n\r\n // The following is appended into the document body\r\n HTMLtoDOM(\"
Hello World\", document)\r\n \r\n // The follow is appended into the specified element\r\n HTMLtoDOM(\"
Hello World\", document.getElementById(\"test\"))\r\n\r\n\r\n### DOM Document Creator ###\r\n\r\nThis is a more-advanced version of the DOM builder – it includes logic for handling the overall structure of a web page, returning a new DOM document.\r\n\r\nA couple points are enforced by this method:\r\n\r\n - There will always be a html, head, body, and title element.\r\n - There will only be one html, head, body, and title element (if the user specifies more, then will be moved to the appropriate locations and merged).\r\nlink and base elements are forced into the head.\r\n\r\nYou would use the method like so:\r\n\r\n var dom = HTMLtoDOM(\"
Data: \");\r\n dom.getElementsByTagName(\"body\").length == 1\r\n dom.getElementsByTagName(\"p\").length == 1\r\n\r\n\r\nWhile this library doesn’t cover the full gamut of possible weirdness that HTML provides, it does handle a lot of the most obvious stuff. All of the following are accounted for:\r\n\r\n**Unclosed Tags:**\r\n\r\n HTMLtoXML(\"
Hello\") == '
Hello
'\r\n**Empty Elements:**\r\n\r\n HTMLtoXML(\"\") == ''\r\n\r\n**Block vs. Inline Elements:**\r\n\r\n HTMLtoXML(\"Hello
John\") == 'Hello
John
'\r\n**Self-closing Elements:**\r\n\r\n HTMLtoXML(\"
Hello
World\") == '
Hello
World
'\r\n**Attributes Without Values:**\r\n\r\n HTMLtoXML(\"\") == ''\r\n","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."} \ No newline at end of file +{"name":"Pure-javascript-html-parser","tagline":"A Pure JavaScript HTML Parser, based on John Resig's http://ejohn.org/blog/pure-javascript-html-parser/","body":"# Pure JavaScript HTML Parser #\r\n\r\nCredit goes to John Resig for his [code](http://ejohn.org/blog/pure-javascript-html-parser/) written back in 2008.\r\n\r\nThis code has been updated to fix several problems.\r\n\r\n\r\nA working demo can be seen [here](http://htmlpreview.github.io/?https://github.com/blowsie/Pure-JavaScript-HTML-Parser/blob/master/demo.html).\r\n\r\n\r\n## 4 Libraries in One! ##\r\n\r\n### A SAX-style API ###\r\n\r\nHandles tag, text, and comments with callbacks. For example, let’s say you wanted to implement a simple HTML to XML serialization scheme – you could do so using the following:\r\n\r\n var results = \"\";\r\n \r\n HTMLParser(\"
hello world\", {\r\n start: function( tag, attrs, unary ) {\r\n results += \"<\" + tag;\r\n \r\n for ( var i = 0; i < attrs.length; i++ )\r\n results += \" \" + attrs[i].name + '=\"' + attrs[i].escaped + '\"';\r\n \r\n results += (unary ? \"/\" : \"\") + \">\";\r\n },\r\n end: function( tag ) {\r\n results += \"\";\r\n },\r\n chars: function( text ) {\r\n results += text;\r\n },\r\n comment: function( text ) {\r\n results += \"\";\r\n }\r\n });\r\n \r\n results == '
hello world
\"\r\n\r\n### XML Serializer ###\r\n\r\nNow, there’s no need to worry about implementing the above, since it’s included directly in the library, as well. Just feed in HTML and it spits back an XML string.\r\n\r\n var results = HTMLtoXML(\"
Data: \")\r\n results == '
Data:
'\r\n\r\n\r\n### DOM Builder ###\r\n\r\nIf you’re using the HTML parser to inject into an existing DOM document (or within an existing DOM element) then htmlparser.js provides a simple method for handling that:\r\n\r\n // The following is appended into the document body\r\n HTMLtoDOM(\"
Hello World\", document)\r\n \r\n // The follow is appended into the specified element\r\n HTMLtoDOM(\"
Hello World\", document.getElementById(\"test\"))\r\n\r\n\r\n### DOM Document Creator ###\r\n\r\nThis is a more-advanced version of the DOM builder – it includes logic for handling the overall structure of a web page, returning a new DOM document.\r\n\r\nA couple points are enforced by this method:\r\n\r\n - There will always be a html, head, body, and title element.\r\n - There will only be one html, head, body, and title element (if the user specifies more, then will be moved to the appropriate locations and merged).\r\nlink and base elements are forced into the head.\r\n\r\nYou would use the method like so:\r\n\r\n var dom = HTMLtoDOM(\"
Data: \");\r\n dom.getElementsByTagName(\"body\").length == 1\r\n dom.getElementsByTagName(\"p\").length == 1\r\n\r\n\r\nWhile this library doesn’t cover the full gamut of possible weirdness that HTML provides, it does handle a lot of the most obvious stuff. All of the following are accounted for:\r\n\r\n**Unclosed Tags:**\r\n\r\n HTMLtoXML(\"
Hello\") == '
Hello
'\r\n**Empty Elements:**\r\n\r\n HTMLtoXML(\"\") == ''\r\n\r\n**Block vs. Inline Elements:**\r\n\r\n HTMLtoXML(\"Hello
John\") == 'Hello
John
'\r\n**Self-closing Elements:**\r\n\r\n HTMLtoXML(\"
Hello
World\") == '
Hello
World
'\r\n**Attributes Without Values:**\r\n\r\n HTMLtoXML(\"\") == ''\r\n","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."} \ No newline at end of file From 6e0258de95ba9046a3ee68d5b813f22568d55c80 Mon Sep 17 00:00:00 2001 From: Sam Blowes Date: Fri, 20 Dec 2013 11:17:45 +0000 Subject: [PATCH 5/5] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 97a9157..7af9630 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -Pure-JavaScript-HTML-Parser +Pure-JavaScript-HTML5-Parser =========================== -A Pure JavaScript HTML Parser, based on John Resig's http://ejohn.org/blog/pure-javascript-html-parser/ +A Pure JavaScript HTML5 Parser, based on John Resig's http://ejohn.org/blog/pure-javascript-html-parser/

+Pure JavaScript HTML Parser

+4 Libraries in One!

+A SAX-style API

+XML Serializer

+DOM Builder

+DOM Document Creator

This code had been updated to fix several problems. +

+Demo

4 Libraries in One!

Credit goes to John Resig for his code written back in 2008. -This code had been updated to fix several problems. +This code has been updated to fix several problems. -

-Demo

4 Libraries in One!

This code had been updated to fix several problems.
+

Credit goes to John Resig for his code written back in 2008.
-
This code had been updated to fix several problems.
+
This code has been updated to fix several problems.
-