https://github.com/thecoderdream/html-parser
https://github.com/thecoderdream/html-parser
Last synced: 8 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/thecoderdream/html-parser
- Owner: TheCoderDream
- Created: 2023-09-11T11:10:27.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-11T15:59:42.000Z (almost 3 years ago)
- Last Synced: 2025-10-24T22:38:54.904Z (8 months ago)
- Language: TypeScript
- Size: 37.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# symbols-html-parser
## Description
`symbols-html-parser` is a JavaScript library that allows you to parse HTML into a structured object format. It provides a way to convert HTML markup into a tree-like structure, making it easier to work with and manipulate HTML content programmatically.
## Installation
To install `symbols-html-parser`, you can use npm:
```bash
npm install symbols-html-parser
```
## Usage
To use symbols-html-parser, import it into your JavaScript or TypeScript code:
```javascript
const { parseHtml } = require('symbols-html-parser/dist'); // For CommonJS
// or
import { parseHtml } from 'symbols-html-parser/dist'; // For ES Modules
```
### To parse an HTML file using the command line interface (CLI), run the following command:
```bash
node symbols-html-parser/dist/main.js example.html
```
## Parsing HTML
You can parse HTML content using the parseHtml function:
```javascript
const html = `
Hello, friends
Lorem ipsum dolor sit
This is the end
`;
const parsedHtml = parseHtml(html);
console.log(parsedHtml);
```
The `parseHtml` function takes an HTML string as input and returns a structured object representing the HTML content.
## Example Output
Here's an example of the output structure:
```javascript
{
tag: 'div',
text: 'Hello, friends',
style: {
backgroundColor: 'yellow',
fontSize: '14px'
},
id: 'first-div',
children: [{
tag: 'p',
text: 'Lorem ipsum dolor sit',
class: 'para',
style: {
fontFamily: 'monospace',
fontSize: '11px',
}
}, {
tag: 'footer',
style: {
width: 'auto',
height: '100px',
color: 'blue',
},
children: [{ tag: 'span', text: 'This is the end' }]
}]
}
```
## Using symbols-html-parser in a Browser
symbols-html-parser can be used in a web browser environment just like any other JavaScript library. To use it, you'll need to include the library in your HTML file and use it in your client-side JavaScript code. Here's a step-by-step guide on how to do that:
## Step 1: Include the Library
Include the symbols-html-parser library in your HTML file using a script tag. You can host the library on a CDN or include it from a local file. Here's an example using a CDN:
Note: I am going to deploy to CDN later
```html
```