Replace doesn't work when a extra character is added

Question

As of my Previous Question I figured out how i can replace multiple text in an array without calling .replace function many times

const iconMap = {
    "ico.Win10": '<i class="fab fa-windows"></i>',
    "ico.Ubuntu": '<i class="fab fa-ubuntu"></i>',
    "ico.Whatsapp": '<i class="fab fa-whatsapp"></i>',
    "ico.Instagram": '<i class="fab fa-instagram"></i>',
    "ico.Google": '<i class="fab fa-google"></i>',
    "ico.Microsoft": '<i class="fab fa-microsoft"></i>',
    "ico.Twitter": '<i class="fab fa-twitter"></i>',
    "ico.Facebook": '<i class="fab fa-facebook"></i>',
}

var userText = "ico.Win10 + S";
var keysArray = userText.split("+").filter(e =>  String(e));
keysArray = $.map(keysArray, $.trim);



for (let i = 0; i < keysArray.length; i++) {
    if (iconMap[keysArray[i]] != undefined) {
        keysArray[i] = keysArray[i].replace(keysArray[i], iconMap[keysArray[i]])
    }
}

console.log(keysArray)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

But if my userText Variable changes to something like "ico.Win10 Windows + S";

I get output ["ico.Win10 Windows", "S"] instead of ["<i class="fab fa-windows"></i> Windows", "S"]

pilchard · Accepted Answer · 2021-09-04T11:16:10.213

The duplicate that was flagged for you previous post indicated the use of regular expressions for the replace, which allow one to target specific patterns within a string.

You can apply this to your use case, searching for substrings that start with ico.. To allow for the possibility that there may be more than one such substring, the snippet below uses matchAll() to iterate over all matches and replace if there is a corresponding property in the iconMap lookup.

const iconMap = { 'ico.Win10': '<i class="fab fa-windows"></i>', 'ico.Ubuntu': '<i class="fab fa-ubuntu"></i>', 'ico.Whatsapp': '<i class="fab fa-whatsapp"></i>', 'ico.Instagram': '<i class="fab fa-instagram"></i>', 'ico.Google': '<i class="fab fa-google"></i>', 'ico.Microsoft': '<i class="fab fa-microsoft"></i>', 'ico.Twitter': '<i class="fab fa-twitter"></i>', 'ico.Facebook': '<i class="fab fa-facebook"></i>', };

const replaceIco = (str) => {
  for (const [, ico] of str.matchAll(/(ico\..*?)\s/g)) {
    str = str.replace(ico, iconMap[ico] ?? ico);
  }

  return str;
};

const userText = 'ico.Whatsapp WhatsApp ico.Win10 Windows + S';

const keysArray = userText.split('+').map(replaceIco);

console.log(keysArray);

If you'd rather not use/learn RegExp then you can achieve the same thing using array methods by splitting the passed string at each ' ' and mapping over each word returning the values from the lookup table if they exist.

const iconMap = { 'ico.Win10': '<i class="fab fa-windows"></i>', 'ico.Ubuntu': '<i class="fab fa-ubuntu"></i>', 'ico.Whatsapp': '<i class="fab fa-whatsapp"></i>', 'ico.Instagram': '<i class="fab fa-instagram"></i>', 'ico.Google': '<i class="fab fa-google"></i>', 'ico.Microsoft': '<i class="fab fa-microsoft"></i>', 'ico.Twitter': '<i class="fab fa-twitter"></i>', 'ico.Facebook': '<i class="fab fa-facebook"></i>', };

const replaceIco = (str) => {
  return str
    .split(' ')
    .map((s) => iconMap[s] ?? s)
    .join(' ');
};

const userText = 'ico.Whatsapp WhatsApp ico.Win10 Windows + S';

const keysArray = userText.split('+').map(replaceIco);

console.log(keysArray);

Replace doesn't work when a extra character is added

1 Answers1