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.

<p id="profile">
  My name is <span data-x="user.name">Fatih</span>,
  and I'm from <span data-x="user.location">Istanbul</span>.
</p>

You can simply extract data now just calling:

xtract($("#profile")).$model

This will generate following object:

{
  user: {
    name: "Fatih",
    location: "Istanbul"
  }
}

Extracting Nested Models

<p id="profile">
  My name is <span data-x="user.name.firstname">Fatih</span>
  <span data-x="user.name.lastname">Akın</span>,
  and I'm from <span data-x="user.location.city">Istanbul</span>,
  <span data-x="user.location.country.name">Turkey
  (<span data-x="user.location.country.code">TR</span>)</span>.
</p>

xtract($("#profile")).$model

This will generate following object:

{
  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.

<p id="profile">
  <img src="my-profile-picture.jpg" data-x="user.image: $this.attr('src')">
  My name is <span data-x="user.name">Fatih</span>,
  and I'm from <span data-x="user.location">Istanbul</span>.
</p>

xtract($("#profile")).$model

This will map the src tag to the user.image:

{
  user: {
    name: "Fatih",
    location: "Istanbul",
    image: "my-profile-picture.jpg"
  }
}

Plug-ins

You can simply write plugins to use extract easier.

xtract.plug('date', function () {
  return $(this).text().replace(/(\d+)\s+(\w+)\s+(\d+)/, '$3, $1 $2');
});

The static HTML:

<div>
  Einstein: <span data-x="date.birth: $this.date()">14 March 1879</span> –
  <span data-x="date.death: $this.date()">18 April 1955</span>
</div>

Output:

date: {
  birth: "1879, 14 March",
  death: "1955, 18 April"
},

License

MIT.