JSFiddle - React, Tailwind, and code Playground
HTML
<!-- change html here -->
<section>
<div class="section-title">HTML:
</div>
<h1>Title</h1>
<p>Content content content</p>
<div class="user">
<div class="user-name">John</div>
<div class="user-age">25</div>
</div>
<div class="user">
<div class="user-name">Tim</div>
<div class="user-age">41</div>
</div>
<div class="user">
<div class="user-name">Peter</div>
<div class="user-age">33</div>
</div>
<div class="user">
<div class="user-name">George</div>
<div class="user-age">15</div>
</div>
</section>
<section><div class="section-title">Result (JSON-stringified):
</div>
<pre id="result"></pre></section>
CSS
body{
font-family: sans-serif;
}
#result{
max-width:600px;
display: block;
}
section{
margin:32px;
padding:20px 0;
}
section .section-title{
font-weight: bold;
text-transform: uppercase;
font-style: italic;
}
JavaScript
jQuery(function($){
//change structure here
var struct = {
title: 'h1',
content: 'p',
users: ['.user', {
name: '.user-name',
age: ['.user-age', [], 'toInt']
}]
}, result = jExtract(struct);
console.log(result);
$("#result").html(JSON.stringify(result, null, 4));
});
/**
jExtract: a function for extracting data from DOM.
Version: 0.0.7
Author: Mikhail Kormanowsky (@kormanowsky)
Date: 08.01.2018
*/
(function(){var b=function(A){return A===void 0},c=function(A){return"object"==typeof A&&A instanceof Object&&!(A instanceof Array)},d=function(A){return"object"==typeof A&&A instanceof Array},f=function(A){return t&&A instanceof t},g=function(A){return A instanceof s},h=function(A){return A instanceof NodeList},j=function(A){return"string"==typeof A},k=function(A){return j(A)&&!A.length},l=function(A){return!j(A)||k(A)?!1:(A=document.querySelector(A),null!==A)},m=function(A){if(!j(A)||k(A))return!1;try{A=JSON.parse(A)}catch(B){return!1}return!0},n=function(A){return!j(A)||k(A)?!1:(A=A.trim(),"<"==A[0]&&">"==A[A.length-1])},o=function(A){return d(A)&&!A.length},p=function(A){return"function"==typeof A},r=function(A){this.get=function(B){return B=B||!0,B?A.trim():A},this.match=function(B,C){var D=this.get().match(new RegExp(B));return!b(C)&&d(D)&&C in D?D[C]:D},this.toInt=function(B){return B=B||!1,!isNaN(parseInt(this.get()))||B?parseInt(this.get()):0},this.toFloat=function(B){B=B||!1;var C=this.get().replace(",",".");return!isNaN(parseFloat(C))||B?parseFloat(C):0}},s=function(A){this.text=function(){return A.innerText||A.textContent},this.attr=function(B){return A.getAttribute(B)},this.get=function(){return A}},t=!!p(window.jQuery)&&window.jQuery,u=function(A,B){if("."==B)return[A];if(!l(B))return console.error("jExtract error: couldn`t find elements that match selector \""+B+"\"."),!1;var C=A.get().querySelectorAll(B),D=[];return C=h(C)?C:[C],x(C,function(E,F){D[F]=new s(E)}),D},w=function(A,B){var...