添加额外字符时替换不起作用

Question

从我的开始，我想出了如何在不多次调用 .replace 函数的情况下替换数组中的多个文本

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>

但是如果我的 userText 变量更改为 "ico.Win10 Windows + S";

我得到输出 ["ico.Win10 Windows", "S"] 而不是 ["<i class="fab fa-windows"></i> Windows", "S"]

Answer 1

之前为您标记的重复项 post 表明使用了 regular expressions 进行替换，这允许将字符串中的特定模式作为目标。

您可以将此应用于您的用例，搜索以 ico. 开头的子字符串。为了考虑到可能存在多个这样的子字符串，下面的代码片段使用 matchAll() 遍历所有匹配项，如果 iconMap 查找中有相应的属性则替换。

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);

如果您不想使用 use/learn RegExp，那么您可以使用数组方法实现相同的目的，方法是在每个 ' ' 处拆分传递的字符串并映射每个单词，从查找中返回值table 如果它们存在。

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

javascript

arrays

replace