Javascript Pattern Replace

Question

I have an object like this

myObj = {
    "strPattern": "Name: #name#<br>Surname: #sname#<br>Location: #loc#",
    "name": "John",
    "sname": "Doe",
    "loc": "LA"
}

Now I need a function which will take my object and return it as a string with the help of its pattern.

Expected Result : "Name: John<br>Surname: Doe<br>Location: LA"

I couldn't do it with JavaScript's replace method and I dont know how to do it. Thank for your help.

By the way, number of subStrs can be dynamic. For example there are 3 subStrings in this example but it can be 5 or 10 for other objects. #age#, #gender#, etc...

I know you have an answer, but you may want to look at actual templating engines like ejs, handlebars, etc — user578895
– user578895, Commented Feb 1, 2014 at 9:29

Tasos K. · Accepted Answer · 2014-02-01 09:19:48Z

2

You can loop to an objects properties using the for (var key in myObj) structure. In every loop the key variable holds the name of each property and you can access its value with the myObj[key] variable.

An example of how you could use in your scenario could be like this.

var myObj = {
    "strPattern": "Name: #subStr1#<br>Surname: #subStr2#<br>Location: #subStr3#",
    "subStr1": "John",
    "subStr2": "Doe",
    "subStr3": "LA"
};

var html = myObj["strPattern"];

for (var key in myObj) {
   var obj = myObj[key];
    if(key !== "strPattern") {
        html = html.replace("#" + key + "#",obj);
    }
}

jQuery('#result').html(html);

I also made a jsfiddle with it.

Edit: As @Andreas mentioned in a comment, the order of accessing the properties is not guaranteed, I adjusted my code snippet accordingly.

answered Feb 1, 2014 at 9:19

Tasos K.

8,1057 gold badges44 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Andreas Over a year ago

Does JavaScript Guarantee Object Property Order?

user578895 Over a year ago

@Andreas -- Although the specs say no, every implementation says yes. But even so, I don't like this. var html = myObj.strPattern with if( key === 'strPattern' ){ continue; } is better.

user578895 Over a year ago

your replace should be html.replace( new RegExp( '#' + key + '#', 'g' ), obj ) ) to allow for multiple instances of the same pattern

Andreas Over a year ago

@zyklus But it is not guaranteed and therefor you shouldn't rely on. I'm not aware of the current situation but there were times when the order was implemented differently (v8 - Issue 164)

user578895 Over a year ago

@Andreas -- Eh, you can rely on it if you need to, as long as you're aware that it may break somewhere, at some point (even if that's very unlikely). Your page is more likely to break because JS is disabled than because of this

|

Community · Accepted Answer · 2017-05-23 10:25:56Z

The following function can be used to improve performances. However, it's useless if you don't need to use the template multiple times.

function compile(tpl) {
    tpl = tpl.split(/#(.*?)#/);
    return Function('return [' + tpl.map(function (v, i) {
        if (i % 2) return 'this["' + v + '"]';
        return v && '"' + v.replace(/"/g, '\\"') + '"';
    }).join(',') + '].join("");');
}

Usage example :

var myObj = {
    "strPattern": "Name: #name#<br>Surname: #sname#<br>Location: #loc#",
    "name": "John",
    "sname": "Doe",
    "loc": "LA"
};

myObj.strPattern = compile(myObj.strPattern).call(myObj);

More interesting :

var tpl = '#first# #last#',
    compiled = compile(tpl);

compiled.call({ first: 'John', last: 'Doe' }); // "John Doe"
compiled.call({ first: 'Walter', last: 'White' }); // "Walter White"

More details here : https://stackoverflow.com/a/20886377/1636522.

Community · Accepted Answer · 2017-05-23 12:21:01Z

0

Another way to approach this, that works through only the replacements that appear in the string, would be:

var Stringify = function(obj){
  return obj.strPattern.replace(/#([a-z]+)#/gi, function(match,group){
    return obj[group] || match;
  });
};

var str = Stringify({
  "strPattern": "Name: #name#<br>Surname: #sname#<br>Location: #loc#",
  "name": "John",
  "sname": "Doe",
  "loc": "LA"
});

This also could be of interest to those wanting to use string.replace(pattern, function).

When did all browsers start supporting the String.replace(regexp, replacement_function)?

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Feb 1, 2014 at 9:40

Pebbl

36.1k6 gold badges66 silver badges65 bronze badges

Comments

user2377528 · Accepted Answer · 2014-02-01 10:14:08Z

0

myObj = {
    "strPattern": "Name: #subStr1#<br>Surname: #subStr2#<br>Location: #subStr3#",
    "subStr1": "John",
    "subStr2": "Doe",
    "subStr3": "LA"
}
function patternMatcher(myObj){
  strp = myObj.strPattern;
  pattern = strp.match(/#(.*?)#/g);

  for (key in pattern){
    origKey = pattern[key].substr(1,pattern[key].length-2);
    strp =  strp.replace(pattern[key],myObj[origKey])
  }
return strp;
}

console.log(patternMatcher(myObj));

Here's Your Code running example link

answered Feb 1, 2014 at 10:14

user2377528

Comments

arslion · Accepted Answer · 2014-02-01 10:38:01Z

0

function getFilled(myObj){
  pattern = myObj.strPattern.match(/#(.*?)#/g);
  for (key in pattern){
    myObj.strPattern =  myObj.strPattern.replace(pattern[key],myObj[pattern[key].substr(1,pattern[key].length-2)])
  }
return myObj.strPattern;
}

console.log(getFilled(myObj));

answered Feb 1, 2014 at 10:38

arslion

4408 silver badges16 bronze badges

Collectives™ on Stack Overflow

Javascript Pattern Replace

5 Answers 5

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related