HELP! How can I double encode text for a URL?

[alex.pethick]

I need to encode text and double encode characters per this article to include in a URL:

https://support.cloudinary.com/hc/en-us/articles/202521512-How-to-add-a-slash-character-in-text-overlays-

The text will change every time and could include characters like . , / ! ? - # etc

Example text to include in a URL:

This is an example for http://bubble.io! #nocode

I know there’s a :formatted as URLoption but it doesn’t double encode per the article above. How do I approach it?

Thanks!

[lindsay_knowcode]

The way I’d approach it is a regex to extract the path, then replace the / with %252F

I’m assuming the example you used so the regex is very simple. There may be other ways to do it but this is how I’d do it.

eg
https://knowcode-tech.bubbleapps.io/version-test/double_escape?debug_mode=true

Step 1

Step 2

Step 3

I love Regex (regular expression) so if this isn’t the type of URL you are using ping me and I’ll make a much better regex.

https://manual.bubble.io/core-resources/data/operations-and-comparisons#extract-with-regex

[alex.pethick]

Hey @lindsay_knowcode!

Thank you so much for the response and willingness to help.

I think my use case is a bit different and perhaps I didn’t explain it very well.

Essentially in my app, I have input fields where a user can specify text. One is for the name of a file. Another is for text that will be an overlay in a video or image, etc.
I then take that input field’s value and add it to a URL (API POST request). However, when that input contains special characters such as . , / ! ? - # etc - it breaks the URL/API call because those characters need to be double encoded per the Cloudinary article.

So, I’m not extracting anything from a URL path or parameter.

Lastly, this input field’s value (provided by the user) will be different every time. It may include one special character, three special characters or zero.

Hopefully, that’s a bit clearer of an explanation! Any advice?

[lindsay_knowcode]

Ok a bit clearer now See here…
https://knowcode-tech.bubbleapps.io/version-test/double_url_encode

In the example I did it two ways to double check Bubble encoding was going to work correctly) - a javascript way using @mishav toolbox plugin (I’d not use this approach for this case - totally unnecessary - but it got my Brain into Bubble gear this morning) and a pure Bubble way (I’d do it this way).

The simplest way is to set a state and use the inbuilt Bubble URL format twice - eg

If you want to see the working example in the editor
https://bubble.io/page?type=page&name=double_url_encode&id=knowcode-tech&tab=tabs-2

Are you using Cloudinary?

[alex.pethick]

Oh, wow lol so you just need to use the :formatted as URL twice? As in DOUBLE encode haha. Can’t believe I didn’t realize that was the solution!

I’m curious: Why did you use a CS?

Thank you!

[lindsay_knowcode]

@alex.pethick

Why did you use a CS?

Just for fun!