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

Question

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

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

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

这样做的原因是合乎逻辑的，因为正则表达式正在修补rain，然后是sun，并返回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");

Answer 2

您的正则表达式基本上以非常复杂的方式执行mapObj[icon]。

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

    var mapObj = {...};

    return mapObj[icon];
}

如果你坚持使用正则表达式，这里有一个不那么笨重的方法：

icon = icon.replace(/\s+/g, '');

var re = new RegExp('\\b(' + Object.keys(mapObj).join('|') + ')\\b', 'i');
var m = icon.match(re);

return mapObj[m[1]];