How to convert a Title to a URL slug in jQuery

Question

I m working on an app in CodeIgniter  and I am trying to make a field on a form dynamically generate the URL slug  What I d like to do is remove the punctuation  convert it to lowercase  and replace the spaces with hyphens  So for example  Shane s Rib Shack would become shanes-rib-shack   Here s what I have so far  The lowercase part was easy  but the replace doesn t seem to be working at all  and I have no idea to remove the punctuation       Restaurant Name   keyup function        var Text     this  val        Text   Text toLowerCase        Text   Text replace    s g   -            Restaurant Slug   val Text

User · Answer

The accepted answer didn t meet my needs  it allows underscores  doesn t handle dashes at the beginning and end  etc    and the other answers had other issues that didn t suit my use case  so here s the slugify function I came up with   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      This will turn   foo   BAR - - baz-   note the space at the beginning  into foo-bar-baz

User · Answer

Hope this can save someone s day      x000D   x000D     Encode string to slug    x000D  function convertToSlug  str     x000D    x000D      replace all special characters   symbols with a space x000D    str   str replace            amp      -                    lt  gt   s  g       toLowerCase    x000D    x000D       trim spaces at start and end of string x000D    str   str replace    s   s   gm      x000D    x000D       replace space with dash hyphen x000D    str   str replace   s  g   -     x000D    document getElementById  slug-text   innerHTML  str  x000D      return str  x000D    x000D   lt input type  text  onload  convertToSlug this value   onkeyup  convertToSlug this value   value  Try it Yourself   gt  x000D   lt p id  slug-text  gt  lt  p gt  x000D   x000D   x000D

User · Answer

function slugify content       return content toLowerCase   replace    g  -   replace     w-   g           slugify  Hello World       this will return  hello-world     this works for me fine   Found it on CodeSnipper

User · Answer

jQuery Slug Plugin by Perry Trinier  perrytrinier gmail com      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   lt span class   settings slug   gt  lt  span gt                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  amp  that   gt  this--that             input     settings slug  val slug              span     settings slug  text slug             this  keyup makeSlug    return  this           This helped me with the same problem

User · Answer

Combining a variety of elements from the answers here with normalize provides good coverage  Keep the order of operations to incrementally clean the url   function clean url s        return s toString   normalize  NFD   replace    u0300- u036f  g        remove diacritics              toLowerCase                replace   s  g   -     spaces to dashes              replace   amp  g   -and-     ampersand to and              replace     w -   g        remove non-words              replace   - -  g   -     collapse multiple dashes              replace   -          trim starting dash              replace  -            trim ending dash     normlize  NFD   breaks accented characters into their components  which are basic letters plus diacritics  the accent part   replace    u0300- u036f  g      purges all the diacritics  leaving the basic letters by themselves  The rest is explained with inline comments

User · Answer

I have no idea where the  slug  term came from  but here we go   function convertToSlug Text        return Text          toLowerCase            replace    g  -            replace     w-   g                   First replace will change spaces to hyphens  second replace removes anything not alphanumeric  underscore  or hyphen   If you don t want things  like - this  turning into  like---this  then you can instead use this one   function convertToSlug Text        return Text          toLowerCase            replace     w    g              replace     g  -                 That will remove hyphens  but not spaces  on the first replace  and in the second replace it will condense consecutive spaces into a single hyphen   So  like - this  comes out as  like-this

User · Answer

Yet another one  Short and keeps special characters   imagina    o    mato    imaginacao-e-mato  function slugify  text      const a                                                          rsn     u z            const b    aaaaaeeeeiiiioooouuuuncsyoarsnpwgnmuxzh------    const p   new RegExp a split     join        g      return text toString   toLowerCase        replace   s  g   -                Replace spaces with -      replace p  c   gt          b charAt a indexOf c           Replace special chars      replace   amp  g   -and-              Replace  amp  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

User · Answer

private string ToSeoFriendly string title  int maxLength        var match   Regex Match title ToLower        w          StringBuilder result   new StringBuilder          bool maxLengthHit   false      while  match Success  amp  amp   maxLengthHit            if  result Length   match Value Length  lt   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

User · Answer

Restaurant Name   keyup function            var Text     this  val            Text   Text toLowerCase            Text   Text replace    a-zA-Z0-9   g  -                Restaurant Slug   val Text                 This code is working

