Notes

Create a sublime text snippet to insert a slug

Convert filename to a slug that can be used inside a URL. Replace spaces with dashes, convert characters to lowercase and remove file extension. Insert slug values inside Sublime Text with a snippet

Edit on GitHub

Workflow
2 minutes
regex
 1<snippet>
 2  <content><![CDATA[
 3${1:${TM_FILENAME/([A-Z])|(\s+)|(\.[^.]+$)/(?1\l$1:)(?2-:)(?3:)/gi}}
 4]]></content>
 5  <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
 6  <tabTrigger>slug</tabTrigger> 
 7  <!-- Optional: Set a scope to limit where the snippet will trigger -->
 8  <!-- <scope>source.markdown</scope> -->
 9  <!-- Optional: Description to show in the menu -->
10  <description>Convert filename to a slug that can be used inside a URL. Replace spaces with dashes, convert characters to lowercase and remove file extension</description>
11</snippet>

Results:

ai-image-generation.md -> ai-image-generation
Online card payments.md -> online-card-payments
some Random FIle NAME with blah.txt -> some-random-file-name-with-blah

Usage:

Type slugand press Tab

  • Preferences > Browse Packages.. will open the Packages/User folder for you
  • A snippet is an XML file saved with the extension .sublime-snippet
  • Sublime Text uses Perl style regex
  • Works in all file types.
  • Will return nothing for files that are not saved, i.e. untitled new files.

Explanation for

1${1:${TM_FILENAME/([A-Z])|(\s+)|(\.[^.]+$)/(?1\l$1:)(?2-:)(?3:)/g}}
  • $1 is a field marker, it means first position for your cursor
  • ${1:$TM_FULLNAME} means you’re using the variable$TM_FULLNAME as the default value for field marker $1
  • ${TM_FILENAME} is an environment variable that gives you the file name
  • the pattern for the regex string is ${TM_FILENAME/find/replace/g}
  • you can do multiple substitutions by finding and substituting groups. A group is within ()
  • | means OR. (A)|(B)|(C) would match for group (A) or (B) or (C)
  • Back references let you reference to your matched groups with $N. For example $1 would mean (A), $2 would mean (B) and $3 would mean (C) and so on
    • /(A)|(B)|(C)/($1)($2)($3)/ would equal the original string
  • (?1\l$1:) goes like this:
    • If group 1 matches, replace with \l$1 (a lowercase version of group 1 match), else with nothing.
    • It is pretty similar to conditional (ternary) operator in JavaScript, except that the ? comes in the beginning
    • (?1'THIS':'THAT')
    • ?1 if group 1 is matched
    • $1contents of group 1 match
    • replacements are in the form of truthy:falsy. truthy will be executed if group matched, falsy will be executed if no match for that group was found
    • Another example: (?{3}-:@) - if Group 3 matched, replace with -, else with @

match groups:

  • ([A-Z])matches all uppercase word characters, group 1
  • (\s+) matches all whitespace characters, group 2
  • (\.[^.]+$) matches file extensions, group 3

substitution groups:

  • (?1\l$1:) - if group 1 is matched, replace it with lowercase version of group 1
  • (?2-:) - if group 2 is matched, replace it with -
  • (?3:) - if group 3 is matched, replace it with nothing

Related

Browse all topics