Question

有没有办法执行一步替换，如我的示例所示？

我知道，群组用于执行类似的任务，但我不确定他们真的可以在这里工作。

var css = `
    .foo { color: green; } // Invalid JS-style comment
    .bar { color: yellow; } // Invalid JS-style comment
    // Standalone invalid comment
    .baz { color: red; } // Invalid JS-style comment
`;

// Is there a way to combine these two replacements in 1 step?
css = css.replace(/;/g, ' !important;');
css = css.replace(/\/\/.*/g, '');

alert(css);

Answer 1

假设;之后发生的任何事情只是关闭括号和评论，只需用你需要的东西替换所有内容：

css.replace(/;.*/g, ' !important; }')

当然，如果你在其中一个块中有多个语句，它将无效。

关于你的编辑：那么你可以先匹配评论和可选的分号，但是你需要使用替换函数，如下所示：

css.replace(/(;[^\/]*)?\/\/.*/g, (m, g) => g ? ' !important; }' : '');

它只匹配//或分号和注释，但只捕获后者。然后，它检查是否有东西被捕获，并且只替换那种情况。

Answer 2

您可以使用replace的回调函数参数，使用OR |将两个正则表达式连接在一起（第二个正则表达式需要在（最好）非捕获组中分组，因为{{ 1}}优先）。然后检查匹配是否为|：

您可以使用箭头功能进行缩短：

css = css.replace(/;|(?:\/\/.*)/g, function(match) {
    if(match === ";") {
        return " !important;";
    }
    return "";
});

示例：

css = css.replace(/;|(?:\/\/.*)/g, m => m === ";"? " !important;": "");

将2个替换组合成1

2 个答案: