Creates a URL slug as you type a page title (like Django slugify())

Overview

jQuery Slugify

Update

Please have a look at Madflow's implementation of jQuery Slugify. It's a more mature and active project. In theory, you should be able to drop in and replace the code. Please let us know how it goes.

About this version

A jQuery plugin to create a URL slug as you type a page title (like Django slugify())

Say you have form that looks like this:

<label for="title">Title, e.g. "My Cool Blog Post"</label>
<input type="text" name="title" id="title">
...

<label for="slug">Slug, e.g. "my-cool-blog-post"</label>
<input type="text" name="slug" id="slug">

Use slugify() to automatically fill out the slug field as the user types a title.

$('#slug').slugify('#title');

More docs and live examples at http://patrickmcelhaney.com/jQuery-Slugify-Plugin

Comments
  • Improvement - double dash, first n last dash

    Improvement - double dash, first n last dash

    Thank you for this good plugin.

    I have some improvement suggest:

    • double or more dash into single dash
    • remove first and last dash

    Find

    return str.toLowerCase()
    

    Replace with

    return str.toLowerCase().replace(/[-]+/g, '-').replace(/^-+|-+$/g, '');
    // .replace(/[-]+/g, '-')   replace -- more to single -
    // .replace(/^-+|-+$/g, '')   remove - at first and last string
    

    Text to test

    ! lorëm Ipsum блог sit amet بلوق vivendum 博客  ãàáäâẽèéëêìíïîõòóöôùúüûñç·/_,:; !
    

    Result

    lorem-ipsum-6jior-sit-amet-vivendum-aaaaaeeeeiiiiooooouuuunc
    

    Hope this help, thanks.

    opened by qaharmdz 1
  • Dashes being added with lots of spacing

    Dashes being added with lots of spacing

    There is a bug where for every space you add in the title, an extra dash will be placed in the slug. I think that it should probably trim it down and only ever use one dash.

    opened by Michael-Brooks 1
  • Residual

    Residual "-" with this string

    Hi,

    It appears a residual "-" character at the end of the string when you type the following string: Merci a vous tous !

    This is converted to : merci-a-vous-tous-

    How can we fix this ?

    Thanks

    opened by barbuslex 1
  • Call to val(slug).text(slug)

    Call to val(slug).text(slug)

    When updating the slug on the target you have the following line:

    $target.filter(':not(.slugify-locked)').val(slug).text(slug);

    The appended .text(slug) on the end is causing jQuery script errors in IE7 and IE8 (yes, I know, move forward Internet please!).

    Was just wondering why you are doing both val(slug) and text(slug)? Is this so you can cater for other HTML elements apart from inputs?

    Thanks

    opened by davidduffett 1
  • JSLint + Bug Fix

    JSLint + Bug Fix

    There is a bug where if you type a title that gets converted to a slug (using default settings), and then modify the slug and then tab out. if you're using default settings all your dashes will be removed. I added to the map "2d":"-" which will replace dashes with dashes which works well for if your editing the title and also if you're editing the slug

    opened by JAStanton 1
  • True UTF-8 char mapping

    True UTF-8 char mapping

    I noticed when using your plugin that plenty of characters where missed and the worst part was that the chars where "translated" only once and ignored after that in future inputs (not even replaced by a dash).

    Example 1

    • String: El veloz murciélago hindú comía feliz cardillo y kiwi. La cigüeña tocaba el saxofón detrás del palenque de paja.
    • Result (before): el-veloz-murci-lago-hind-com-a-feliz-cardillo-y-kiwi-la-cigue-a-tocaba-el-saxofon-detr-s-del-palenque-de-paja
    • Result (after): el-veloz-murcielago-hindu-comia-feliz-cardillo-y-kiwi-la-ciguena-tocaba-el-saxofon-detras-del-palenque-de-paja

    Example 2

    • String: Le cœur déçu mais l'âme plutôt naïve, Louÿs rêva de crapaüter en canoë au delà des îles, près du mälströn où brûlent les novæ.
    • Result (before): le-c-ur-d-cu-mais-lame-plutot-na-ve-lou-s-reva-de-crapauter-en-cano-au-del-des-iles-pr-s-du-m-lstron-o-brulent-les-nov
    • Result (after): le-coeur-decu-mais-lame-plutot-naive-louys-reva-de-crapauter-en-canoe-au-dela-des-iles-pres-du-malstron-ou-brulent-les-novae

    I guess that the plugin is now optimal for west european languages.

    The refactored code is adapted from "jQuery Slugify a string!" from Pablo Bandin http://tracehello.wordpress.com/2011/06/15/jquery-real-slugify-plugin/ (Dual licensed MIT / GPL)

    opened by dorogoy 1
  • Merge with the other, more mature slugify project

    Merge with the other, more mature slugify project

    I just discovered another jQuery plugin on Github that's very similar to this one. It's not as popular as this one (which has been around quite a while) but it's more mature from a software engineering perspective. Rather than continuing to contribute to this repo, I think we should all throw our support behind the newer one. I just posted a proposal on @madflow's repo

    Huge thanks to everyone who has used and contributed to this project over the years and taken it much further than I imagined!

    opened by pmcelhaney 0
  • Feature request: Stopping slugify and using dot char

    Feature request: Stopping slugify and using dot char

    1. I want to provide a functionalty to my users to stop slugify. For example:

      var slg = $('#RouteValue').slugify('#Title') slg.stop();

    2. My users want to use dot "." in slug. Is there any way?

    opened by esrefatak 0
  • The Pig Latin function in the example doesn't work very well

    The Pig Latin function in the example doesn't work very well

    It gets the point across but sometimes puts letters in the wrong place. Who wants to take a stab at improving this guy?

    var pigLatin = function(str) {
        return str.replace(/(\w*)([aeiou]\w*)/g, "$2$1ay");
    }
    

    Hint: it would probably be easier to ditch the regular expression and just loop over the letters until you find a vowel.

    opened by pmcelhaney 0
  • Unit Tests

    Unit Tests

    This plugin should have unit tests to make sure it behaves as expected, the behavior is formally documented, and improvements to the code don't accidentally break anything.

    opened by pmcelhaney 3
Type-Safe Errors for JS & TypeScript

Type-Safe Errors for JS & TypeScript

Gio 1.4k Jan 6, 2023
Gmail-like client-side drafts and bit more. Plugin developed to save html forms data to LocalStorage to restore them after browser crashes, tabs closings and other disasters.

Sisyphus Plugin developed to save html forms data to LocalStorage to restore them after browser crashes, tabs closings and other disasters. Descriptio

Alexander Kaupanin 2k Dec 8, 2022
It's open source alternative to services like: integrately, ifttt, zapier, n8n

ozyifttt It's open source alternative to services like: integrately, ifttt, zapier, n8n Currently, it's support: telegram, github, jira You can add to

null 6 Oct 28, 2022
TrackIt - Single Page Application that helps the user track their habits.

TrackIt - Single Page Application that helps the user track their habits. Implemented with JavaScript/React and an API server which enables the user to sign-in or sign-up in the app.

Lucas Azzolini Vieira 7 Apr 13, 2022
A personal home page for quick access to all your personal apps/sites

Fenrus Fenrus personal home page/dasbhoard. It allows you to have a custom home page/new tab page with quick access to your personal apps. For support

John Andrews 196 Dec 31, 2022
Math Magician is a single Page App that allows users to perform simple math calculations

Math Magician is a single Page App that allows users to perform simple math calculations

levy_ukwishaka 11 Apr 9, 2022
API routes are great for APIs, but for small projects where you have to access server data or hide application logic, you can just call a server function from the client.

API routes are great for APIs, but for small projects where you have to access server data or hide application logic, you can just call a server function from the client.

null 3 Mar 6, 2022
This is a facebook messenger clone.You can comminicate to other at realtime

