String to slug in JS (wordpress sanitize_title)

string-to-slug.js

var string_to_slug = function (str)
{
	str = str.replace(/^\s+|\s+$/g, ''); // trim
	str = str.toLowerCase();

	// remove accents, swap ñ for n, etc
	var from = "àáäâèéëêìíïîòóöôùúüûñçěščřžýúůďťň·/_,:;";
	var to   = "aaaaeeeeiiiioooouuuuncescrzyuudtn------";

	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('.', '-') // replace a dot by a dash 
		.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
		.replace(/\s+/g, '-') // collapse whitespace and replace by a dash
		.replace(/-+/g, '-') // collapse dashes
		.replace( /\//g, '' ); // collapse all forward-slashes

	return str;
}

AWESOME! Thanks so much for posting this here. I started to write something to do this, then thought "hmmm, I wonder if someone else has tried doing this before" and low and behold, here was your code in a Google search :)

Great resource, I just found an improvement. In Wordpress if you have a title with a dot (.) it will be replaced to a - in the slug. Currently, your solution doesn't do that. I just added that rule in the last part of your code:

str = str.replace('.', '-') // replace a dot for a - .replace(/[^a-z0-9 -]/g, '') // remove invalid chars .replace(/\s+/g, '-') // collapse whitespace and replace by - .replace(/-+/g, '-'); // collapse dashes

@ryanhellyer Glad it helped :) Thx

@aguevara92 Good idea. Gonna update it!

Thank you for posting this!

Just FYI: Not sure if it matters but according to the codex, all / in strings are collapsed and not replaced by any character. I added .replace( /\//g, '' ) // collapse all forward-slashes by a dash to the block that starts at line 15.

Gread! Adding more chars from Czech alphabet:

var from = "àáäâèéëêìíïîòóöôùúüûñçěščřžýúůďťň·/_,:;";
var to   = "aaaaeeeeiiiioooouuuuncescrzyuudtn------";

You should prototype this off String object, it would be handier to use - just a thought

@LiamBailey Just for you buddy ;)

String.prototype.toSlug = function ()
{
	var str = this;
	str = str.replace(/^\s+|\s+$/g, ''); // trim
	str = str.toLowerCase();

	// remove accents, swap ñ for n, etc
	var from = "àáäâèéëêìíïîòóöôùúüûñçěščřžýúůďťň·/_,:;";
	var to   = "aaaaeeeeiiiioooouuuuncescrzyuudtn------";

	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('.', '-') // replace a dot by a dash 
		.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
		.replace(/\s+/g, '-') // collapse whitespace and replace by a dash
		.replace(/-+/g, '-') // collapse dashes
		.replace( /\//g, '' ); // collapse all forward-slashes

	return str;
}

Thanks a lot!

I've used this with Panini to get it working with {{#tim}} text {{/tim}} like so:

module.exports = function (options) {
    // options.fn(this) = Handelbars content between {{#trim}} HERE {{/trim}}
    var str = options.fn(this);
    str = str.replace(/^\s+|\s+$/g, ''); // trim
    str = str.toLowerCase();

    // remove accents, swap ñ for n, etc
    var from = "àáäâèéëêìíïîòóöôùúüûñçěščřžýúůďťň·/_,:;";
    var to = "aaaaeeeeiiiioooouuuuncescrzyuudtn------";

    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('.', '-') // replace a dot by a dash 
        .replace(/[^a-z0-9 -]/g, '') // remove invalid chars
        .replace(/\s+/g, '-') // collapse whitespace and replace by a dash
        .replace(/-+/g, '-') // collapse dashes
        .replace(/\//g, ''); // collapse all forward-slashes

    return str;
}

Looks like @salcode took it deeper to a new level :)

https://github.com/salcode/fe-sanitize-title-js

@spyesx, as you mentioned, I did dive into this problem 😀

Ultimately, two things happened:

1. I found emojis added a ton of complexity (and I never solved this in my code)
2. I discovered the cleanForSlug() method of @wordpress/url (which is available in the context of the WordPress block editor (a.k.a. Gutenberg) at wp.url.cleanForSlug())

All that said, depending on your needs sometimes a function like you have here covers the use case you need. 👍

On a side note, one interesting thing I found out about WordPress sanitize_title() is that its behavior varies depending on the language being used (see salcode/fe-sanitize-title-js#1).

In typescript: https://gist.github.com/cleissonbarbosa/fc9951513051386eb053db6ccd737d4b

You can also do wp.url.cleanForSlug('Test Title'). Works in the frontend too. I used it to generate a table of contents section in the sidebar.

            jQuery(document).ready(function($) {
                var headings = $('.entry-content .wp-block-heading');
                if(headings.length == 0) {
                    $('.faq-post-contents').hide();
                }
                headings.each(function(index, element) {
                    var text = $(element).text();
                    var slug = $(element).attr('id');

                    //Create slug if not exists
                    if(!slug) {
                        slug = wp.url.cleanForSlug(text);
                        $(element).attr('id', slug);
                    }

                    $('.faq-post-contents ul').append('<li><a href="#'+slug+'">'+text+'</a></li>');
                });

            });