Javascript find and replace string with variable values

Question

I have an angular app, but I have one page that needs to be pre-rendered with no javascript (for printing and PDF), some of the content is loaded with the Angular variable inputs {{field(10)}}

I pre-load the content but need a way to find and replace the string so that:

{{field(10)}}

is changed into the value of this

submission.inputs[10]

So for example:

var string = 'This is some content: {{field[10]}}';
var submission.inputs[10] = 'replace value';

I want the new string to be this

var newString = 'This is some content: replace value';

This is running in Node so it has the latest version of Javascript.

I tried this:

var newString = string.replace(/\{{(.+?)}}/g, submission.inputs[$1]);

But I don't think my syntax is correct.

{} are special characters in regular expressions. You will have to escape them to make them literals. Same with [] — Taplar
– Taplar, Commented Apr 16, 2018 at 17:43
Your syntax is perfectly correct regex101.com/r/Qberbr/1. You can even remove your first `\` — Federico Piazza
– Federico Piazza, Commented Apr 16, 2018 at 17:45
Weird, I was for sure {} were treated as special characters since they're used like (){2} — Taplar
– Taplar, Commented Apr 16, 2018 at 17:48
@Taplar depending on how you use special characters they are special or not. a{2} is different than just {{ — Federico Piazza
– Federico Piazza, Commented Apr 16, 2018 at 18:00

CRice · Accepted Answer · 2018-04-16 18:00:00Z

Your current regex extracts all the text contained within {{}} with its capture group. But you only want the index of the replacement, which is contained within the [], and not the entire string itself. So you have two options:

Modify regex to capture only the index, so that would look like /{{field\[(.+?)\]}}/, where the capture group now only takes the number within the brackets.
Leave the original regex alone, but change the replace function to extract the number from the returned match. In this case you'll have a second regex (or some other method) to extract the number from the matched string (in this case, get "10" out of "field[10]").

Here's an example demonstrating both:

var string = 'This is some content: {{field[10]}}';
var submission = {inputs: []};
submission.inputs[10] = 'replace value';

// I want the new string to be this
// var newString = 'This is some content: replace value';

var newString = string.replace(/{{field\[(.+?)\]}}/g, (match, cap1) => submission.inputs[cap1]);
console.log(newString)

// OR:

var otherNewString = string.replace(/\{{(.+?)}}/g, (match, cap1) => submission.inputs[cap1.match(/\[(.+?)\]/)[1]]);
console.log(otherNewString)

ctwheels · Accepted Answer · 2018-04-16 18:06:23Z

You can use the following regex to extract the contents between {{field[ and ]}} as the snippet below shows. The snippet uses a callback in the replace function and passes the captured group's value to it so that an appropriate value may be returned (submission.inputs[b] where b is the number you want: 10 in this case).

{{[^[]+\[([^\]]+)]}}

{{ Match this literally
[^[]+ Match any character except [ one or more times
\[ Match [ literally
([^\]]+) Capture any character except ] one or more times into capture group 1. This is the value you want
]}} Match this literally

var string = 'This is some content: {{field[10]}}'
var submission = {inputs:[]}
submission.inputs[10] = 'replace value'
var newString = string.replace(/{{[^[]+\[([^\]]+)]}}/g, function(a, b) { return submission.inputs[b] })
console.log(newString)

Collectives™ on Stack Overflow

Javascript find and replace string with variable values

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related