How can I replace with more values in a text?

Question

I have an (AngularJS) project where I will replace some tags in a text. By example:

{tag1} => one
{tag2} => two
{tag3} => three

With the JavaScript replace function can I replace one value:

text.replace('{tag1}', 'one');

But I have a list of 25 tags. I would like to make an object with the tags and replacements. By example:

var tags = {"{tag1}":"one", "{tag2}":"two", "{tag3}":"three"};
text.replace(tags);

How can I do this?

Can you add real example with complete string. – Tushar Apr 15 '16 at 08:45 — Tushar, Apr 15 '16 at 08:45

Tushar · Accepted Answer · 2016-04-15T08:59:48.340

You can use RegEx.

str.replace(/{[^{}]+}/g, m => tags[m] || m);

The function m => tags[m] || m is using ES6 arrow function syntax. Equivalent code in ES5:

function(m) {
    return tags[m] || m;
}

If the matched string(tag) is found in the object, then the value of that tag is returned. If not then the matched string itself is returned.

RegEx Explanation:

{: Match { literal
[^{}]+: Match one or more characters except { and }
}: Match } literal
g: Global flag

var str = 'Hello {tag1}, I\'m {tag2}. Where is {tag3}. - {tag1} {NoTag}';

var tags = {
    "{tag1}": "one",
    "{tag2}": "two",
    "{tag3}": "three"
};

str = str.replace(/{[^{}]+}/g, m => tags[m] || m);

console.log(str);
document.body.innerHTML = str;

I'll also suggest to use ES6 template literals.

var tag1 = 'one',
    tag2 = 'two',
    tag3 = 'three';

var str = `Hello ${tag1}, I\'m ${tag2}. Where is ${tag3}.`;

var tag1 = 'one',
    tag2 = 'two',
    tag3 = 'three';

var str = `Hello ${tag1}, I\'m ${tag2}. Where is ${tag3}.`;

document.body.innerHTML = str;

It works brilliant! I still have one problem. I have this scope: `$scope.tags = { "{tag1}": "one", "{tag2}": "two" }` How can i add items to this scope? It don't works by me with the javascript push function. — Jan van Rijswijk, Apr 20 '16 at 07:56
@JanvanRijswijk You can't use `push` on object. You can use `$scope.tags['{tag3}'] = 'Three';` to add new item in the `tags` object. — Tushar, Apr 20 '16 at 08:29

Martijn Welker · Answer 2 · 2016-04-15T08:53:48.710

3

You can just loop over the tags object:

var tags = {"{tag1}":"one", "{tag2}":"two", "{tag3}":"three"};
for(var key in tags)
    text.replace(new RegExp(key, 'g'), tags[key]);

edited Apr 15 '16 at 08:53

answered Apr 15 '16 at 08:50

Martijn Welker

5,575
1
16
26

1

.. but this smells like an XSS exploit waiting to happen, so be careful to properly escape any input to make sure it can't be used to inject malicious HTML or javascript. – Tom Mettam Apr 15 '16 at 08:51
True, but you can't make those assumptions without seeing the rest of his code, this is just an exact answer to his question – Martijn Welker Apr 15 '16 at 08:52
I'm not criticising your answer, I'm simply providing a warning to the OP :) – Tom Mettam Apr 15 '16 at 08:53

score -1 · Answer 3 · edited May 23 '17 at 10:28

-1

You could use the '/g' regexp suffix to replace all occurrences, till the end of the text, like this:

text.replace(new RegExp('{tag1}', "g"), 'one');

More about Javascript string replace can be found here.

edited May 23 '17 at 10:28

Community

1
1

answered Apr 15 '16 at 08:52

Sarath Chandra

1,850
19
40

2

This doesn't answer the question, it only handles one "tag" - the OP wants to pass in an object with multiple tags. – Tom Mettam Apr 15 '16 at 08:55

How can I replace with more values in a text?

3 Answers3