Text to url slug with regex

liran · August 8, 2019, 11:09pm

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.

First I’m making the entire string lowercase
Find and replace ! with null space
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 · August 8, 2019, 11:59pm

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

gist.github.com

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

slugify.js

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
}

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 · August 9, 2019, 3:34pm

@AliFarahat has a plugin for this

AliFarahat · August 9, 2019, 8:46am

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

liran · August 9, 2019, 3:34pm

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

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

It’s easier
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 · October 1, 2019, 10:32am

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

53%20PM 05%20PM 13%20PM

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

40%20PM

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 · October 1, 2019, 10:51am

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 · October 1, 2019, 2:00pm

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