How to replace the string using regex in javascript

Question

I have the following string and object,

const str = "$(role.name) is $(role) team. $(role.name) started his role as $(role)"

const obj = {
  role: 'Dev',
  'role.name': 'Foo',
}

const expected = "Foo is Dev team.Foo started his role as Dev"

How to using regex?

My regex,

const data = str.match(/\$\((.*?)\)/g)

Answer 1

Instead of matching, you should replace. As you already have the capture group, you can check if the group 1 exists as a key in the obj.

Note that in your expected there is not space here team.Foo

 const str = "$(role.name) is $(role) team. $(role.name) started his role as $(role)" const regex = /\$\(([^()]*)\)/g; const obj = { role: 'Dev', 'role.name': 'Foo', } const result = str.replace(regex, (m, g1) => obj.hasOwnProperty(g1)? obj[g1]: m); console.log(result);

Answer 2

You can utilize the replace() method with a regular expression pattern.

Here's an example of how you can achieve the desired replacement using the given string and object:

 const str = "$(role.name) is $(role) team. $(role.name) started his role as $(role)"; const obj = { role: 'Dev', 'role.name': 'Foo', }; // Create a regular expression pattern to match the placeholders const pattern = /\$\(([\w.]+)\)/g; // Replace the placeholders with the corresponding values from the object const result = str.replace(pattern, (match, key) => obj[key]); console.log(result); // Output: "Foo is Dev team. Foo started his role as Dev"

Answer 3

For a none regex solution, replaceAll is nice and simple.

Please note, as pointed out in comments, although this will work in most cases, be aware that if a replace on one of the passes ends up creating another valid tag in later passes, these will get replaced too. As such I would say the cleanest solution is the regex and the (match, key) callback. I'll leave this answer here as it still might be useful for others to see.

 const str = "$(role.name) is $(role) team. $(role.name) started his role as $(role)" const obj = { role: 'Dev', 'role.name': 'Foo', } const fillTemplate = (str, obj) => { let ret = str; for ([k,v] of Object.entries(obj)) ret = ret.replaceAll(`$(${k})`, v); return ret; } console.log(fillTemplate(str, obj));

Answer 4

To replace the string using regex in JavaScript, you can use the replace() method along with a regex pattern. Here's how you can achieve the expected result using the given string and object:

 const str = "$(role.name) is $(role) team. $(role.name) started his role as $(role)"; const obj = { role: 'Dev', 'role.name': 'Foo', }; const expected = str.replace(/\$\((.*?)\)/g, (match, group) => { const property = group.replace(/\./g, '\\.'); return obj[property]; }); console.log(expected);

Explanation:

• The regex pattern /\$\((.*?)\)/g matches any substring starting with $( and ending with ) . The .*? captures the inner content non-greedily.
• The replace() method replaces each matched substring with a callback function.
• In the callback function, the match parameter represents the matched substring, and the group parameter represents the captured inner content.
• The group is used to access the corresponding property in the obj object using square bracket notation.
• The replace() method returns the modified string with the replacements made.

The resulting expected value will be: "Foo is Dev team.Foo started his role as Dev".