-
-
Save spyesx/561b1d65d4afb595f295 to your computer and use it in GitHub Desktop.
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; | |
} |
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 :)
@spyesx, as you mentioned, I did dive into this problem 😀
Ultimately, two things happened:
- I found emojis added a ton of complexity (and I never solved this in my code)
- I discovered the cleanForSlug() method of
@wordpress/url
(which is available in the context of the WordPress block editor (a.k.a. Gutenberg) atwp.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).
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>');
});
});
Gread! Adding more chars from Czech alphabet: