Javascript Extract Tokens from String into Array

Question

I have a string like: The zoo has a panda named {{123}} that is colored {{234}}

I have an array that represents each one of the tokens like:

[ { label: 'Ralph', id: '123' }, { label: 'White and Black', id: '234' } ]

I want to traverse the string and replace the {{token}} with the actual label BUT i also need to keep track of the character position that I'm replacing. Ralph would be position 26 character. A trickier scenario would be: after I replace {{123}} with Ralph the text position of color would be different since Ralph is 5 characters and the token was 7 characters.

Any thoughts on the fastest approach to solving this?

Try to first solve your problem. From there on, try to optimise it. — HamZa, Mar 18 '15 at 13:43
what would be the regex to grab all the matches and get the indexes? I guess thats my missing piece. — amcdnl, Mar 18 '15 at 13:43
Why do you need the indexes? And do you need them as of **before** any replacements were done, or after replacements leading up to that token were done, or...? — T.J. Crowder, Mar 18 '15 at 13:46
@amcdnl: What exactly are you trying to do? Are you __only__ simply trying to replace the `{{tokens}}`? Or do you need the indexes for something else? — Cerbrus, Mar 18 '15 at 13:51
@Hacketo ya, i was totally overthinking it! indexOf is perfect. sometimes it just helps to brainstorm with others. — amcdnl, Mar 18 '15 at 13:52

score 7 · Answer 1 · edited Mar 18 '15 at 15:07

7

This may not be as hard as you'd imagine:

var str = "The zoo has a panda named {{123}} that is colored {{234}}";
var array = [ { label: 'Ralph', id: '123' }, { label: 'White and Black', id: '234' } ];

for(var i = 0; i < array.length; i++){
  str = str.replace("{{" + array[i].id + "}}", array[i].label);
}
alert(str);

Simply loop over the array and replace each key in the string with the desired label. If the key isn't found in the string, the replace simply does nothing.

edited Mar 18 '15 at 15:07

Sterling Archer

22,070
18
81
118

answered Mar 18 '15 at 13:44

Cerbrus

70,800
18
132
147

2

OP also wants the indexes of the replaced items, although it's unclear why, or in what form. – Paul Roub Mar 18 '15 at 13:45
1

@PaulRoub: My guess is that he wants the indexes for `substring`-like methods he shouldn't be using in the first place. – Cerbrus Mar 18 '15 at 13:46
Comments are not for extended discussion; this conversation has been [moved to chat](http://chat.stackoverflow.com/rooms/73256/discussion-on-answer-by-cerbrus-javascript-extract-tokens-from-string-into-array). – Taryn Mar 18 '15 at 14:34
@bluefeet: There were actually some useful comments in there, relevant to the answer ([example](http://chat.stackoverflow.com/transcript/message/22165661#22165661)).... I agree the 2nd half didn't add any value though. (Thanks for moving back those) – Cerbrus Mar 18 '15 at 14:38
1

All the comments are in the chatroom, it was getting a bit out of hand here raising an auto-flag. Since the discussion was still happening, I moved it. – Taryn Mar 18 '15 at 14:41

score 0 · Answer 2 · answered Mar 18 '15 at 15:11

If you want track token position you can use String.prototype.split to split on each token, then you don't have to care about the indexes.

var str = "The zoo has a panda named {{123}} that is colored {{234}}";
str.split(/\{\{(.+?)\}\}/g);

//["The zoo has a panda named ", "123", " that is colored ", "234", ""]

fiddle example of use

Javascript Extract Tokens from String into Array

2 Answers2