How To Convert a User Input to URL-Friendly String

Tutorials
1

Hey all,

I spent a few minutes on this earlier and wanted to share in case anyone had a similar use case. It’s not uncommon to create a URL based on user input (example.com/company-name) but you never know what someone is going to put in that input field— that’s why we have to do some work to make it url-friendly.

This function turns spaces into hyphens, removes whitespace & leading/trailing hyphens, removes illegal characters, & limits to 32 characters.

const sanitizeForUrl = (input) =>
  input
    .replace(/\s+/g, '-')
    .replace(/[^a-zA-Z0-9-]/g, '')
    .replace(/-+/g, '-')
    .replace(/^-+|-+$/g, '')
	.toLowerCase()
	.slice(0, 32);

const companyUrl = sanitizeForUrl(
  variables['f5a797d0-d19f-4252-941e-d8b6a66a8399-value']
)
return companyUrl

carbon (4)
carbon (4)1360×1324 54.2 KB

example
example1920×1920 102 KB

Hope someone finds this useful!

Note: I didn’t look too hard to see if there was built-in functionality for this— apologies if this is already possible without custom JS.

3 Likes
2

Awesome function @jasonvanguard :clap:

I took the liberty to add this to our roadmap. We’ll make a nocode formula out of this :raised_hands:

2 Likes
3

@Quentin is the no-code formula already available? If yes, can you tell me where I can access it and how to use it?

If the no-code formula is not available yet. Can you explain how to use the code @jasonvanguard mentioned in his post? I cannot figure out how and where to add the code.

Thank you.

5

There are many ways to use the custom code depending on your specific needs. For this scenario, I used an On Change workflow to trigger an Update Variable action on an input element. So basically when someone types in the input box, the code runs and saves the output to a variable that I can use.

Select your input > Add a workflow to it > set it to On Change (if it isn’t by default) > add a “Change a variable value” action > bind the “value” to the custom code

This video shows step by step

Let me know if you run into any issues

6

Hey Jason, what software do you use to create this video / GIF? I always want to share videos to this Weweb community (like you have) but haven’t found an easy way to do so!

7

Hey Raelyn, that is recorded with Screen Studio

I have nothing but amazing things to say about it!

8

@jasonvanguard Thank you for the amazing explanation. But not sure what I am doing wrong, I followed your steps and copied the code here above, but for some reason I get the following error code:

TypeError: Cannot read properties of undefined (reading ‘replace’)

Screenshot 2023-08-02 at 02.14.28
Screenshot 2023-08-02 at 02.14.281499×537 173 KB

9

I found the problem, forgot to change the variable in the code :sweat_smile:

Thank you very much!! :pray::pray::pray:

1 Like
10

You can also handle the sanitization more directly with the built-in javascript function

return encodeURIComponent(variables['abcdefg'])

That way you outsource the concern of “what do I need to sanitize” to the experts who set the standards.

1 Like
11

Absolutely this is an option and a good way to accomplish a similar task, but the output isn’t always what you want-- especially for creating the best-looking URLs. My concern wasn’t “what do I need to sanitize” but rather “how can I turn a user input into a URL format that is not only valid but looks nice (or at least how I want URLs in my app to look).”

You can also build validation into the method I chose, remove numbers, limit # of characters, etc.

In my example, you’ll see that the output is creativespark.design/my-cool-company, and the output of encodeURIComponent would be something like creativespark.design/my%20cool%20company

Both options work; they just aren’t fully interchangeable.

1 Like
12

What’s it called and how do I use this?