https://github.com/huozhi/html2any
🌀 parse and convert html string to anything
https://github.com/huozhi/html2any
html-parser rich-text xml-parser
Last synced: 9 months ago
JSON representation
🌀 parse and convert html string to anything
- Host: GitHub
- URL: https://github.com/huozhi/html2any
- Owner: huozhi
- Created: 2017-07-27T16:08:07.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2025-03-25T04:40:20.000Z (11 months ago)
- Last Synced: 2025-04-30T09:17:20.975Z (9 months ago)
- Topics: html-parser, rich-text, xml-parser
- Language: JavaScript
- Homepage: https://html2any.vercel.app
- Size: 203 KB
- Stars: 74
- Watchers: 5
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# html2any
[](https://badge.fury.io/js/html2any)
> A non-dependecy package for coverting html/xml string to your customized format/structures.
While building websites, people may met issues for rendering rich text into different formats.
For example, I've got an `` tag, but I wanna render it with my own React video component.
But I also want to render the whole html easily rather than parse it manually.
Now `html2any` help you to render html string. It not only parses your html but also gives you ability to transform it from origin to the dest.
### API
html2any provide following APIs
- `AST(Object) parse(String source)`
- `void transform(AST ast, function rule)`
- `void html2any(html, function rule)`
- parse
> Build the AST from source to AST from source html/xml code
- transform
> Convert the AST to the final form with the specific rule.
- html2any
> Convert the html/xml to the final form directly.
### Usage
```
npm i -S html2any
```
```js
import html2any, { parse, transform } from 'html2any'
const html = escapeHTMLEntity(`
123`)
const ast = parse(html)[0]
function rule(node, children) {
if (typeof node === 'string') {
return node
} else {
return
{node}
}
}
const vdom = transform(ast, rule)
// JSX vdom form of html
// { type: 'div', props: {...}, children: '...' }
```
Or you can just call html2any directly
```js
const vdom = html2any(html, rule)
```
### How It Works
Use `html2any` to construct an AST of html string, then convert each node recursively with `rule` passed to transform function.
For example, we translate `
` tag into React Native component `` with the prepared styles. Then decode the p tag' s content to avoid html entities mess up.