You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

164 lines
7.3 KiB

3 months ago
  1. # htmlparser2
  2. [![NPM version](http://img.shields.io/npm/v/htmlparser2.svg?style=flat)](https://npmjs.org/package/htmlparser2)
  3. [![Downloads](https://img.shields.io/npm/dm/htmlparser2.svg?style=flat)](https://npmjs.org/package/htmlparser2)
  4. [![Build Status](https://img.shields.io/github/workflow/status/fb55/htmlparser2/Node.js%20Test?label=tests&style=flat)](https://github.com/fb55/htmlparser2/actions?query=workflow%3A%22Node.js+Test%22)
  5. [![Coverage](http://img.shields.io/coveralls/fb55/htmlparser2.svg?style=flat)](https://coveralls.io/r/fb55/htmlparser2)
  6. The fast & forgiving HTML/XML parser.
  7. ## Installation
  8. npm install htmlparser2
  9. A live demo of `htmlparser2` is available [here](https://astexplorer.net/#/2AmVrGuGVJ).
  10. ## Ecosystem
  11. | Name | Description |
  12. | ------------------------------------------------------------- | ------------------------------------------------------- |
  13. | [htmlparser2](https://github.com/fb55/htmlparser2) | Fast & forgiving HTML/XML parser |
  14. | [domhandler](https://github.com/fb55/domhandler) | Handler for htmlparser2 that turns documents into a DOM |
  15. | [domutils](https://github.com/fb55/domutils) | Utilities for working with domhandler's DOM |
  16. | [css-select](https://github.com/fb55/css-select) | CSS selector engine, compatible with domhandler's DOM |
  17. | [cheerio](https://github.com/cheeriojs/cheerio) | The jQuery API for domhandler's DOM |
  18. | [dom-serializer](https://github.com/cheeriojs/dom-serializer) | Serializer for domhandler's DOM |
  19. ## Usage
  20. `htmlparser2` itself provides a callback interface that allows consumption of documents with minimal allocations.
  21. For a more ergonomic experience, read [Getting a DOM](#getting-a-dom) below.
  22. ```javascript
  23. const htmlparser2 = require("htmlparser2");
  24. const parser = new htmlparser2.Parser({
  25. onopentag(name, attributes) {
  26. /*
  27. * This fires when a new tag is opened.
  28. *
  29. * If you don't need an aggregated `attributes` object,
  30. * have a look at the `onopentagname` and `onattribute` events.
  31. */
  32. if (name === "script" && attributes.type === "text/javascript") {
  33. console.log("JS! Hooray!");
  34. }
  35. },
  36. ontext(text) {
  37. /*
  38. * Fires whenever a section of text was processed.
  39. *
  40. * Note that this can fire at any point within text and you might
  41. * have to stich together multiple pieces.
  42. */
  43. console.log("-->", text);
  44. },
  45. onclosetag(tagname) {
  46. /*
  47. * Fires when a tag is closed.
  48. *
  49. * You can rely on this event only firing when you have received an
  50. * equivalent opening tag before. Closing tags without corresponding
  51. * opening tags will be ignored.
  52. */
  53. if (tagname === "script") {
  54. console.log("That's it?!");
  55. }
  56. },
  57. });
  58. parser.write(
  59. "Xyz <script type='text/javascript'>const foo = '<<bar>>';</ script>"
  60. );
  61. parser.end();
  62. ```
  63. Output (with multiple text events combined):
  64. ```
  65. --> Xyz
  66. JS! Hooray!
  67. --> const foo = '<<bar>>';
  68. That's it?!
  69. ```
  70. This example only shows three of the possible events.
  71. Read more about the parser, its events and options in the [wiki](https://github.com/fb55/htmlparser2/wiki/Parser-options).
  72. ### Usage with streams
  73. While the `Parser` interface closely resembles Node.js streams, it's not a 100% match.
  74. Use the `WritableStream` interface to process a streaming input:
  75. ```javascript
  76. const { WritableStream } = require("htmlparser2/lib/WritableStream");
  77. const parserStream = new WritableStream({
  78. ontext(text) {
  79. console.log("Streaming:", text);
  80. },
  81. });
  82. const htmlStream = fs.createReadStream("./my-file.html");
  83. htmlStream.pipe(parserStream).on("finish", () => console.log("done"));
  84. ```
  85. ## Getting a DOM
  86. The `DomHandler` produces a DOM (document object model) that can be manipulated using the [`DomUtils`](https://github.com/fb55/DomUtils) helper.
  87. ```js
  88. const htmlparser2 = require("htmlparser2");
  89. const dom = htmlparser2.parseDocument();
  90. ```
  91. The `DomHandler`, while still bundled with this module, was moved to its [own module](https://github.com/fb55/domhandler).
  92. Have a look at that for further information.
  93. ## Parsing RSS/RDF/Atom Feeds
  94. ```javascript
  95. const feed = htmlparser2.parseFeed(content, options);
  96. ```
  97. Note: While the provided feed handler works for most feeds,
  98. you might want to use [danmactough/node-feedparser](https://github.com/danmactough/node-feedparser), which is much better tested and actively maintained.
  99. ## Performance
  100. After having some artificial benchmarks for some time, **@AndreasMadsen** published his [`htmlparser-benchmark`](https://github.com/AndreasMadsen/htmlparser-benchmark), which benchmarks HTML parses based on real-world websites.
  101. At the time of writing, the latest versions of all supported parsers show the following performance characteristics on [Travis CI](https://travis-ci.org/AndreasMadsen/htmlparser-benchmark/builds/10805007) (please note that Travis doesn't guarantee equal conditions for all tests):
  102. ```
  103. gumbo-parser : 34.9208 ms/file ± 21.4238
  104. html-parser : 24.8224 ms/file ± 15.8703
  105. html5 : 419.597 ms/file ± 264.265
  106. htmlparser : 60.0722 ms/file ± 384.844
  107. htmlparser2-dom: 12.0749 ms/file ± 6.49474
  108. htmlparser2 : 7.49130 ms/file ± 5.74368
  109. hubbub : 30.4980 ms/file ± 16.4682
  110. libxmljs : 14.1338 ms/file ± 18.6541
  111. parse5 : 22.0439 ms/file ± 15.3743
  112. sax : 49.6513 ms/file ± 26.6032
  113. ```
  114. ## How does this module differ from [node-htmlparser](https://github.com/tautologistics/node-htmlparser)?
  115. This module started as a fork of the `htmlparser` module.
  116. The main difference is that `htmlparser2` is intended to be used only with node (it runs on other platforms using [browserify](https://github.com/substack/node-browserify)).
  117. `htmlparser2` was rewritten multiple times and, while it maintains an API that's compatible with `htmlparser` in most cases, the projects don't share any code anymore.
  118. The parser now provides a callback interface inspired by [sax.js](https://github.com/isaacs/sax-js) (originally targeted at [readabilitySAX](https://github.com/fb55/readabilitysax)).
  119. As a result, old handlers won't work anymore.
  120. The `DefaultHandler` and the `RssHandler` were renamed to clarify their purpose (to `DomHandler` and `FeedHandler`). The old names are still available when requiring `htmlparser2`, your code should work as expected.
  121. ## Security contact information
  122. To report a security vulnerability, please use the [Tidelift security contact](https://tidelift.com/security).
  123. Tidelift will coordinate the fix and disclosure.
  124. ## `htmlparser2` for enterprise
  125. Available as part of the Tidelift Subscription
  126. The maintainers of `htmlparser2` and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use. [Learn more.](https://tidelift.com/subscription/pkg/npm-htmlparser2?utm_source=npm-htmlparser2&utm_medium=referral&utm_campaign=enterprise&utm_term=repo)