Text Input --> Different Text output

Dear community,

I searched the internet but could’t find an answer for my question:

I want the user to input a text in my MultilineInput. After clicking on a Button underneath, I want to switch certain words of the input text. They shall appear in another text box right next to it.

Its similar to google translate or deepL. The user enters text in one Box and gets a different text in an other box.

For example the Word “green” shall always be replaces with the word “red”.
If the user enters “The green grass is great” in one box, the other box shall show “The red grass is great”.

I have no problem, if I have to manually register all the words that shall be changed in a database somewhere (e.g. all colours before and after)

How can I achieve this?

Thank you so much and best greetings.

Here is an example:

Here is the editor:

Hi there, @dan.reinhardt95… William has proposed a good solution, of course, but when I saw your post come in, I started to work on a potential solution that uses an option set to do the text swaps. After playing around for a while, I was able to create an example that does exactly what you have described, assuming I understood your post correctly. So, in case it might be useful, here is my example.

Create an option set where the options are the words you want to find and replace. Add an attribute to the set where you define the new word that will replace each option.

Add a couple of multiline inputs and a button (I used an icon) to the page, and create a custom state somewhere (I put it at the page level) that will store the new text with the swapped words.

Set the initial content of the multiline input that will display the new text with the swapped words to the custom state’s value.

Now, truth be told, I very rarely (if ever) use plugins, but I couldn’t find a way to make it work with Bubble’s native find and replace operator, so, install this free plugin.

Add the plugin’s element (it’s called Find & Replace Input) to the page, and configure it as follows.

Finally, add a workflow to the button (icon) that sets the custom state to the plugin’s processed text.

The final result is that a click of the icon turns the text in the input on the left into the text in the input on the right.

Hope this helps.

Best…
Mike

Thank you both! You were indeed amazing in helping me and I learned a lot!
Mike, your solution was exactly what I was looking for and it works like a charm. I did not know the community here is this helpful and its truly amazing. Love you guys!

2 Likes

Hey Mike,
thank you so much for your idea which I could implement without any problems. May I bother you with two small further questions?

  • Is it possible to change a combination of words? E.G. When I create the attribute “green” I have no problem to swap it for “red”. But when I want to swap the combination of the words “green grass” to “red fire” (I just want to change it when its “green AND grass”, “green” alone shall still be “green”) it doesn’t work. How can I use a combination of attributes?
  • Can I use an excel sheet as reference data for the attributes (input: column 1; output: column 2)?

Thank you so much anyways, I learned a lot with your insights. :smiley: