Javascript Regex to convert dot notation to bracket notation

Question

Consider this javascript:

var values = {
    name: "Joe Smith",
    location: {
        city: "Los Angeles",
        state: "California"
    }
}

var string = "{name} is currently in {location.city}, {location.state}";

var out = string.replace(/{([\w\.]+)}/g, function(wholematch,firstmatch) {
    return typeof values[firstmatch] !== 'undefined' ? 
        values[firstmatch] : wholematch;
});

This will output the following:

Joe Smith is currently in {location.city}, {location.state}

But I want to output the following:

Joe Smith is currently in Los Angeles, California

I'm looking for a good way to convert multiple levels of dot notation found between braces in the string into multiple parameters to be used with bracket notation, like this:

values[first][second][third][etc]

Essentially, for this example, I'm trying to figure out what regex string and function I would need to end up with the equivalent of:

out = values[name] + " is currently in " + values["location"]["city"] +
    values["location"]["state"];

NOTE: I'd like to do this without using eval().

Answer 1

Using a helper function to iteratively access the properties:

function getNestedValue(obj, prop) {
  var value, props = prop.split('.'); // split property names

  for (var i = 0; i < props.length; i++) {
    if (typeof obj != "undefined") {
      obj = obj[props[i]]; // go next level
    }
  }
  return obj;
}

var string = "{name} is currently in {location.city}, {location.state}";

var out = string.replace(/{([^}]+)}/g, function(wholematch,firstmatch) {
  var value = getNestedValue(joe, firstmatch);
  return typeof value !== 'undefined' ? value : wholematch;
});
// "Joe Smith is currently in Los Angeles, California"

Try the above example here.

Edit: Something slightly elegant, using the Array.prototype.reduce method, part of the new ECMAScript 5th Edition Standard:

function replace(str, obj) {
  return str.replace(/{([^}]+)}/g, function(wholematch,firstmatch) {
    var value = firstmatch.split('.').reduce(function (a, b) {
      return a[b];
    }, obj);
    return typeof value !== 'undefined' ? value : wholematch;
  });
}

replace("{name} is currently in {location.city}, {location.state}", values);
// "Joe Smith is currently in Los Angeles, California"

Try the new example here.

Answer 2

I'm not sure how to integrate this in Javascript, but here's a Java snippet that uses regex to do the transformation you need:

    String[] tests = {
        "{name}",
        "{location.city}",
        "{location.state.zip.bleh}",
    };
    for (String test : tests) {
        System.out.println(test.replaceAll("\\{?(\\w+).?", "[$1]"));
    }

This prints:

[name]
[location][city]
[location][state][zip][bleh]

Essentially it replaces all occurrences of \{?(\w+).? to [$1].

Answer 3

You can take a look at the topic Error-free deep property access? posted at comp.lang.javascript - this presents several approaches for doing what you want.

For the regexp, all you need is /{.*?}/g