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

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

上一篇文章中标记的副本表明使用正则表达式进行替换，这允许在字符串中针对特定模式。

您可以将此应用于您的用例，搜索以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);

如果你不想使用/learn RegExp，那么你可以使用数组方法来实现同样的事情，通过在每个' '处分割传递的字符串，并映射到每个单词，如果它们存在，则返回查找表中的值。

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