https://github.com/f/xtract
Extract data from DOM, easily.
https://github.com/f/xtract
Last synced: about 1 year ago
JSON representation
Extract data from DOM, easily.
- Host: GitHub
- URL: https://github.com/f/xtract
- Owner: f
- License: mit
- Created: 2015-01-07T23:08:37.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2020-07-09T22:48:35.000Z (almost 6 years ago)
- Last Synced: 2025-03-17T22:26:56.873Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 158 KB
- Stars: 41
- Watchers: 5
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Xtract
Extract data from DOM, easily. Useful for back-end generated contents and **SEO-friendly** rich apps.
## Installation
```
npm install xtract
```
## Requirements
- This works on browser, not node.js. But if you use *jsdom*, you can.
- Requires jQuery.
SEO is the main problem of modern web. And we have problems with passing the data from
**HTML to JavaScript**. Your **back-end** generated data is need to be mapped to JavaScript
and **Xtract** helps you to do that.
```html
My name is Fatih,
and I'm from Istanbul.
```
You can simply extract data now just calling:
```js
xtract($("#profile")).$model
```
This will generate following object:
```js
{
user: {
name: "Fatih",
location: "Istanbul"
}
}
```
## Extracting Nested Models
```html
My name is Fatih
Akın,
and I'm from Istanbul,
Turkey
(TR).
```
```js
xtract($("#profile")).$model
```
This will generate following object:
```js
{
user: {
name: {
firstname: "Fatih",
lastname: "Akın"
},
location: {
city: "Istanbul",
country: {
name: "Turkey",
code: "TR"
}
}
}
}
```
## Extracting with jQuery
You can use `$this` in `data-x` attribute to reach more values.
```html
My name is Fatih,
and I'm from Istanbul.
```
```js
xtract($("#profile")).$model
```
This will map the `src` tag to the `user.image`:
```js
{
user: {
name: "Fatih",
location: "Istanbul",
image: "my-profile-picture.jpg"
}
}
```
## Plug-ins
You can simply write plugins to use extract easier.
```js
xtract.plug('date', function () {
return $(this).text().replace(/(\d+)\s+(\w+)\s+(\d+)/, '$3, $1 $2');
});
```
The static HTML:
```html
Einstein: 14 March 1879 –
18 April 1955
```
Output:
```js
date: {
birth: "1879, 14 March",
death: "1955, 18 April"
},
```
## License
MIT.