Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tarantinoarchive/won
A new way to see HTML Web Pages
https://github.com/tarantinoarchive/won
algorithm cli comparison convertions css css-parsing development html html-page js-binding json languages languages-binding npm web won
Last synced: about 2 months ago
JSON representation
A new way to see HTML Web Pages
- Host: GitHub
- URL: https://github.com/tarantinoarchive/won
- Owner: TarantinoArchive
- License: gpl-3.0
- Created: 2020-05-25T22:33:00.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-06-01T12:49:11.000Z (over 4 years ago)
- Last Synced: 2024-11-08T09:12:31.637Z (about 2 months ago)
- Topics: algorithm, cli, comparison, convertions, css, css-parsing, development, html, html-page, js-binding, json, languages, languages-binding, npm, web, won
- Language: JavaScript
- Homepage: https://gianlucatarantino.github.io/won/
- Size: 465 KB
- Stars: 15
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# WON
## Web Object Notation
## Introduction
Won is a multi purpose HTML/CSS to JSON (and vice-versa) converting tool. It is very useful for various applications in the field of web development, for example it helps a lot in web pages parsing and modification in some tedious languages like C, because all you have to do is use an easy JSON.
I made WON because recently, while making a web scraping project with C++, I noticed that in languages like this is very difficult to get a code (and human) friendly representation of an HTML page. (It is also my very first Open Source Project!)
## Table of Contents
1. [How is it made](#how-is-it-made)
2. [How does it works (CLI)](#how-does-cli-works)
3. [How does it works (JS)](#how-does-js-binding-works)
4. [Comparison](#comparison)
5. [Features](#features)
6. [How to install](#how-to-install)
7. [Support](#support)
### How is it made?
It is currently made in Node.JS, using [htmlparser2](https://www.npmjs.com/package/htmlparser2) (go check their [repo](https://github.com/fb55/htmlparser2), this is an awesome Node Package) because this was the fastest implementation for HTML parsing on the NPM scenario.
(For the CSS Parsing I was struggling a bit, then I found an [answer](https://stackoverflow.com/questions/5240778/css-to-json-parser-or-converter/60451920#60451920) on Stack Overflow with a pretty decent already made algorithm for CSS parsing, so I said "Why not?". I just increased the readability of the code, but the algorithm is took from that answer.)
### How does CLI works
It is currently a CLI utility and a JS library. Alongside the JS version, other languages binding will be developed.
Using `won -hj pathToFile.html` you will get a JSON output file, structured like a valid WON Object. Using `won -jh pathToFile.json` you will get a HTML file. Same for CSS, but use a `c` instead of the `h` (example: `won -cj pathToFile.css`). Add `-o outputName.o` to determine a name for the output file.
### How does JS binding works
Alongside the JS version, other languages binding will be developed.
**Example code**
```javascript
const won = require("won");
let exampleHTML = `
Test
`
let wonObject = won.HTMLtoJSON(exampleHTML);
console.log(wonObject.children[0].children[0].text); // Test
```
In the next paragraph, there is the correct WON Object Structure.
For more documentation on functions, parameters and return types, check [won.js](https://github.com/GianlucaTarantino/won/blob/master/won.js).
### Comparison
HTML | JSON
:----:|:-----:
 | 
**JSON is quite longer than the HTML document, but it can be easily read by most languages**
## Features
(✅) Done | (❎) Work in Progress | (🔜) Will soon be WIP
- HTML to JSON (✅)
- JSON to HTML (✅)
- Installing to PATH via NPM (✅)
- Adding help in CLI (✅)
- CSS to JSON (✅)
- JSON to CSS (✅)
- JavaScript binding (✅)
- Other Languages binding (🔜)
- Tools using WON (🔜)
## How to install
Currently, is supported manual installation, and NPM installation.
NPM Installation:
1. In terminal, write `sudo npm install won-js -g`
2. Enjoy!
Manual Installation:
1. In terminal, write `git clone https://github.com/GianlucaTarantino/won.git` (or just download the repo)
2. Go to the repository directory
3. In terminal, write `sudo npm link`
4. Enjoy!
Now you can use WON as described before!
## Support
For support, just create an issue or contact me at [email protected]