Replace all occurrences of substring with values from array

Question

I have two arrays. One array contains the characters to search for and the other has the characters to replace them. I want to find all occurrences of each item in the first array within a string, and replace them with their corresponding items from the second array.

let converted = '';
    let bbCodes = [
      "[code]", "[/code]", "[h1]", "[/h1]"
    ];
    let replacers = [
      "<code>", "</code>", "<h1>", "</h1>"
    ];
    let needsConverted = this.state.txtAreaVal;
    bbCodes.map((code, index) => {
        converted = needsConverted.replace(code, replacers[index]);
        console.log(converted);
    });
    console.log(converted);
  }

Output is not quite what I expected. console output

https://stackoverflow.com/questions/1144783/how-to-replace-all-occurrences-of-a-string answers the main problem, but you also need to edit the edited string every time, not the original. — ASDFGerte, Jan 07 '20 at 19:19
Does this answer your question? [How to replace multiple characters with other multiple characters of a string at a time in javascript?](https://stackoverflow.com/questions/59222607/how-to-replace-multiple-characters-with-other-multiple-characters-of-a-string-at) or https://stackoverflow.com/questions/15604140/replace-multiple-strings-with-multiple-other-strings — ggorlen, Jan 07 '20 at 19:23
I had seen that page, and it helped get me to this point. Seems though I just needed to edit the edited string, as @ASDFGerte mentioned. Also used forEach instead of map since, as was mentioned in the accepted answer, map was not needed since I'm not doing anything to the array values. Thanks for the help, everyone. — Isaac, Jan 07 '20 at 19:30

score 1 · Accepted Answer · answered Jan 07 '20 at 19:22

The problem is you are not keeping track of the already updated version of your string.

on the first iteration, it replace the first word ( [code] to <code> ). and then assign this value to converted
on the second iteration, you replace the second word of your original string and assigning the result to converted, thus loosing the change of the previous iteration.

You don't need another variable you can reuse your initial string and continuously replace it at each iteration.

Also, instead of using map you could use forEach, which is more appropriate since you are not altering the values in the array.

let bbCodes = [
  "[code]", "[/code]", "[h1]", "[/h1]"
];
let replacers = [
  "<code>", "</code>", "<h1>", "</h1>"
];
let needsConverted = 'this is a [code] code [/code] test see [h1] here [/h1]';
bbCodes.forEach((code, index) => {
    // you don't need your other function, you can just reassign your current string to it's new value.
    needsConverted = needsConverted.replace(code, replacers[index]);
});
console.log(needsConverted);

Perfect. I knew I was missing some small detail. I originally used forEach, switching to map didn't really make much sense lol. — Isaac, Jan 07 '20 at 19:27

score 0 · Answer 2 · answered Jan 07 '20 at 19:21

I assume, you are trying to achieve this:

let converted = '';
let bbCodes = [
  "[code]", "[/code]", "[h1]", "[/h1]"
];
let replacers = [
  "<code>", "</code>", "<h1>", "</h1>"
];
let needsConverted = 'Lorem ipsum is [h1]dummy text[/h1] in the industry.';
bbCodes.map((code, index) => {
  needsConverted = needsConverted.replace(code, replacers[index]);
  console.log(needsConverted);  
});

Your basic implementation was ok. However, you were assigning the result of your replace to a new variable. Thus, you were always replacing just the one token in the originally entered string. If you instead reassign it to your initial input variable, your result will be the string with all the given tokens from your array replaced.

The important change is

let converted = needsConverted.replace(code, replacers[index]);

changed to

needsConverted = needsConverted.replace(code, replacers[index]);

Replace all occurrences of substring with values from array

2 Answers2