Short hand for replacing text in array

Question

I have this simple code

string = "google windows ico.Win10 ubuntu ico.Microsoft"
keysArray = string.split("+").filter(e =>  e);

for (let i = 0; i < keysArray.length; i++) {
    keysArray[i] = keysArray[i].replace("ico.Win10", '<i class="fab fa-windows"></i>')
    keysArray[i] = keysArray[i].replace("ico.Apple", '<i class="fab fa-apple"></i>')
    keysArray[i] = keysArray[i].replace("ico.Android", '<i class="fab fa-android"></i>')
    keysArray[i] = keysArray[i].replace("ico.Linux", '<i class="fab fa-linux"></i>')
    keysArray[i] = keysArray[i].replace("ico.Ubuntu", '<i class="fab fa-ubuntu"></i>')
    keysArray[i] = keysArray[i].replace("ico.Unity", '<i class="fab fa-unity"></i>')
    keysArray[i] = keysArray[i].replace("ico.Snapchat", '<i class="fab fa-snapchat"></i>')
    keysArray[i] = keysArray[i].replace("ico.Whatsapp", '<i class="fab fa-whatsapp"></i>')
    keysArray[i] = keysArray[i].replace("ico.Instagram", '<i class="fab fa-instagram"></i>')
    keysArray[i] = keysArray[i].replace("ico.Google", '<i class="fab fa-google"></i>')
    keysArray[i] = keysArray[i].replace("ico.Microsoft", '<i class="fab fa-microsoft"></i>')
}

console.log(keysArray)

Here I am converting a string to array and filtering all the empty string out. Then replacing the text inside every item of the array if the text exists

But when there are a lot of texts to replace, then I have to call the .replace function thousands of times. Is there a way to do the same thing in a well mannered short way?

I'm confused. There is no plus sign in `string`, and there are no empty strings that are filtered out. So you loop over one item in your for loop. Did you suppose to split with a space instead? Run a `console.log(keysArray)` before the for loop to see what I mean. — Rickard Elimää, Sep 04 '21 at 08:54
Make a lookup table and test the keysArray for the text - for example Win10 before actually replacing. Use template literals — mplungjan, Sep 04 '21 at 08:55
The OP here has dynamic replacements for each input. The accepted answer of the dupe, IIUC, is using an alternation with just a single replacement. — Tim Biegeleisen, Sep 04 '21 at 09:00
Read "Making it Reusable" in the referred thread, but you need to do a check for "Win10", so it reads "windows" instead of just using lowercase. I had a non-regexp answer, but it was longer, both in code and loops, but I think it was more readable. — Rickard Elimää, Sep 04 '21 at 09:15
Just realized that the accepted answer in the referred thread doesn't take dots `.` into account, which will make that answer harder to use, for anyone who doesn't understand regex. Always good to know regex though. — Rickard Elimää, Sep 04 '21 at 09:33

mplungjan · Accepted Answer · 2021-09-04T12:57:37.787

I suggest a lookup table

const icons = {
  "Win10": "fa-windows",
  "Apple": "fa-apple",
  "Android": "fa-android",
  "Linux": "fa-linux",
  "Ubuntu": "fa-ubuntu",
  "Unity": "fa-unity",
  "Snapchat": "fa-snapchat",
  "Whatsapp": "fa-whatsapp",
  "Instagram": "fa-instagram",
  "Google": "fa-google",
  "Microsoft": "fa-microsoft"
}
const string = "google windows ico.Win10 ubuntu ico.Microsoft"
const keysArray = string
  .split(" ")
  .map(key => key.startsWith('ico.') ? `<i class="fab ${key.replace(key, icons[key.split(".")[1]])}"></i>` : key)
  .join(" ");
console.log(keysArray)

If we are ABSOLUTELY SURE on inputs matching the icons, we do not even need that - here the Win10 would fail but the rest work

const string = "google windows ico.Windows ubuntu ico.Microsoft"
const keysArray = string
  .split(" ")
  .map(key => key.startsWith('ico.') ? 
  `<i class="fab fa-${key.split(".")[1].toLowerCase()}"></i>` : key)
  .join(" ");
console.log(keysArray)

Short hand for replacing text in array

1 Answers1

Linked