Need help with this very complex :Find & Replace

Need help Database
1

Hi

I have a database column with exact values as the following within the cells:

<h2>Header 1</h2>
     <h3>Child 1 of Header 1</h3>
     <h3>Child 2 of Header 1</h3>
     <h3>Child 3 of Header 1</h3>
<h2>Header 2</h2>
     <h3>Child 1 of Header 2</h3>
     <h3>Child 2 of Header 2</h3>
     <h3>Child 3 of Header 2</h3>

Is there any way to get the following result when I call/display them over the HTML block?

<button onclick="bubble_fn_add_headers({output1: 'Header 1', output2: 'Child 1 of Header 1\nChild 2 of Header 1\nChild 3 of Header 1'});">Add</button>
<h2>Header 1</h2>
     <h3>Child 1 of Header 1</h3>
     <h3>Child 2 of Header 1</h3>
     <h3>Child 3 of Header 1</h3>
<button onclick="bubble_fn_add_headers({output1: 'Header 2', output2: 'Child 1 of Header 2\nChild 2 of Header 2\nChild 3 of Header 2'});">Add</button>
<h2>Header 2</h2>
     <h3>Child 1 of Header 2</h3>
     <h3>Child 2 of Header 2</h3>
     <h3>Child 3 of Header 2</h3>

I know that it has to do something with :find & replace operator, but couldn’t figure it out.

2

you can replace

<h2>Header 1</h2>

with

<button onclick="bubble_fn_add_headers({output1: 'Header 1', output2: 'Child 1 of Header 1\nChild 2 of Header 1\nChild 3 of Header 1'});">Add</button>
<h2>Header 1</h2>

and same with header 2. That should work

3

I’d have done that but the problem is that H1 header and H2 subheader texts are user-generated.

Which means the values (value1 & Value 2) has to be dynamic within the function bubble_fn_add_headers({output1: ‘Value1’, output2: ‘Value 2’});"

Can you suggest any way to dynamically pass the header texts within the function values?

4

What about just replacing

<h2>

with

<button onclick="bubble_fn_add_headers({output1: 'Header 1', output2: 'Child 1 of Header 1\nChild 2 of Header 1\nChild 3 of Header 1'});">Add</button>
<h2>
5

I’m sorry if I’ve been vague. Its half way there though.

Basically, replacing

<h2>

with

<button onclick="bubble_fn_add_headers({output1: 'Header 1', output2: 'Child 1 of Header 1\nChild 2 of Header 1\nChild 3 of Header 1'});">Add</button>
<h2>

Does the job half way.

The main problem I’m facing here is that I have to put each H2 subheader within the output1’s value and a list of H3 subheaders within the output2’s value.

All of these subheaders are user-generated. Suppose the user added 6 sections, that would mean 6 sets of H2 subheaders followed by its H3 subheaders list. In that case, there have to be six button replacements with functions containing their unique subheader texts.

The main goal here is to get those functions their respective subheader texts by any means.

Hope that helped.

6

In this case, you should try using REGEX. I use ChatGPT to get the exact expression

7

Can you give an example of how REGEX would fit in this scenario? That’d help a ton.

8

Sorry, i skimmed through your question, should have realised what you were asking for.

It’s possible to do this using native bubble operations with a bit of creativity. Alternatively you could just use javascript if you’d prefer.

Use :extract with regex on the text with the following regex pattern: (?<=\<h2>)(.*?)(?=\<\/h2>) and save the result into a text list custom state.
Then do this find and replace:

After that loop through the custom state text list and replace the placeholder texts (‘Header current iteration’) with the ‘Custom State item#current iteration’. Make sure to actually put the apostrophes otherwise the find and replace will also replace the Child X of Header Y

Are the ‘Child X of Header Y’ also user defined names? Or are they actually set to Child X of Header Y? If they are dynamic it will become a longer process, and you will have to set up the equivalent of a nested loop in bubble :grin: But it would follow a similar logic.

Hopefully this can get you on the right track.

1 Like
9

Thanks @nico.dicagno nico, will give it a try and let you know how it went.

10

Sorry, missed the last line.

Yep, The child headers are also defined by the users. It could be just one child header or more than one.

So basically this is how it looks like when the users generate it:

Capture415
Capture4151042×463 25.8 KB

And this is what I want to turn it into:

Capture416
Capture416962×400 18 KB

I think it’s gonna be more complicated than what you suggested above :slight_smile:

11

How do you store this data in a custom state? I have not used custom states yet, don’t know how to deal with them. Can you help me out with it? :innocent:

12

All right, I gave custom status a try, and I think it has made some progress.

This is what I’ve got.

Before any changes (Html-formatted User-generated data, stored within database cell):

Capture421
Capture421877×305 15.3 KB

After applying custom states with the given :Replace with Regex expressions:

Capture419

  • It omitted all the <h3> subheaders
  • It removed <h2> tag from the H2 level subheaders (which I think is the result of regex expression)

This is how applied Custom states:

Capture417
Capture417699×370 22.2 KB

Capture418
Capture418705×316 27.1 KB

My end goal is to turn the given data

Capture421
Capture421877×305 15.3 KB

Into this one

Capture416
Capture416962×400 18 KB

The Default data looks like this:

<h2>Racing Bikes</h2>
    <h3>Ninja ZX-6R</h3>
    <h3>Ninja ZX-10R</h3>


<h2>Street Bikes</h2>
    <h3>W175 street</h3>
    <h3>Versys 650</h3>
    <h3>Elaminator</h3></div>

My goal is to convert it into this:

<h2>Racing Bikes <button class="something" onclick="bubble_fn_add_headers({output1: 'Racing Bikes', output2: 'Ninja ZX-6R\nNinja ZX-10R'});">Add</button></h2>
    <h3>Ninja ZX-6R</h3>
    <h3>Ninja ZX-10R</h3>


<h2>Street Bikes <button class="something" onclick="bubble_fn_add_headers({output1: 'Street bikes', output2: 'W175 street\nVersys 650\nElaminator'});">Add</button></h2>
    <h3>W175 street</h3>
    <h3>Versys 650</h3>
    <h3>Elaminator</h3></div>

Is there a way to work around that?

Thanks

13

How would you do it in javascript?

14

This topic was automatically closed after 70 days. New replies are no longer allowed.