Separar por partes una cadena con jQuery

En este artículo vamos a ver como separar por partes una cadena con jQuery. Siendo más precisos vamos a ver como obtener una fecha y separarla según los carácteres «espacio, dos puntos y guión» ya que son los carácteres especiales que podemos ver en el formato de registro de fechas en un base de datos.

Para situarnos en el ejemplo debemos pensar que estamos obteniendo la siguiente fecha de una base de datos o archivo:

<div id="fecha">2012-07-25 18:30:50</div>

En algún lugar de nuestra página también pondremos un link con id=»see» para ejececutar el ejemplo:

<a href="#" id="see">Ver efecto</a>

En nuestro <head> tendremos el código jQuery que se encargará de realizar la acción:

<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $('#see').click(function(){
        var element = $("#fecha").text().split(' ');
        var fecha = element[0].split('-');
        alert('Fecha formateada: '+fecha[2]+'/'+fecha[1]+'/'+fecha[0]);
        var tiempo = element[1].split(':');
        alert('Tiempo formateado: '+tiempo[0]+'h '+tiempo[1]+'min '+tiempo[2]+' seg');
        return false;
    });
});
</script>

En este caso, el documento está esperando a que el link con id=»see» sea pulsado para separar la fecha por espacio, para tener por un lado lo que es la fecha (dia, mes y año) y por otro lado la hora (horas, minutos y segundos).

Aquí simplemente estamos mostrando los resultados habiendo capturado previamente cada concepto del campo fecha pero se podrían hacer cosas más extraordinarias como ejecutar una cuenta atrás obteniendo estos valores.

Ver el ejemplo en funcionamiento

 

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(2 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

4 respuestas a “Separar por partes una cadena con jQuery”

  1. ERICK DAVID MARCILLO CHUMAÑA dice:

    Ay como cortar por \

  2. Erick dice:

    Como hago para meter esos datos a un input de HTML5 ?

  3. Carlos dice:

    Muchas gracias me sirvió mucho tu tutorial

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre