JavaScript：单次replace结合正则移除首尾特定字符串的问题

原代码的问题 #

你之前的两次replace没达到预期，是因为每次都基于**原始字符串x**做替换，第二次替换并没有复用第一次的结果。比如第一次替换后得到的字符串没有保存，第二次还是用原x，所以只会生效其中一次。

正则表达式解决方案 #

用一个正则就能一次性匹配并移除首尾的目标字符串，正则为：/^trace\("|"\);$/g

修改后的JavaScript代码：

function update(){
    var x = document.getElementById("input").value;
    if (x.startsWith('trace("') && x.endsWith('");')){
        // 一次替换完成首尾内容移除
        document.getElementById("output").innerHTML = x.replace(/^trace\("|"\);$/g, '');
    }else{
        document.getElementById("output").innerHTML = "";
    }
}

正则含义拆解（给新手的说明）

• ^：锚定字符串开头，确保只匹配最前面的trace("
• trace\("：(和"是正则特殊字符，用\转义后匹配字面量trace("
• |：逻辑“或”，分隔两个匹配规则
• "\);：转义)后匹配字面量");
• $：锚定字符串结尾，确保只匹配最后面的");
• g：全局匹配标志，这里虽然首尾各只有一处，但加上能避免极端场景的遗漏

不用正则的修正方案 #

如果你不想用正则，只需要把第一次替换的结果保存下来，再做第二次替换即可：

function update(){
    var x = document.getElementById("input").value;
    if (x.startsWith('trace("') && x.endsWith('");')){
        var processed = x.replace('trace("', '');
        document.getElementById("output").innerHTML = processed.replace('");', '');
    }else{
        document.getElementById("output").innerHTML = "";
    }
}

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