944 063 154

Blog

Etiqueta: Html

Extraer elementos de una lista HTML y exportarlos a un array con PHP

Publicado enDesarrollo web

Puede que en algún momento de nuestras apasionantes vidas como desarrolladores web nos interese extraer el contenido de cada uno de los elementos de una lista HTML. Algo que habitualmente suele ir encabezado por <li>,<option> o similares. También puede que queramos almacenar esa información en un array que nos permita utilizarlos a lo largo de nuestra aplicación en cualquier otro momento.

Una lista HTML no es más que un párrafo en el que se recogen secuencias de artículos estructurados. Es decir, parte del código de la página web ordenado y agrupado según diferentes criterios. El lenguaje de marcado HTML define tres tipos de listas, la lista ordenada, la no ordenada y la lista de definiciones. Pero, para exportar estas listas a un array con PHP, no importa cuál sea el tipo de la lista. Puesto que el método que vamos a emplear a continuación es igualmente válido para cualquiera de los tres tipos de listas.

Cómo exportar una lista HTML

Para pasar la lista en HTML a un array en PHP, hemos escrito la función preg_replace de PHP. Esta función hace precisamente eso, buscar una expresión regular y sustituirla por otra diferente. Además, esta función permite no sólo sustuir funciones, sino también caracteres y cadenas en una cadena de texto. El uso de preg_replace() es de gran utilidad para eliminar espacios en blanco en el código de la web, corregir faltas de ortografía como acentos o editar caracteres especiales y saltos de línea. También es de gran utilidad para la creación de URLs amigables que mejoren en posicionamiento SEO de la página web.

Para recurrir a la función preg_replace, deberemos ejecutar un código similar al que mostramos a continuación:


function li2Array($html,$elemento="li"){

  $a = array("/<".$elemento.">(.*?)</".$elemento.">/is");
  $b = array("$1 <explode>");

  $html  = preg_replace($a, $b, $html);
  $array = explode("<explode>",$html);

  return $array;

}

Así, una vez enviada la petición, el resultado que devolverá la función será un array con toda la información que contuviera dicha lista en HTML. De esta forma, podremos utilizar esa información en cualquier otra aplicación recurriendo a PHP. Extrayendo la información del HTML evitamos tener que volver a introducirla de forma manual. Además, al ser compatible con PHP podremos utilizar esos datos en cualquier otra herramienta que sea compatible con PHP.

De esta forma cualquier modificación que vaya a realizarse en el código de la web será mucho más sencilla. Asimismo, el código será más limpio y ordenado y será más fácil actualizarlo a las nuevas versiones de PHP.

Y, como siempre, ¡mantente informado de sobre PHP y mucho más en el mejor blog sobre programación!

HTML templates con JQuery

Publicado enDesarrollo web

A veces nos acostumbramos a programar siguiendo un determinado patrón. Por ejemplo, si estás habituado a hacerlo siguiendo MVC, tener que realizar tareas en otro código puede resultarte incómodo. Esto puede ser el caso de hardcodear el código HTML en el código interno de una aplicación; nos resultará, además nada cómodo, poco limpio. Sin embargo, si por el contrario, sueles utilizar JavaScript, estarás mal acostumbrado a ver código limpio; como puede ser el siguiente script:


var html = "<li class='" + class + "'>" +
           "<input type='text' id='"+ id +"' /></li>";

Aunque el código en sí no es incorrecto; cuando tenemos que realizar cambios en nuestra aplicación (situación bastante común) sin volvernos locos, necesitaremos separar o hacer más mantenible ese HTML que queremos dinamizar desde JavaScript.

Escribiendo código HTML desde JavaScript

Una solución consiste en escribir el  HTML que vamos a reutilizar desde JavaScript; con una serie de patrones que sustituiremos más adelante por los valores que nos interesen. Para ello, podemos recurrir a la biblioteca multiplataforma JQuery de JavaScript. En este caso, si quisiéramos rellenar un elemento como el siguiente <ul> deberíamos recurrir al script que mostramos a continuación:


<ul id="list"></ul>

Junto antes de terminar el body colocaríamos el siguiente bloque de código HTML:


<div id="bloque_lista" style="display:none">

  <li class="|class|">
    <input type=”text” id=”input|row_id|” />
  </li>

</div>

Para rellenar la lista, bastaría con sustituir los patrones |class| y |row_id| por los valores que necesitemos.


function addItemToList() {

   var list     = $('#list');
   var class    = "rosa";
   var template = $('#bloque_lista').html();

   template = template.replace(/|class|/gi, class)

   for(var id=1;id<11;id++){

     list.append(template.replace(/|row_id|/gi, id));

   }

}