如何编写正则表达式匹配React中styled-components定义代码

原有正则失效原因 #

• 默认状态下正则元字符.不匹配换行符，你写的(\n.*)只会匹配换行后的第一行文本，后续换行内容无法被捕获
• 末尾的(\`)?为可选匹配，正则扫描到第一行结尾就会停止匹配，不会主动向后查找结束反引号

可直接使用的正则 #

通用版（兼容所有正则引擎，无需额外修饰符） #

const\s+(\w+)\s*=\s*styled(?:\.\w+|\([^)]*\))?\s*`([\s\S]*?)`

支持s(dotall)修饰符的引擎版本（比如JS/Java/Python） #

开启s修饰符后可以把[\s\S]*?替换为.*?，写法更简洁：

const\s+(\w+)\s*=\s*styled(?:\.\w+|\([^)]*\))?\s*`(.*?)`

正则说明 #

• const\s+(\w+)：匹配const声明，捕获第一个分组为styled组件名
• \s*=\s*styled：匹配等号和styled关键字，兼容等号前后的空格
• (?:\.\w+|\([^)]*\))?：兼容两种styled调用写法：styled.原生组件名和styled(自定义组件)，非捕获组不占用捕获位
• \s*`([\s\S]*?)` ：匹配模板字符串的前后反引号，[\s\S]*?为惰性匹配所有字符（包含换行），直到遇到第一个结束反引号停止

匹配效果 #

对你提供的示例代码：

const Container = styled.View`
  flex: 1;
  background-color: transparent;
  align-items: center;
  justify-content: flex-end;
`

该正则可以完整匹配整个styled组件声明，同时可按需提取组件名、样式内容两个分组。

拓展提示 #

如果需要匹配let/var声明的styled组件，可以把开头的const替换为(?:const|let|var)。

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