How to extract certain things out of a paragraph of text?

[raelyn]

I have “fill in the blanks” embedded in a paragraph of text that I want to extract out and eventually replace.

For example:

“Hello [a], you rock! Do you like [y]? What about [z]?”

I want to extract the list of things that are within the brackets automatically. In this case, I want to get [a, y, z] so that I can display it in a table or something for people to edit (eg for [insert niche] to automatically populate under “Mapping Label” in the table below).

How do I do this in Weweb?

[dorilama]

You can extract them with js using regex.
Based on your example:

const text = variables["..."]; // the value of the text
const match = text.matchAll(/\[(.*?)\]/g);
let data = [];
if (match) {
	data = [...match].map((m) => m[1]);
}
return data

will return an array ["insert niche", "insert name", /* and so on */]

[raelyn]

Omg, thanks you are a life saver. I was clicking around trying to figure out how to add that code in and I managed to get it to appear! Not bad for a complete beginner in Weweb who just learned what an array is last week…

Any idea how instead of [insert niche, insert name, etc] I can have [[insert niche], [insert name], [etc]] instead and remove the duplicates?

[aurelie]

Yes you just need to update this line

const match = text.matchAll(/\[(.*?)\]/g);
by
const match = text.matchAll(/(\[.*?\])/g);

and this line
data = [...match].map((m) => m[1]);
by
data = [...new Set([...match].map((m) => m[1]))];

[raelyn]

Ah, that did the trick. I now have the array that I have successfully extracted,

I am now trying to match it to my data grid, where I can edit the grid to add in “prompt” and “answer” to each “mapping label” that I generated above.

How do i turn that array of things [x,y,z] into something that I can add more details to? If I’m not wrong, I have to create an array of objects, with each object having 3 properties, is that right? How am I supposed to do that in the workflows?

[aurelie]

You can just directly do the correct array.

Just after this line
data = [...new Set([...match].map((m) => m[1]))];

Add this
data = data.map(match =>({ match, prompt: '', answer: '' }))

[raelyn]

That worked! How do I do the reverse?

Now, I have this data grid of which is displaying an array of objects, with each object having “Mapping Label”, “Prompt”, and “Answer” properties (from just now).

When I click on the submit answers button, how do I get the answers to populate and replace everything in the square brackets (basically the reverse?).

So basically,

“Hello [a], you rock! Do you like [y]? What about [z]?” changes to become “Hello Sarah, you rock! Do you like Apples? What about Oranges?”

[aurelie]

Hi,

Create a variable to hold your result.
Then create a workflow, on click on your button.
On this workflow

• First action need to set your result variable to your text with placeholder
• add a Loop action, and bind the items property to your datatable array variable.
• inside the loop, add a Set variable action, targeting your result variable. You can bind the value to a js formula using the replaceAll methods on your variable. Your pattern and value will be inside the loop property of your loop action
  

The replaceAll is use like this: value.replaceAll(mappingLabel, answer)
Value should be your result variable, mappingLabel the label from the current loop item, and answer the answer of your current loop item.

[raelyn]

UPDATE: I got it! It works now.

[twinsticks]

Great!

Could you share the approach that worked

[raelyn]

Yes! Her instructions are correct. I used “code” instead of “formula” when I was putting in the replace all code which resulted in the error.