1

necesito crear un script con jquery que me lea todo un bloque html y me obtenga los tag html, sus atributos y su contenido esto mismo se debe hacer con los tag hijos, después crear un objeto json con todos los datos.

Esto lo que he estado probando.

function gen4(block){
    
  var attr = []
  var child = []

  var attr2 = []
  var child = []

  $(block).each(function(){

      // objeto       
      var obj = new Object()
      obj.tag = $(this).prop('tagName')
      obj.attr = attr
      obj.child = child


      //obtiene los atributos de todos los divs padres
      $(this.attributes).each(function(index){
          if(this.specified){
              var data = {'name':this.name, 'value':this.value}
              attr.push(data )
          }

      })

      //obtiene los atributos de todos los divs hijos
      $(this).children().each(function(index, element){

          var obj2 = new Object()
          obj2.tag = $(this).prop('tagName')
          obj2.attr = attr2
          obj2.child = child

          $(element.attributes).each(function(){
              var data = {'name':this.name, 'value':this.value}
              attr2.push(data)
              child.push(obj2)
          })
      })

     console.log(obj)  

     //var arr = JSON.stringify(obj)
     //console.log(arr)
  })

}
$(document).ready(function(){    
  gen4('.story div')
})
<!doctype html>
<html lang="es">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <title>test story</title>
  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div id="story" class="story">
                    <div class='block-title' style="background:red;color:white;">
                        <h2 class='title' style="font-weight:bold;"> title </h2>
                    </div>
                    <div class='block-image' data-value="value1" data-value2="value2">
                        <img class='foto' src="foto.png" alt=":)" />
                        <div class='hijo'>
                            <div class='nieto'>
                                <p> texto </p>
                            </div>
                        </div>
                    </div>
                    <div class='block-content'>
                        <p class='texto'>
                            Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
                        </p>
                    </div>            
                </div>
            </div>
            <div class="col-md-6">
                <button> generar </button>
            </div>
        </div>    
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

  </body>

 <script>

 </script> 
</html>

1 respuesta 1

2

Para capturar todos los elementos contenidos dentro de un elemento html hay varias maneras dependiendo de lo que se quiera hacer.

1) si lo que se quiere hacer es obtener una estructura en la que SÍ importa la relación padre hijo se puede usar una función recursiva.

    var obj={};
    var body=document.body;
    function getAllChild(element,obj){
        obj.tag=element.localName;
        obj.value=element.value;
        obj.name=element.name;
        if(element.children.length!=0){
            obj.children=[];
            [].forEach.call(element.children,(val,i)=>{
                obj.children[i]={};
                getAllChild(val,obj.children[i]);
            });
        }
    }

Esta función crea un objeto con todos los hijos del elemento (body) y lo estructura como un árbol genealógico. Recibe como parámetros un elemento y un objeto vacío.

    getAllChild(body,obj);
    console.log(obj);

Para convertir el objeto JSON se puede usar la función stringify.

    var json=JSON.stringify(obj);
    console.log(json);

Como muchos elementos no tienen value ni name, el objeto generado va a tener estos valores undefined, ahí ya es cuestión de modificar el ejemplo para que guarde propiedades existentes o para que solo guarde elementos con esos atributos.

2) si NO importa la relación padre hijo entre elementos se puede hacer un bucle simple:

    var arr=[];
    var body=document.body;
    function getAllChild(element,arr){
        [].forEach.call(element.querySelectorAll('*'),(val)=>{
            arr.push({tag:val.localName,value:val.value,name:val.name});
        });
    }

En este caso element.querySelectorAll('*') selecciona los elementos contenidos en el elemento, sin importar si son hijos o están dentro de estos...

    getAllChild(body,arr);
    console.log(arr);

    var json=JSON.stringify(arr);
    console.log(json);

Esta pregunta ya tiene sus días pero espero le sirva a la comunidad...

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.