User · Answer

You can use your own function for this   try it  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 lt 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

User · Answer

Note  if you don t care about an argument against the accepted answer and are just looking for an answer  then skip next section  you ll find my proposed answer at the end  the accepted answer has a few issues  in my opinion    1  as for the first function snippet   no regard for multiple consecutive whitespaces  input  is   it   a   good   slug  received  ---is---it---a---good---slug---  expected  is-it-a-good-slug  no regard for multiple consecutive dashes  input  -----is-----it-----a-----good-----slug-----  received  -----is-----it-----a-----good-----slug-----  expected  is-it-a-good-slug  please note that this implementation doesn t handle outer dashes  or whitespaces for that matter  whether they are multiple consecutive ones or singular characters which  as far as I understand slugs  and their usage  is not valid  2  as for the second function snippet   it takes care of the multiple consecutive whitespaces by converting them to single - but that s not enough as outer  at the start and end of the string  whitespaces are handled the same  so is  it  a  good  slug would return -is-it-a-good-slug-  it also removes dashes altogether from the input which converts something like --is--it--a--good--slug--  to isitagoodslug   the snippet in the comment by  ryan-allen takes care of  that  leaving the outer dashes issue unsolved though  now I know that there is no standard definition for slugs  and the accepted answer may get the job  that the user who posted the question was looking for  done  but this is the most popular SO question about slugs in JS  so those issues had to be pointed out  also  regarding getting the job done   imagine typing this abomination of a URL  www blog com posts -----how-----to-----slugify-----a-----string-----  or even just be redirected to it instead of something like  www blog com posts how-to-slugify-a-string   I know this is an extreme case but hey that s what tests are for   a better solution  in my opinion  would be as follows    x000D   x000D  const slugify   str   gt  x000D    str x000D     trim                           remove whitespaces at the start and end of string x000D     toLowerCase                 x000D     replace   -  g                 remove one or more dash at the start of the string x000D     replace     w-   g   -         convert any on-alphanumeric character to a dash x000D     replace  -  g   -              convert consecutive dashes to singuar one x000D     replace  -   g                 remove one or more dash at the end of the string x000D   x000D   x000D    now there is probably a RegExp ninja out there that can convert this into a one-liner expression  I m not an expert in RegExp and I m not saying that this is the best or most compact solution or the one with the best performance but hopefully it can get the job done

User · Answer

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      based on https   gist github com mathewbyrne 1280286  now you can transform this string   Barack Obama                           amp      -   gt  lt               into   barack obama-              applying to your code       Restaurant Name   keyup function        var Text     this  val        Text   slugify Text           Restaurant Slug   val Text

User · Answer

First of all  regular expressions should not have surrounding quotes  so    s g  should be   s g  In order to replace all non-alphanumerical characters with dashes  this should work  using your example code        Restaurant Name   keyup function            var Text     this  val            Text   Text toLowerCase            Text   Text replace    a-zA-Z0-9   g  -                Restaurant Slug   val Text                 That should do the trick

User · Answer

You may want to take a look at the speakingURL plugin   and then you just could           Restaurant Name   on  keyup   function              var slug   getSlug     Restaurant Name   val                 Restaurant Slug   val slug

User · Answer

I create a plugin to implement in most of languages  http   leocaseiro com br jquery-plugin-string-to-slug   Default Usage     document  ready  function             string   stringToSlug          Is very easy has stringToSlug jQuery Plugin

User · Answer

Take a look at this slug function to sanitize URLs  developed by Sean Murphy at 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  lt sean iamseanmurphy com gt      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                   O          U          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                   o          u          u          u          u    u    u          y          th                   y               Latin symbols                 c                Greek               A         B    G    G         D         E         Z         H    T    8                 I         K         L         M         N         3         O         P                 R    S    S         T         Y    F    F         X         PS    O    W                 A         E         I         O         Y         H         W         I                 Y            a    a          b         g    d    d    e    e         z         h         8                 i         k         l          m         n         3         o    p    p                 r    s    s    t    t         y    f    f         x         ps         w                 a         e         i         o         y         h         w         s                 i         y         y         i               Turkish          S    S    I    I          C          U          O    G    G            s    s    i    i          c          u          o    g    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    C    D    D    E    E    N    N    R    R          S    T    T    U    U                   Z             c    c    d    d    e    e    n    n    r    r          s    t    t    u    u                  z                Polish          A    A    C    C    E    e    L    L    N    N          o    S    S    Z    Z             Z    Z             a    a    c    c    e    e    l    l    n    n          o    s    s    z    z            z    z               Latvian          A    A    C    C    E    E    G    G    I    i    K    k    L    L    N    N                   S    U    u          Z             a    a    c    c    e    e    g    g    i    i    k    k    l    l    n    n                  s    u    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

