Text to url slug with regex

[liran]

Hello fellow Bubblers!

I am trying to create a slug from a text value. Take for example a blog post titled: This is My Blog Title!!!

The slug should be something like: this-is-my-blog-title

Space and punctuation stripped out.

I’m trying to use regex to make this happen. Here is where I got so far.

1. First I’m making the entire string lowercase
2. Find and replace ! with null space
3. Find and replace with regex expression [^0-9a-zA-Z]+

The issue I’m running into is that I still end up with the “-” at the end of the slug.

Does anyone have experience with the sort of issue?

[keith]

There’s a good little snippet of code here that should help you (along with some other pointers in the thread that follows):

https://gist.github.com/mathewbyrne/1280286

In case it’s not obvious what this does:

• Convert your string to lowercase
• Regex 1 replaces spaces with dash
• Regex 2 Removes non word characters
• etc.

You can do all of this in Bubble equivalents. (As another poster in that thread points out, there are JS functions for trimming, etc. Bubble has a remove whitespace operator.)

[danielowega]

@AliFarahat has a plugin for this

[AliFarahat]

Yes its there! Thanks. If its not working as expected message me

[liran]

@keith, @danielowega, @AliFarahat Thanks for your responses and help!

I decided to go with the @AliFarahat’s plugin for two main reasons.

1. It’s easier
2. I may end up using the Hero Sizing and Distance functions

My solution now involves Slugifying the input, then when creating/updating the object, using the Slugify output to save the slug to the DB.

[boston85719]

Hi

I am trying to utilize the plugin for the purpose of slugifying a text field in the database, however I am unable to find any relevant information about how the plugin works.

Any help with this functionality in terms of quick tutorial or walkthrough of how to use the plugin for this purpose would be greatly appreciated.

Cheers

I have played around with the plugin with a test page and test data ( just 3 simple entries )…seems to work fine in that the data gets saved as a slug ( excellent! )

However I get this error messages during the process

What is strange is that despite the error messages the process still works and my slugs are saved to the database

What makes this stranger is that the slugs get saved before the workflow seems to be completed as the blue progress bar never actually goes complete and therefore just remains on the screen requiring the page to be reloaded to get it off

I set the workflow up to run off a button press

What I noticed is that if I disable the workflow “When ForEach A Execution” I get only one error message and only the first item in the database has the slug saved, and after pressing ok on the error message the blue progress bar actually finishes and the page doesn’t need to be refreshed.

Another odd thing is that when I have the workflows enabled and all three error messages are displayed ( one for each data entry I assume ) is that when I am in the database and delete the slug entries they get repopulated if I leave the app page open while the progress bar remains incomplete and visible.

My main issue is that after testing I decided to attempt it on some actual data in my app that needs to have the slugs. Unfortunately I was not able to get the slugs to be saved and instead of seeing an error message for each data item ( there are 1,715 items ) I see only one error message and the progress bar completes with no slugs saved at all.

[boston85719]

Ok, I edited my workflow to what I think is the correct way to actually utilize the plugin.

Now when I click the button to start the workflow I get no error messages and all three entries have a slug saved correctly and the blue status bar completes ( quickly as well ).

And now I realize that when I was working on adding slugs to a large list of items ( mine was 1715 items ) that it might cause the error due to processing / downloading such large amounts of data as I saw in the inspector.

So to still utilize the plugin I made it work for list items from and until to get a manageable number of items

Hope this helps somebody else looking into using the plugin for creating slugs

[AliFarahat]

Yep thanks . Thats the right way of doing it. You can also adjust delay of the execution to make sure the slug is available. But bubble already does that as your using results of step 1. Hence that’s why there are no extra promises in this plug-in

[gaudenz]

Hi @AliFarahat
Many thanks for this great plugin - very useful!
Just a quick note: It seems the slugify process is quite slow…
Best,
Gaudenz

[AliFarahat]

Hey @gaudenz

Your welcome, yes it is unfortunately not something i can control as its bubble related. The actual code it self is only a few lines

function slugify(text)  {
 return text.toString().toLowerCase()
.replace(/\s+/g, '-')           // Replace spaces with -
.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
}

return {
    slug: slugify(properties.text)
}

[franck.marcheix]

You can clean up your strings easily, try it on this demo page.

Bubble - Visual Programming

[brenton.strine]

@danielowega

@AliFarahat has a plugin for this

It looks like that plugin is no longer available. Any others that slugify? I’ve searched and not found anything.

[lantzgould]

@brenton.strine

It looks like that plugin is no longer available.

I use this plugin heavily. It’s still available. It was renamed to ‘Ultimate Toolkit’ I believe.

[brenton.strine]

@lantzgould

It’s still available. It was renamed to ‘Ultimate Toolkit’ I believe.

I saw that, (Ultimate Toolkit Plugin | Bubble) but the creator is The Upstarters Contributor Profile | Bubble instead of @AliFarahat so I thought it was a different plugin.

Also, I could not get the slugify feature to work using that plugin. Even searched the plugin codebase and found no reference to slugs at all.

[lantzgould]

I believe he’s a co founder of the upstarters.

As for the slug feature, I’d probably reach out to them for help. I don’t use that specific feature, primarily the ForEach functions etc.

[CosmicSelf]

• This Regex pattern extracts any text or number from the string
• The square brackets [] stands for a character set to match
• The + stands for 1 or many occurrences
• You don’t have to worry about lowercase, dashes (-) or duplicates. This will be handled by Bubble itself, since the Slug has to match certain criterias.

Test the regex in a regex tester to see how it works:
https://www.regextester.com/

[greg18]

This works well! Thank you @CosmicSelf

[shane.holohan1]

The Ultimate Toolkit
I used this recently and it works perfectly for creating slugs using Slugify as the action and any text value as the input.