CODEWITHSUNDEEP
javascriptregex
Diederik
Diederik

Reputation: 612

Javascript replace with $1 as var

I have the following situation: There is a certain string that contains some vars, such as:

var string = '/page/{id}/{title}';

Now, I want to be able to replace {id} and {title} with the vars from the following array:

var arr = {'id':10, 'title':'test-page'};

I came up with this little regex:

string.replace ( /{([a-zA-Z0-9]+)}/g , '$1' );

Which, as expected, just returns this:

/page/id/title

So I tried this:

string.replace ( /{([a-zA-Z0-9]+)}/g , arr [ '$1' ] );

But that returns a

/page/undefined/undefined

Now, I understand that something like this would be possible with a loop et cetera, but it would be nice to have a one-liner for this. I am not very used to JS, so I hope that there is some function or option that I am unaware of that helps me out with this :).

Best regards!

Upvotes: 4

Views: 349

Answers (2)

Oriol
Oriol

Reputation: 288080

According to MDN article,

Because we want to further transform the result of the match before the final substitution is made, we must use a function. This forces the evaluation of the match prior to the toLowerCase() method. If we had tried to do this using the match without a function, the toLowerCase() would have no effect.

(In the text above, replace toLowerCase() with "accessing property in object")

Then, you can use

function replacer(match, p1, p2, p3/*, ...*/, offset, string){
    return arr[p1];
}
var arr = {'id':10, 'title':'test-page'};
'/page/{id}/{title}'.replace(/\{([\w\d]+?)\}/g, replacer);

Upvotes: 0

dfsq
dfsq

Reputation: 193261

Try something like this:

var arr = {'id':10, 'title':'test-page'};

'/page/{id}/{title}'.replace(/\{([\w\d]+?)\}/g, function(a, b) {
    return arr[b] || '';
});

If you use this replace thing often I would create a String helper prototype method. For example:

String.prototype.template = function(data) {
    return this.replace(/\{([\w\d]+?)\}/g, function(a, b) {
        return data[b] || '';
    });
};

and use it like this:

'/page/{id}/{title}'.template(arr);

Upvotes: 4

Related Questions