如何编写适配JavaScript String.replace的特定可选前缀匹配正则

需求回顾 #

需要编写正则用于JavaScript的String.replace()移除字符串前缀，规则如下：

• 匹配并移除foo（当foo后不跟冒号时），比如fooHELLO → HELLO
• 匹配并移除foo:bar（不管后面是什么），比如foo:barHELLO → HELLO，foo:bar:HELLO → :HELLO
• 不匹配foo:后跟非bar的情况，比如foo:xHELLO保持不变

原有正则的问题分析 #

1. ^foo(:bar)?(?!:)：问题出在末尾的(?!:)负向断言——当foo:bar后面紧跟冒号时（如foo:bar:HELLO），断言会判定不匹配，导致整个正则失效，无法正确移除前缀。
2. ^foo((:bar)|(?:[^:]))：这里的(?:[^:])会额外匹配foo后的第一个非冒号字符（比如fooHELLO里的H），替换后会错误移除fooH，得到ELLO。

正确的正则表达式 #

使用分支结构的正则可以精准满足需求：

const pattern = /^(foo:bar|foo(?!:))/;

正则逻辑说明

• 第一个分支foo:bar：匹配字符串开头的foo:bar，无论后续字符是什么都生效
• 第二个分支foo(?!:)：匹配字符串开头的foo，且foo后面不能紧跟冒号（避免误匹配foo:x这类不符合要求的前缀）

验证案例 #

// 测试用例
const testCases = [
  'fooHELLO',
  'foo:barHELLO',
  'foo:xHELLO',
  'foo:bar:HELLO'
];

testCases.forEach(str => {
  console.log(`${str} → ${str.replace(pattern, '')}`);
});

输出结果：

fooHELLO → HELLO
foo:barHELLO → HELLO
foo:xHELLO → foo:xHELLO
foo:bar:HELLO → :HELLO

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