Parse and replace a string in JavaScript?

Question

I've a HTML string that looks as follows

var hoverData = "<table id='hvr-revision_history'><tr><td>{date_value}2013-07-29T11:52:38Z{date_value}</td><td>Error1</td></tr><tr><td>{date_value}2013-07-30T11:52:38Z{date_value}</td><td>Error2</td></tr><tr><td>{date_value}2013-07-31T11:52:38Z{date_value}</td><td>Error3</td></tr></table>";

The final output needed is

"<table id='hvr-revision_history'><tr><td>07/29/2013 11:52:38 AM</td><td>Error1</td></tr><tr><td>07/30/2013 11:52:38 AM</td><td>Error2</td></tr><tr><td>07/31/2013 11:52:38 AM</td><td>Error3</td></tr></table>"

My approach is

var sindex = 0;
while(true){
    var sindex = hoverData.indexOf("{date_value}"); //startindex
    if(sindex <0)
        break;
    var eindex = hoverData.indexOf("{date_value}",sindex+1); //endindex
    var date = hoverData.substring(sindex+12,eindex); //string between {date_value} tags, so 2013-07-29T11:52:38Z
    //logic to parse the date
    var hoverData = hoverData.replace(date,parsedDate);                     
}
var hoverData = hoverData.replace("{date_value}","");

Is there a better approach? My code will fail if I've 2 or more dates that are exactly the same.

Why are you using jsFiddle to post a simple string literal instead of just putting it right in the question? — user2437417
– user2437417, Commented Aug 1, 2013 at 22:46

Paul Roub · Accepted Answer · 2013-08-01 22:57:16Z

1

You can match the individual date chunks as a regular expression, with a function (instead of a string) as the replacement. That function can call your parse function, which I've stubbed out here since you didn't include it.

var hoverData = "<table id='hvr-revision_history'><tr>" +
  "<td>{date_value}2013-07-29T11:52:38Z{date_value}</td>" +
  "<td>Error1</td></tr>" + 
  "<tr><td>{date_value}2013-07-30T11:52:38Z{date_value}</td>" + 
  "<td>Error2</td></tr>" +
  "<tr><td>{date_value}2013-07-31T11:52:38Z{date_value}</td>" +
  "<td>Error3</td></tr></table>";

// your "logic to parse the date" would go here
function parseDate(str) {
    return "( parsed " + str + " )";    
}

// look for our delimiters with *only* the legal timestamp 
// characters between them
hoverData = hoverData.replace(/\{date_value\}([A-Z0-9\-\:]+)\{date_value\}/g,

    // match gets the fully-matched string, plus any captured patterns 
    // (the parenthesized chunk) as separate parameters. `datepart` will
    // contain the matched timestamp string only

    function (match, datepart) {
      return parseDate(datepart);
   }
);

hoverData = hoverData.replace("{date_value}","");

See it in action here: http://codepen.io/paulroub/pen/CGqlh

edited Aug 1, 2013 at 22:57

answered Aug 1, 2013 at 22:50

Paul Roub

36.5k27 gold badges88 silver badges95 bronze badges

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

6 Comments

SDS Over a year ago

/g is global match, How is datepart pulled from match? and how is the function called on all 3 dates at once?

Paul Roub Over a year ago

/g means "do this for ALL of the matching {datevalue}...{datevalue} pieces, not just the first one we find."

Paul Roub Over a year ago

datepart is pulled from the match by the parentheses surrounding it in the regular expression, as noted in the comments.

Paul Roub Over a year ago

And the function isn't called on all 3 dates at once; it's called for each match, separately, in turn.

Paul Roub Over a year ago

/g is the magic part. It means "for each match you find in this string, replace it with whatever I'm passing as a replacement". In this case, "what I'm passing" is a function. So, for each match, String.replace calls the function with the data for that match.

|

Collectives™ on Stack Overflow

Parse and replace a string in JavaScript?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related