¿Cómo convertir un título en una URL en jQuery?
Estoy trabajando en una aplicación en CodeIgniter y estoy intentando hacer que un campo en un formulario genere dinámicamente el slug URL . Lo que me gustaría hacer es eliminar la puntuación, convertirla a minúsculas y reemplazar los espacios con guiones. Entonces, por ejemplo, Shane's Rib Shack se convertiría en shanes-rib-shack.
Esto es lo que tengo hasta ahora. La parte en minúsculas fue fácil, pero el reemplazo no parece funcionar en absoluto y no tengo idea de eliminar la puntuación:
$("#Restaurant_Name").keyup(function() {
var Text = $(this).val();
Text = Text.toLowerCase();
Text = Text.replace('/\s/g','-');
$("#Restaurant_Slug").val(Text);
});
No tengo idea de dónde viene el término "babosa", pero allá vamos:
function convertToSlug(Text) {
return Text.toLowerCase()
.replace(/ /g, "-")
.replace(/[^\w-]+/g, "");
}
console.log(convertToSlug("hello world!"));
console.log(convertToSlug("hello - world!"));El primer replacemétodo cambiará los espacios a guiones; el segundo, reemplazar elimina todo lo que no sea alfanumérico, guión bajo o guión.
Si no quieres que cosas "como - esta" se conviertan en "como---esta", entonces puedes usar esta:
function convertToSlug(Text) {
return Text.toLowerCase()
.replace(/[^\w ]+/g, "")
.replace(/ +/g, "-");
}
console.log(convertToSlug("hello world!"));
console.log(convertToSlug("hello - world!"));Eso eliminará los guiones (pero no los espacios) en el primer reemplazo, y en el segundo reemplazo condensará los espacios consecutivos en un solo guión.
Entonces "así" sale como "así".
var slug = function(str) {
str = str.replace(/^\s+|\s+$/g, ''); // trim
str = str.toLowerCase();
// remove accents, swap ñ for n, etc
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));
}
str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
.replace(/\s+/g, '-') // collapse whitespace and replace by -
.replace(/-+/g, '-'); // collapse dashes
return str;
};
y prueba
slug($('#field').val())
original de: http://dense13.com/blog/2009/05/03/converting-string-to-slug-javascript/
EDITAR: ampliado para caracteres más específicos del idioma:
var from = "ÁÄÂÀÃÅČÇĆĎÉĚËÈÊẼĔȆĞÍÌÎÏİŇÑÓÖÒÔÕØŘŔŠŞŤÚŮÜÙÛÝŸŽáäâàãåčçćďéěëèêẽĕȇğíìîïıňñóöòôõøðřŕšşťúůüùûýÿžþÞĐđßÆa·/_,:;";
var to = "AAAAAACCCDEEEEEEEEGIIIIINNOOOOOORRSSTUUUUUYYZaaaaaacccdeeeeeeeegiiiiinnooooooorrsstuuuuuyyzbBDdBAa------";
En primer lugar, las expresiones regulares no deben tener comillas entre comillas, por lo que '/\s/g' debería ser /\s/g
Para reemplazar todos los caracteres no alfanuméricos con guiones, esto debería funcionar (usando su código de ejemplo):
$("#Restaurant_Name").keyup(function() {
var Text = $(this).val();
Text = Text.toLowerCase();
Text = Text.replace(/[^a-zA-Z0-9]+/g,'-');
$("#Restaurant_Slug").val(Text);
});
Eso debería hacer el truco...