?? facebook-messenger This is a facebook messenger clone.You can comminicate to other at realtime ?? ⚡ LIVE To check out the live demo of this app ABO

null 22 Sep 11, 2022
A user script for the web that allows you to view and edit files in the Godot Web Editor

Godot-Web-File-Manager This is a user script for the web that allows you to view and edit files in the Godot Web Editor. You can even use this to enab

Roujel Williams 4 Jan 31, 2022
NatsirtMC is a lightweight app allowing you to connect to any Minecraft server without having Minecraft open

NatsirtMC the only way to grind without grinding NatsirtMC is a lightweight app allowing you to connect to any Minecraft server without having Minecra

tristan 3 Dec 26, 2022
A code that allows you to get custom spotify rich presence

Spotifycord A code that allows you to get custom spotify rich presence! The index.js is the main file. server.js prevents your repl from going to slee

Phantom 19 Oct 7, 2022
A simple server application that allows you to perform Wake-on-LAN remotely with a web interface

WoL Helper A simple server application that allows you to perform Wake-on-LAN remotely with a web interface. Usage Install: npm install -g wol-helper

Hongbo 5 Jul 27, 2022
Garçon is a slack bot designed for recommending restaurants and order lunches for you from buy.am delivery service.

Garçon What is it about ? Garçon is a slack bot designed for recommending restaurants and order lunches for you from buy.am delivery service.

Paruyr Muradian 4 Jul 23, 2022
A plugin for Strapi that provides the ability to auto slugify a field for any content type

strapi-plugin-slugify A plugin for Strapi that provides the ability to auto slugify a field for any content type. It also provides a findOne by slug e

daedalus 25 Nov 28, 2022
Backend API Rest application for ShortLink, a URL shortening service where you enter a valid URL and get back an encoded URL

ShortLink - The Shortest URL (API) Sobre o Projeto | Como Usar | Importante! Sobre o projeto The Shortest URL é um projeto back-end de ShortLink, um s

Bruno Weber 2 Mar 22, 2022
Browser extension to copy the page title and URL as rich text.

Copy Rich Link Browser extension to copy the page title and URL as rich text. Useful for pasting links to Slack, Google Docs, etc. Usage Install Insta

Ryo Nakamura 19 Dec 17, 2022
This is a project that is used to execute python codes in the web page. You can install and use it in django projects, You can do any operations that can be performed in python shell with this package.

Django execute code This is a project that is used to execute python codes in the web page. You can install and use it in django projects, You can do

Shinu 5 Nov 12, 2022
A jQuery plugin that creates a paneled-style menu (like the type seen in the mobile versions of Facebook and Google, as well as in many native iPhone applications).

#jPanelMenu ###Version 1.4.1 jPanelMenu is a jQuery plugin for easily creating and managing off-canvas content. Check out the demo (and documentation)

Anthony Colangelo 927 Dec 14, 2022
GitHub doesn't allow malayalam text in repository slug 😔. Read it as കിട്ടും.com

ml-xn-kittum ലിങ്ക് ഉണ്ടാക്കേണ്ട രീതി: ഡാഷ്-വെച്ചോ-അണ്ടർസ്കോർ_വെച്ചോ-വേർതിരിച്ച-വാക്കുകൾ.കിട്ടും.com. എല്ലാത്തിന്റേം അവസാനം ഒരു .കിട്ടും.com വെക്ക്. ?

Subin Siby 41 Dec 3, 2022
☁️ Application using Node.js, AdonisJs, Adonis ACL, Adonis Kue Provider, Adonis Mail, Adonis Lucid Slugify, Adonis Validator, AdonisJs Redis, ESLint and pg

Node.js - SaaS ☁️ Application using Node.js, AdonisJs, Adonis ACL, Adonis Kue Provider, Adonis Mail, Adonis Lucid Slugify, Adonis Validator, AdonisJs

null 4 Aug 19, 2022