Como convertir títulos en slugs con php y con jQuery

blog-post
Como convertir títulos en slugs con php y con jQuery

Una de las funciones necesarias para usar urls amigables en un blog es la de convertir títulos en slugs. Esto es necesario porque hay ciertos caracteres que no se pueden usar en una url(espacios, comas, puntos, etc). En este post te explico como hacer una función para convertir títulos en slugs.

Primero veamos la versión en php:

<?php
//convertir a minúsculas
//remover acentos, ñ, carácteres extraños
//remplazar espacios por guiones
function titleToSlug($title){
	//convierto la cadena completa
	//a minúsculas
	$slug = strtolower($title);
	
	//convierto los acentos y eñes
	$arr1 = array('á','é','í','ó','ú','ñ');
	$arr2 = array('a','e','i','o','u','n');
		
	//reemplazo la aparición de los caracteres del array1
	//por los de array2 en $slug
	$slug = str_replace($arr1, $arr2, $slug);
	
	//limito la cadena a caracteres de la a a la z y del 0 al 9
	//y remplazo los espacios por guiones - 
	$slug = preg_replace('/[^a-z0-9-]+/', '-', $slug);
	
	return $slug;
}

?>

Para probarla, voy a usar el ejemplo:

<?php
$title = "Como hacer que tus posts sean más llamativos creando imágenes de portada con gimp";
$slug = titleToSlug($title);
?>

Que devuelve:

como-hacer-que-tus-posts-sean-mas-llamativos-creando-imagenes-de-portada-con-gimp

Veamos la versión javascript con jQuery tomada de http://dense13.com/blog/2009/05/03/converting-string-to-slug-javascript/


var titleToSlug = function(str) {
  str = str.replace(/^\s+|\s+$/g, ''); // trim
  str = str.toLowerCase();

  //remueve los acentos, cambia eñes por enes
  var from = "ãàáäâ?èéëêìíïîõòóöôùúüûñç·/_,:;";
  var to   = "aaaaaeeeeeiiiiooooouuuunc------";
  for (var i=0, l=from.length ; i<l ; i++) {
    str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
  }
	
  //borra caracteres que no sean de 
  //la a a la z y del 0 al 9
  str = str.replace(/[^a-z0-9 -]/g, '')
    .replace(/\s+/g, '-') // collapsa si hay más de un espacio en blanco y lo remplaza por -
    .replace(/-+/g, '-'); // collapsa si hay más de un guion

  return str;
};

Para probarla, voy a usar el mismo ejemplo:

var title = "Como hacer que tus posts sean más llamativos creando imágenes de portada con gimp",
slug = titleToSlug(title);

console.log(slug);
//devuelve
//como-hacer-que-tus-posts-sean-mas-llamativos-creando-imagenes-de-portada-con-gimp

Y eso es todo por este post. Espero que te sean de utilidad. Saludos!