Javascript dynamicaly replace regex matches

Question

I have texts coming from the database that need to be modified before displaying them.

E.g. as seen below, in the code block, a text can have one or multiple {variables} that need to be replaced by html <i> tag with a class name that comes from the variable.

const string = 'Lorem ipsum dolor sit {icon_exit} consectetur {icon_plus} elit.';

const matched = string.match(/{(.*?)}/g); //["{icon_exit}", "{icon_plus}"]

//... replace both with `<i class="icon-${exit or plus}"></i>`

return string; //Lorem ipsum dolor sit <i class="icon-exit"></i> consectetur <i class="icon-plus"></i> elit.

[`replace`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#specifying_a_function_as_a_parameter) can take a function that is provided the match... — Heretic Monkey, Aug 31 '21 at 17:04
Does this answer your question? [JavaScript regex - How to wrap matches with tag?](https://stackoverflow.com/questions/29616937/javascript-regex-how-to-wrap-matches-with-tag) — Heretic Monkey, Aug 31 '21 at 17:12
Or, since you changed your question in comments to the answer, [Javascript Replace - Dynamic Value of Replacement](https://stackoverflow.com/q/57479381/215552) — Heretic Monkey, Aug 31 '21 at 17:14

Hassan Imam · Accepted Answer · 2021-08-31T17:13:00.963

3

You can use string#replace to change the captured group.

const string = 'Lorem ipsum dolor sit {icon_exit} consectetur {icon_plus} elit.';
const newString = string.replace(/{(.*?)}/g, (_, match) => `<i class="${match.replace('_', '-')}"></i>`);
console.log(newString);

edited Aug 31 '21 at 17:13

answered Aug 31 '21 at 17:04

Hassan Imam

21,956
5
41
51

1

As I understand it should be `icon-exit` instead of `icon_exit` in replaced string. – CyberEternal Aug 31 '21 at 17:09
This is really neat, but I have to modify the output e.g. add `.split('_').pop()` etc. – Berisko Aug 31 '21 at 17:11
2

Fixed now. You can use function callback to modify the captured group as well. – Hassan Imam Aug 31 '21 at 17:13

score 1 · Answer 2 · answered Aug 31 '21 at 17:15

You can use replaceAll with a regex to match against those strings and return a new string.

const string = 'Lorem ipsum dolor sit {icon_exit} consectetur {icon_plus} elit.';

const regex = /{icon_(.+?)}/g;

const replaced = string.replaceAll(regex, (match, $1) => {
  return `<i class="icon-${$1}"></i>`;
});

console.log(replaced);

score 0 · Answer 3 · answered Aug 31 '21 at 17:17

0

Keep it simple:

function replaceWithTag(string) {
  return string
    .replace(/{icon_exit}/g, '<i class="icon-exit"></i>')
    .replace(/{icon_plus}/g, '<i class="icon-plus"></i>');
}

const string = 'Lorem ipsum dolor sit {icon_exit} consectetur {icon_plus} elit.';
console.log(replaceWithTag(string));

answered Aug 31 '21 at 17:17

V P

318
2
5

I guess icon_exit and icon_plus are just examples. And the replacing process should be dynamic – CyberEternal Aug 31 '21 at 17:18
Thanks for your answer, but this won't work, because text can have one, two or three variables. I have marked the correct answer. – Berisko Aug 31 '21 at 17:19

Javascript dynamicaly replace regex matches

3 Answers3