Javascript 正则表达式替换影响单个单词

Question

假设我有一个函数 icon_trans(icon)用 char 替换预期输入作为输出。该功能按预期工作正常，但存在一个问题。

当输入例如showers预期输出 ' .
输入为snow moon时或 snowmoon预期输出 ; .
当输入为 sun 时，输出为 I。

但是，当输入为rain sun时或 rainsun , 输出为 I ，而不是预期的 % .

这样做的原因是合乎逻辑的，因为正则表达式正在修补 rain然后 sun并返回 sun char，即 I , 而不是 rainsun一个是% .

每个包含单词 sun 的输入都会发生同样的情况在其中( downpour sun 、 rain sun 、 flurries sun 等)。

JS fiddle 将在问题的末尾。

function icon_trans(icon) {
    icon = icon.replace(/\s+/g, ''); // remove whitespace

    var mapObj = {
        showers:"'",
        snowmoon:";",
        downpour:"*",
        rain:"$",
        sleet:"0",
        snow:"9",
        hail:"5",
        downpoursun:"+",
        rainsun:"%",
        flurries:"6",
        flurriessun:"7",
        fog:"<",
        haze:"?",
        lightning:"F",
        cloud:"!",
        cloudsun:'"',
        sun:"I"
    };

    icon = icon.replace(/showers|snowmoon|downpour|rain|sleet|snow|hail|downpoursun|rainsun|flurries|flurriessun|fog|haze|lightning|cloud|cloudsun|sun/gi, function(matched) {
        icVar = mapObj[matched]
    });

    console.log(icVar);
}  

谢谢!

Answer 1

您需要将备选方案放入分组结构中(我建议使用非捕获组 (?:...))并设置单词边界 \b两端:

/\b(?:showers|snowmoon|downpour|rain|sleet|snow|hail|downpoursun|rainsun|flurries|flurriessun|fog|haze|lightning|cloud|cloudsun|sun)\b/gi
 ^^^^^                                                                                                                             ^^^

查看显示如何将 rain sun 替换为 % 的演示(如预期):

function icon_trans(icon) {
    icon = icon.replace(/\s+/g, ''); // remove whitespace

    var mapObj = {
        showers:"'",
        snowmoon:";",
        downpour:"*",
        rain:"$",
        sleet:"0",
        snow:"9",
        hail:"5",
        downpoursun:"+",
        rainsun:"%",
        flurries:"6",
        flurriessun:"7",
        fog:"<",
        haze:"?",
        lightning:"F",
        cloud:"!",
        cloudsun:'"',
        sun:"I"
    };

    icon = icon.replace(/\b(?:showers|snowmoon|downpour|rain|sleet|snow|hail|downpoursun|rainsun|flurries|flurriessun|fog|haze|lightning|cloud|cloudsun|sun)\b/gi, function(matched) {
        icVar = mapObj[matched]
    });

    document.body.innerHTML = icVar;
}  
icon_trans("rain sun");