JavaScript replace

Question

In the following code, the alert(a) inside the JavaScript replace function will alert the matched strings, which, in this case, will be {name} and {place}.

This works as described by the documentation javascript docs , namely, the first argument to the function in the replace method will be the matched string. In the code below, the alert(b) will alert 'name' and 'place' but without the curly braces around them.

Why is that? How does it strip the curly braces for 'b'? Here's a fiddle http://jsfiddle.net/mjmitche/KeHdU/

Furthermore, looking at this example from the docs,

function replacer(match, p1, p2, p3, offset, string){
  // p1 is nondigits, p2 digits, and p3 non-alphanumerics
  return [p1, p2, p3].join(' - ');
};

Which of the parameters in this example would the 'b' in function(a,b) of the replace function below represent?

Part of my failure to understand might be due to the fact that I'm not sure what javascript does, for example, with the second parameter if the maximum number of arguments aren't used.

code

var subObject = {
    name:  "world",
    place: "google"

}; 

var text = 'Hello, {name} welcome to {place}';


var replace = function (s, o) {
            return s.replace(/\{([^{}]*)\}/g,
              function (a, b) {
                  alert(a);
                  alert(b);
                var r = o[b];

                return typeof r === 'string' || typeof r === 'number' ? r : a;
              }
            );
}; 

var replacedText = replace(text, subObject); 
alert(replacedText);

Blender · Accepted Answer · 2012-12-08 23:46:07Z

1

The first parameter is the entire string matched by your regex (capturing groups don't matter, so it becomes {name}).

The second, third, fourth, etc. parameters are your capturing groups and since you only have one, your second argument becomes name.

The last two parameters are the position of the match and the entire string. You can omit these arguments from your callback if you'd like.

Here's a slightly more readable version of your code that accounts for attributes that aren't present in your replacement object:

var replace = function(string, object) {
    return string.replace(/\{(.*?)\}/g, function(match, group) {
        return group in object ? object[group] : match;
    });
};

Demo: http://jsfiddle.net/KeHdU/4/

edited Dec 8, 2012 at 23:46

answered Dec 8, 2012 at 23:40

Blender

300k55 gold badges462 silver badges512 bronze badges

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

3 Comments

BrainLikeADullPencil Over a year ago

so the curly braces aren't part of the capturing groups (and therefore not included in argument b) because they're not in the parentheses?

Blender Over a year ago

@BrainLikeADullPencil: Yep. The parentheses include everything that you want to capture. You can have multiple sets of parentheses.

Blender Over a year ago

@BrainLikeADullPencil: Here's a quick demo. It should be helpful: jsfiddle.net/KeHdU/5

Chris Like · Accepted Answer · 2012-12-08 23:46:29Z

0

If the maximum number of arguments isn't used, they are ignored. But if the arguments within the function are referenced and not tested first for !undefined, the script will error out.

answered Dec 8, 2012 at 23:46

Chris Like

2801 silver badge9 bronze badges

Comments

jermel · Accepted Answer · 2012-12-09 00:20:28Z

See https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String/replace on how to use a replacement function

function replacer(match, p1, p2, p3, offset, string){
    // p1 is nondigits, p2 digits, and p3 non-alphanumerics
    return [p1, p2, p3].join(' - ');
};

match: is the entire matched substring (ie what matched the regex)

p1, p2 .... pn: are The nth parenthesized submatch string (within your matched substring)

offset: offset in the original string

string: input string

in your case you didnt supply the full arguments

s.replace(a, b /*, offset, string*/)

so a=match and b=p1

** Note that the function will be invoked multiple times for each full match to be replaced if the regular expression in the first parameter is global.

So each match begins with { and ends with } and you have 1 capturing parenthesis that matches the content inside the braces. Also since you are using a global match /{([^{}]*)}/g

Therefore, the function is invoked twice on the 2 matches with the following parameters:

'{name}', 'name', 7, 'Hello, {name} welcome to {place}'
'{place}', 'place', 25, 'Hello, {name} welcome to {place}'

and the entire match (ie the first parameter) is replaced with the return value of the function

Collectives™ on Stack Overflow

JavaScript replace

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related