JS使用映射表批量替换文本时新增额外字符后替换失效如何解决？

问题原因 #

你原代码的判断逻辑是将按+拆分后的整个数组元素作为key去匹配iconMap的键，当数组元素中除了图标标识还有其他文本时（比如示例里的ico.Win10 Windows），整体无法匹配到iconMap的键，自然不会触发替换逻辑。

修正方案 #

不用判断整个元素是否匹配，直接对每个数组元素遍历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>',
}

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

// 修改后的替换逻辑
for (let i = 0; i < keysArray.length; i++) {
    // 遍历所有图标键，逐个替换当前元素中匹配的内容
    for (const iconKey in iconMap) {
        keysArray[i] = keysArray[i].replaceAll(iconKey, iconMap[iconKey])
    }
}

console.log(keysArray)
// 输出结果： ['<i class="fab fa-windows"></i> Windows', 'S']

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

如果需要兼容不支持replaceAll的旧环境，把replaceAll换成正则替换即可：

keysArray[i] = keysArray[i].replace(new RegExp(iconKey, 'g'), iconMap[iconKey])

内容的提问来源于stack exchange，提问作者Aditya Mishra