plugin javascript jquery regex

javascript - jquery plugin string to slug



¿Cómo convertir un título a una URL slug en jQuery? (17)

Creé un complemento para implementar en la mayoría de los idiomas: http://leocaseiro.com.br/jquery-plugin-string-to-slug/

Uso predeterminado:

$(document).ready( function() { $("#string").stringToSlug(); });

Es muy fácil el plugin jQuery de stringToSlug

Estoy trabajando en una aplicación en CodeIgniter, y estoy tratando de crear un campo en un formulario que genere dinámicamente la URL slug. 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úscula fue fácil, pero el reemplazo no parece funcionar del todo, 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); });

Eche un vistazo a esta función slug para desinfectar las URL, desarrollada por Sean Murphy en https://gist.github.com/sgmurphy/3095196

/** * Create a web friendly URL slug from a string. * * Requires XRegExp (http://xregexp.com) with unicode add-ons for UTF-8 support. * * Although supported, transliteration is discouraged because * 1) most web browsers support UTF-8 characters in URLs * 2) transliteration causes a loss of information * * @author Sean Murphy <[email protected]> * @copyright Copyright 2012 Sean Murphy. All rights reserved. * @license http://creativecommons.org/publicdomain/zero/1.0/ * * @param string s * @param object opt * @return string */ function url_slug(s, opt) { s = String(s); opt = Object(opt); var defaults = { ''delimiter'': ''-'', ''limit'': undefined, ''lowercase'': true, ''replacements'': {}, ''transliterate'': (typeof(XRegExp) === ''undefined'') ? true : false }; // Merge options for (var k in defaults) { if (!opt.hasOwnProperty(k)) { opt[k] = defaults[k]; } } var char_map = { // Latin ''À'': ''A'', ''Á'': ''A'', ''Â'': ''A'', ''Ã'': ''A'', ''Ä'': ''A'', ''Å'': ''A'', ''Æ'': ''AE'', ''Ç'': ''C'', ''È'': ''E'', ''É'': ''E'', ''Ê'': ''E'', ''Ë'': ''E'', ''Ì'': ''I'', ''Í'': ''I'', ''Î'': ''I'', ''Ï'': ''I'', ''Ð'': ''D'', ''Ñ'': ''N'', ''Ò'': ''O'', ''Ó'': ''O'', ''Ô'': ''O'', ''Õ'': ''O'', ''Ö'': ''O'', ''Ő'': ''O'', ''Ø'': ''O'', ''Ù'': ''U'', ''Ú'': ''U'', ''Û'': ''U'', ''Ü'': ''U'', ''Ű'': ''U'', ''Ý'': ''Y'', ''Þ'': ''TH'', ''ß'': ''ss'', ''à'': ''a'', ''á'': ''a'', ''â'': ''a'', ''ã'': ''a'', ''ä'': ''a'', ''å'': ''a'', ''æ'': ''ae'', ''ç'': ''c'', ''è'': ''e'', ''é'': ''e'', ''ê'': ''e'', ''ë'': ''e'', ''ì'': ''i'', ''í'': ''i'', ''î'': ''i'', ''ï'': ''i'', ''ð'': ''d'', ''ñ'': ''n'', ''ò'': ''o'', ''ó'': ''o'', ''ô'': ''o'', ''õ'': ''o'', ''ö'': ''o'', ''ő'': ''o'', ''ø'': ''o'', ''ù'': ''u'', ''ú'': ''u'', ''û'': ''u'', ''ü'': ''u'', ''ű'': ''u'', ''ý'': ''y'', ''þ'': ''th'', ''ÿ'': ''y'', // Latin symbols ''©'': ''(c)'', // Greek ''Α'': ''A'', ''Β'': ''B'', ''Γ'': ''G'', ''Δ'': ''D'', ''Ε'': ''E'', ''Ζ'': ''Z'', ''Η'': ''H'', ''Θ'': ''8'', ''Ι'': ''I'', ''Κ'': ''K'', ''Λ'': ''L'', ''Μ'': ''M'', ''Ν'': ''N'', ''Ξ'': ''3'', ''Ο'': ''O'', ''Π'': ''P'', ''Ρ'': ''R'', ''Σ'': ''S'', ''Τ'': ''T'', ''Υ'': ''Y'', ''Φ'': ''F'', ''Χ'': ''X'', ''Ψ'': ''PS'', ''Ω'': ''W'', ''Ά'': ''A'', ''Έ'': ''E'', ''Ί'': ''I'', ''Ό'': ''O'', ''Ύ'': ''Y'', ''Ή'': ''H'', ''Ώ'': ''W'', ''Ϊ'': ''I'', ''Ϋ'': ''Y'', ''α'': ''a'', ''β'': ''b'', ''γ'': ''g'', ''δ'': ''d'', ''ε'': ''e'', ''ζ'': ''z'', ''η'': ''h'', ''θ'': ''8'', ''ι'': ''i'', ''κ'': ''k'', ''λ'': ''l'', ''μ'': ''m'', ''ν'': ''n'', ''ξ'': ''3'', ''ο'': ''o'', ''π'': ''p'', ''ρ'': ''r'', ''σ'': ''s'', ''τ'': ''t'', ''υ'': ''y'', ''φ'': ''f'', ''χ'': ''x'', ''ψ'': ''ps'', ''ω'': ''w'', ''ά'': ''a'', ''έ'': ''e'', ''ί'': ''i'', ''ό'': ''o'', ''ύ'': ''y'', ''ή'': ''h'', ''ώ'': ''w'', ''ς'': ''s'', ''ϊ'': ''i'', ''ΰ'': ''y'', ''ϋ'': ''y'', ''ΐ'': ''i'', // Turkish ''Ş'': ''S'', ''İ'': ''I'', ''Ç'': ''C'', ''Ü'': ''U'', ''Ö'': ''O'', ''Ğ'': ''G'', ''ş'': ''s'', ''ı'': ''i'', ''ç'': ''c'', ''ü'': ''u'', ''ö'': ''o'', ''ğ'': ''g'', // Russian ''А'': ''A'', ''Б'': ''B'', ''В'': ''V'', ''Г'': ''G'', ''Д'': ''D'', ''Е'': ''E'', ''Ё'': ''Yo'', ''Ж'': ''Zh'', ''З'': ''Z'', ''И'': ''I'', ''Й'': ''J'', ''К'': ''K'', ''Л'': ''L'', ''М'': ''M'', ''Н'': ''N'', ''О'': ''O'', ''П'': ''P'', ''Р'': ''R'', ''С'': ''S'', ''Т'': ''T'', ''У'': ''U'', ''Ф'': ''F'', ''Х'': ''H'', ''Ц'': ''C'', ''Ч'': ''Ch'', ''Ш'': ''Sh'', ''Щ'': ''Sh'', ''Ъ'': '''', ''Ы'': ''Y'', ''Ь'': '''', ''Э'': ''E'', ''Ю'': ''Yu'', ''Я'': ''Ya'', ''а'': ''a'', ''б'': ''b'', ''в'': ''v'', ''г'': ''g'', ''д'': ''d'', ''е'': ''e'', ''ё'': ''yo'', ''ж'': ''zh'', ''з'': ''z'', ''и'': ''i'', ''й'': ''j'', ''к'': ''k'', ''л'': ''l'', ''м'': ''m'', ''н'': ''n'', ''о'': ''o'', ''п'': ''p'', ''р'': ''r'', ''с'': ''s'', ''т'': ''t'', ''у'': ''u'', ''ф'': ''f'', ''х'': ''h'', ''ц'': ''c'', ''ч'': ''ch'', ''ш'': ''sh'', ''щ'': ''sh'', ''ъ'': '''', ''ы'': ''y'', ''ь'': '''', ''э'': ''e'', ''ю'': ''yu'', ''я'': ''ya'', // Ukrainian ''Є'': ''Ye'', ''І'': ''I'', ''Ї'': ''Yi'', ''Ґ'': ''G'', ''є'': ''ye'', ''і'': ''i'', ''ї'': ''yi'', ''ґ'': ''g'', // Czech ''Č'': ''C'', ''Ď'': ''D'', ''Ě'': ''E'', ''Ň'': ''N'', ''Ř'': ''R'', ''Š'': ''S'', ''Ť'': ''T'', ''Ů'': ''U'', ''Ž'': ''Z'', ''č'': ''c'', ''ď'': ''d'', ''ě'': ''e'', ''ň'': ''n'', ''ř'': ''r'', ''š'': ''s'', ''ť'': ''t'', ''ů'': ''u'', ''ž'': ''z'', // Polish ''Ą'': ''A'', ''Ć'': ''C'', ''Ę'': ''e'', ''Ł'': ''L'', ''Ń'': ''N'', ''Ó'': ''o'', ''Ś'': ''S'', ''Ź'': ''Z'', ''Ż'': ''Z'', ''ą'': ''a'', ''ć'': ''c'', ''ę'': ''e'', ''ł'': ''l'', ''ń'': ''n'', ''ó'': ''o'', ''ś'': ''s'', ''ź'': ''z'', ''ż'': ''z'', // Latvian ''Ā'': ''A'', ''Č'': ''C'', ''Ē'': ''E'', ''Ģ'': ''G'', ''Ī'': ''i'', ''Ķ'': ''k'', ''Ļ'': ''L'', ''Ņ'': ''N'', ''Š'': ''S'', ''Ū'': ''u'', ''Ž'': ''Z'', ''ā'': ''a'', ''č'': ''c'', ''ē'': ''e'', ''ģ'': ''g'', ''ī'': ''i'', ''ķ'': ''k'', ''ļ'': ''l'', ''ņ'': ''n'', ''š'': ''s'', ''ū'': ''u'', ''ž'': ''z'' }; // Make custom replacements for (var k in opt.replacements) { s = s.replace(RegExp(k, ''g''), opt.replacements[k]); } // Transliterate characters to ASCII if (opt.transliterate) { for (var k in char_map) { s = s.replace(RegExp(k, ''g''), char_map[k]); } } // Replace non-alphanumeric characters with our delimiter var alnum = (typeof(XRegExp) === ''undefined'') ? RegExp(''[^a-z0-9]+'', ''ig'') : XRegExp(''[^//p{L}//p{N}]+'', ''ig''); s = s.replace(alnum, opt.delimiter); // Remove duplicate delimiters s = s.replace(RegExp(''['' + opt.delimiter + '']{2,}'', ''g''), opt.delimiter); // Truncate slug to max. characters s = s.substring(0, opt.limit); // Remove delimiter from ends s = s.replace(RegExp(''(^'' + opt.delimiter + ''|'' + opt.delimiter + ''$)'', ''g''), ''''); return opt.lowercase ? s.toLowerCase() : s; }

En primer lugar, las expresiones regulares no deben tener comillas circundantes, por lo que ''/ / s / g'' debe 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...

Encontré una buena y completa solución para el inglés

function slugify(string) { return string .toString() .trim() .toLowerCase() .replace(//s+/g, "-") .replace(/[^/w/-]+/g, "") .replace(//-/-+/g, "-") .replace(/^-+/, "") .replace(/-+$/, ""); }

Algunos ejemplos de esto en uso:

slugify(12345); // "12345" slugify(" string with leading and trailing whitespace "); // "string-with-leading-and-trailing-whitespace" slugify("mIxEd CaSe TiTlE"); // "mixed-case-title" slugify("string with - existing hyphens -- "); // "string-with-existing-hyphens" slugify("string with Special™ characters"); // "string-with-special-characters"

Gracias a Andrew Stewart

Es posible que desee echar un vistazo al plugin speakingURL y luego simplemente podría:

$("#Restaurant_Name").on("keyup", function () { var slug = getSlug($("#Restaurant_Name").val()); $("#Restaurant_Slug").val(slug); });

Espero que esto pueda salvar el día de alguien ...

/* Encode string to slug */ function convertToSlug( str ) { //replace all special characters | symbols with a space str = str.replace(/[`~!@#$%^&*()_/-+=/[/]{};:''"//|//,.<>?/s]/g, '' '').toLowerCase(); // trim spaces at start and end of string str = str.replace(/^/s+|/s+$/gm,''''); // replace space with dash/hyphen str = str.replace(//s+/g, ''-''); return str; }

La respuesta aceptada no satisfacía mis necesidades (permite guiones bajos, no maneja guiones al principio y al final, etc.), y las otras respuestas tenían otros problemas que no se adaptaban a mi caso de uso, así que aquí está la función slugify Se me ocurrio:

function slugify(string) { return string.trim() // Remove surrounding whitespace. .toLowerCase() // Lowercase. .replace(/[^a-z0-9]+/g,''-'') // Find everything that is not a lowercase letter or number, one or more times, globally, and replace it with a dash. .replace(/^-+/, '''') // Remove all dashes from the beginning of the string. .replace(/-+$/, ''''); // Remove all dashes from the end of the string. }

Esto hará que ''foo !!! BAR _-_-_ baz-'' (nótese el espacio al principio) en foo-bar-baz .

Método de generación de slug más poderoso en JavaScript puro. Básicamente es transliteración de soporte para todos los caracteres cirílicos y muchos diéresis (alemán, danés, francés, turco, ucraniano, etc.) pero puede ampliarse fácilmente.

function makeSlug(str) { var from="а б в г д е ё ж з и й к л м н о п р с т у ф х ц ч ш щ ъ ы ь э ю я ā ą ä á à â å č ć ē ę ě é è ê æ ģ ğ ö ó ø ǿ ô ő ḿ ʼn ń ṕ ŕ ş ü ß ř ł đ þ ĥ ḧ ī ï í î ĵ ķ ł ņ ń ň ř š ś ť ů ú û ứ ù ü ű ū ý ÿ ž ź ż ç є ґ".split('' ''); var to= "a b v g d e e zh z i y k l m n o p r s t u f h ts ch sh shch # y # e yu ya a a ae a a a a c c e e e e e e e g g oe o o o o o m n n p r s ue ss r l d th h h i i i i j k l n n n r s s t u u u u u u u u y y z z z c ye g".split('' ''); str = str.toLowerCase(); // remove simple HTML tags str = str.replace(/(<[a-z0-9/-]{1,15}[/s]*>)/gi, ''''); str = str.replace(/(<//[a-z0-9/-]{1,15}[/s]*>)/gi, ''''); str = str.replace(/(<[a-z0-9/-]{1,15}[/s]*//>)/gi, ''''); str = str.replace(/^/s+|/s+$/gm,''''); // trim spaces for(i=0; i<from.length; ++i) str = str.split(from[i]).join(to[i]); // Replace different kind of spaces with dashes var spaces = [/(&nbsp;|&#160;|&#32;)/gi, /(&mdash;|&ndash;|&#8209;)/gi, /[(_|=|//|/,|/.|!)]+/gi, //s/gi]; for(i=0; i<from.length; ++i) str = str.replace(spaces[i], ''-''); str = str.replace(/-{2,}/g, "-"); // remove special chars like &amp; str = str.replace(/&[a-z]{2,7};/gi, ''''); str = str.replace(/&#[0-9]{1,6};/gi, ''''); str = str.replace(/&#x[0-9a-f]{1,6};/gi, ''''); str = str.replace(/[^a-z0-9/-]+/gmi, ""); // remove all other stuff str = str.replace(/^/-+|/-+$/gm,''''); // trim edges return str; }; document.getElementsByTagName(''pre'')[0].innerHTML = makeSlug(" <br/> &#x202A;Про&amp;вер<strong>ка_тран</strong>с…литеърьации/rюга/nи&ndash;южного&nbsp;округа/t /nс/tёжикам&#180;и&nbsp;со//всеми&ndash;друзьями/tтоже.Danke schön!ich heiße=КáÞÿá-Skånske,København çağatay rí gé tőr zöldülésetekről - . ");

<div> <pre>Hello world!</pre> </div>

No tengo idea de dónde vino el término ''slug'', pero aquí vamos:

function convertToSlug(Text) { return Text .toLowerCase() .replace(/ /g,''-'') .replace(/[^/w-]+/g,'''') ; }

Primero reemplazar cambiará espacios por guiones, en segundo lugar se eliminará cualquier cosa que no sea alfanumérica, guión bajo o guión.

Si no quieres que las cosas "como - esto" se conviertan en "me gusta - esto" entonces puedes usar este:

function convertToSlug(Text) { return Text .toLowerCase() .replace(/[^/w ]+/g,'''') .replace(/ +/g,''-'') ; }

Eso eliminará los guiones (pero no los espacios) en el primer reemplazo, y en el segundo reemplazo, condensará espacios consecutivos en un solo guión.

Entonces "like - this" sale como "like-this".

Puedes usar tu propia función para esto.

pruébalo: http://jsfiddle.net/xstLr7aj/

function string_to_slug(str) { str = str.replace(/^/s+|/s+$/g, ''''); // trim str = str.toLowerCase(); // remove accents, swap ñ for n, etc var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;"; var to = "aaaaeeeeiiiioooouuuunc------"; 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; } $(document).ready(function() { $(''#test'').submit(function(){ var val = string_to_slug($(''#t'').val()); alert(val); return false; }); });

Sin embargo, otro más. Corto y mantiene caracteres especiales:

imaginação é mato => imaginacao-e-mato

function slugify (text) { const a = ''àáäâãèéëêìíïîòóöôùúüûñçßÿœæŕśńṕẃǵǹḿǘẍźḧ·/_,:;'' const b = ''aaaaaeeeeiiiioooouuuuncsyoarsnpwgnmuxzh------'' const p = new RegExp(a.split('''').join(''|''), ''g'') return text.toString().toLowerCase() .replace(//s+/g, ''-'') // Replace spaces with - .replace(p, c => b.charAt(a.indexOf(c))) // Replace special chars .replace(/&/g, ''-and-'') // Replace & with ''and'' .replace(/[^/w/-]+/g, '''') // Remove all non-word chars .replace(//-/-+/g, ''-'') // Replace multiple - with single - .replace(/^-+/, '''') // Trim - from start of text .replace(/-+$/, '''') // Trim - from end of text }

Todo lo que necesitabas era un plus :)

$("#Restaurant_Name").keyup(function(){ var Text = $(this).val(); Text = Text.toLowerCase(); var regExp = //s+/g; Text = Text.replace(regExp,''-''); $("#Restaurant_Slug").val(Text); });

Para personas que ya usan lodash

La mayoría de estos ejemplos son realmente buenos y cubren muchos casos. Pero si ''sabes'' que solo tienes texto en inglés, aquí está mi versión que es súper fácil de leer :)

_.words(_.toLower(text)).join(''-'')

// // jQuery Slug Plugin by Perry Trinier ([email protected]) // MIT License: http://www.opensource.org/licenses/mit-license.php jQuery.fn.slug = function(options) { var settings = { slug: ''slug'', // Class used for slug destination input and span. The span is created on $(document).ready() hide: true // Boolean - By default the slug input field is hidden, set to false to show the input field and hide the span. }; if(options) { jQuery.extend(settings, options); } $this = $(this); $(document).ready( function() { if (settings.hide) { $(''input.'' + settings.slug).after("<span class="+settings.slug+"></span>"); $(''input.'' + settings.slug).hide(); } }); makeSlug = function() { var slug = jQuery.trim($this.val()) // Trimming recommended by Brooke Dukes - http://www.thewebsitetailor.com/2008/04/jquery-slug-plugin/comment-page-1/#comment-23 .replace(//s+/g,''-'').replace(/[^a-zA-Z0-9/-]/g,'''').toLowerCase() // See http://www.djangosnippets.org/snippets/1488/ .replace(//-{2,}/g,''-''); // If we end up with any ''multiple hyphens'', replace with just one. Temporary bugfix for input ''this & that''=>''this--that'' $(''input.'' + settings.slug).val(slug); $(''span.'' + settings.slug).text(slug); } $(this).keyup(makeSlug); return $this; };

¡Esto me ayudó con el mismo problema!

function slugify(text){ return text.toString().toLowerCase() .replace(//s+/g, ''-'') // Replace spaces with - .replace(/[^/u0100-/uFFFF/w/-]/g,''-'') // Remove all non-word chars ( fix for UTF-8 chars ) .replace(//-/-+/g, ''-'') // Replace multiple - with single - .replace(/^-+/, '''') // Trim - from start of text .replace(/-+$/, ''''); // Trim - from end of text }

* basado en gist.github.com/mathewbyrne/1280286

ahora puedes transformar esta cadena:

Barack_Obama Барак_Обама ~!@#$%^&*()+/-+?><:";''{}[]/|`

dentro:

barack_obama-барак_обама

aplicando a tu código:

$("#Restaurant_Name").keyup(function(){ var Text = $(this).val(); Text = slugify(Text); $("#Restaurant_Slug").val(Text); });

private string ToSeoFriendly(string title, int maxLength) { var match = Regex.Match(title.ToLower(), "[//w]+"); StringBuilder result = new StringBuilder(""); bool maxLengthHit = false; while (match.Success && !maxLengthHit) { if (result.Length + match.Value.Length <= maxLength) { result.Append(match.Value + "-"); } else { maxLengthHit = true; // Handle a situation where there is only one word and it is greater than the max length. if (result.Length == 0) result.Append(match.Value.Substring(0, maxLength)); } match = match.NextMatch(); } // Remove trailing ''-'' if (result[result.Length - 1] == ''-'') result.Remove(result.Length - 1, 1); return result.ToString(); }

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 por: http://dense13.com/blog/2009/05/03/converting-string-to-slug-javascript/

EDITAR: extendido para más caracteres específicos del idioma:

var from = "ÁÄÂÀÃÅČÇĆĎÉĚËÈÊẼĔȆÍÌÎÏŇÑÓÖÒÔÕØŘŔŠŤÚŮÜÙÛÝŸŽáäâàãåčçćďéěëèêẽĕȇíìîïňñóöòôõøðřŕšťúůüùûýÿžþÞĐđßÆa·/_,:;"; var to = "AAAAAACCCDEEEEEEEEIIIINNOOOOOORRSTUUUUUYYZaaaaaacccdeeeeeeeeiiiinnooooooorrstuuuuuyyzbBDdBAa------";