User · Answer

For people already using lodash  Most of these example are really good and cover a lot of cases  But if you  know  that you only have English text  here s my version that s super easy to read       words   toLower text   join  -

User · Answer

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 lt 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       and try  slug     field   val      original by  http   dense13 com blog 2009 05 03 converting-string-to-slug-javascript     EDIT  extended for more language specific chars   var from                C  CD  E       E G        IN              RR  ST  U                        c  cd  e       e g        in                rr  st  u                  d    a          var to      AAAAAACCCDEEEEEEEEGIIIIINNOOOOOORRSSTUUUUUYYZaaaaaacccdeeeeeeeegiiiiinnooooooorrsstuuuuuyyzbBDdBAa------

User · Answer

More powerful slug generation method on pure JavaScript  It s basically support transliteration for all Cyrillic characters and many Umlauts  German  Danish  France  Turkish  Ukrainian and etc   but can be easily extended    x000D   x000D  function makeSlug str  x000D    x000D    var from                                                                    a a                c c e e e             g g               o     n   r s       r l d    h   i          j k l n n n r    s t u               u u          z z         split       x000D    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       x000D    x000D    str   str toLowerCase    x000D     x000D       remove simple HTML tags x000D    str   str replace    lt  a-z0-9 -  1 15   s   gt   gi       x000D    str   str replace    lt    a-z0-9 -  1 15   s   gt   gi       x000D    str   str replace    lt  a-z0-9 -  1 15   s     gt   gi       x000D     x000D    str   str replace    s   s   gm         trim spaces x000D     x000D    for i 0  i lt from length    i  x000D      str   str split from i   join to i    x000D     x000D       Replace different kind of spaces with dashes x000D    var spaces       amp nbsp   amp  160   amp  32   gi     amp mdash   amp ndash   amp  8209   gi  x000D                            gi    s gi   x000D   x000D    for i 0  i lt from length    i  x000D     str   str replace spaces i    -    x000D    str   str replace  - 2   g   -    x000D   x000D       remove special chars like  amp amp  x000D    str   str replace   amp  a-z  2 7   gi       x000D    str   str replace   amp   0-9  1 6   gi       x000D    str   str replace   amp  x 0-9a-f  1 6   gi       x000D     x000D    str   str replace    a-z0-9 -   gmi          remove all other stuff x000D    str   str replace    -   -   gm         trim edges x000D     x000D    return str  x000D     x000D   x000D   x000D  document getElementsByTagName  pre   0  innerHTML   makeSlug    lt br  gt   amp  x202A     amp amp     lt strong gt         lt  strong gt                 r    n  amp ndash        amp nbsp        t  n  t       amp  180   amp nbsp           amp ndash          t     Danke sch  n ich hei  e          -Sk  nske K  benhavn   agatay r   g   tor z  ld  l  setekrol -       x000D   lt div gt  x000D     lt pre gt Hello world  lt  pre gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

All you needed was a plus         Restaurant Name   keyup function            var Text     this  val            Text   Text toLowerCase            var regExp     s  g          Text   Text replace regExp  -                Restaurant Slug   val Text

User · Answer

I found a good and complete solution for English   function slugify string      return string      toString        trim        toLowerCase        replace   s  g   -        replace     w -   g           replace   - -  g   -        replace   -             replace  -              Some examples of it in use   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    Thanks to Andrew Stewart

User · Answer

Well  after reading the answers  I came up with this one       const generateSlug    text    gt  text toLowerCase   trim   replace     w-    g      replace    g   -   replace   -   g   -

[javascript] How to convert a Title to a URL slug in jQuery?

Examples related to javascript

Examples related to jquery

Examples related to regex