如何编写JS正则匹配以${spurs.开头含方括号以}结尾的字符串

匹配规则要求 #

需要从字符串中提取符合以下所有条件的片段：

• 片段以${spurs.开头
• 起始内容后必须包含成对方括号[]，方括号内部可承载任意内容
• 片段以}结尾

测试用例预期 #

原有写法问题 #

之前使用的正则const regex = /[$]{spurs.+?[}]/gi存在明显缺陷：

• 没有强制要求中间必须出现方括号结构，只要开头后有任意字符加结尾}就会命中，导致不带方括号的内容被误匹配
• 没有对括号类型做区分，使用花括号的不符合规则的内容也会被匹配到

正确正则写法 #

const regex = /\$\{spurs\.[^[\]]*\[.*?\][^[\]]*\}/gi;

正则逻辑说明 #

• \$\{spurs\.：转义特殊字符，精确匹配固定开头${spurs.
• [^[\]]*：匹配第一个方括号出现前的所有非方括号字符，比如示例中的stadium字段名
• \[.*?\]：强制匹配成对的方括号及括号内的任意内容，缺省该结构就无法完成匹配
• [^[\]]*：匹配方括号结束后到结尾标识前的非方括号字符，兼容后续可能的属性拼接场景
• \}：精确匹配结尾的}标识
• 修饰符g表示全局匹配所有符合要求的片段，i表示忽略大小写，不需要可自行移除

匹配效果验证 #

使用上述正则执行三个测试用例：

1. 输入"Hi ${spurs.stadium[capacity]}"：成功匹配到目标片段${spurs.stadium[capacity]}，符合预期
2. 输入"Hi ${spurs.stadium}"：无符合规则的方括号结构，无匹配结果，返回空，符合预期
3. 输入"Hi ${spurs.stadium{capacity}}"：括号为花括号不符合方括号要求，无匹配结果，返回空，符合预期

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