使用JavaScript提取GLSL函数体遇阻，求正则解决方案

I get it—your current regex is grabbing everything from the first function to the last closing brace instead of each individual function. Let's break down why that's happening and fix it.

Why Your Original Regex Fails #

Your regex /^(vec4|vec3|vec2|float|int).*\{.*\}/gms uses greedy matching with .*, which in ms mode (multi-line + dotall) will match all content from the first matching return type all the way to the very last } in the entire script. Even switching to non-greedy .*? won't work reliably, because it would stop at the first closing brace it encounters—including any nested braces inside a function body (like if you had an if block).

The Solution: Match Balanced Braces #

To properly capture each function, we need a regex that can handle balanced curly braces (matching the opening { of a function with its corresponding closing }). Here's a working pattern:

const functionRegex = /(vec4|vec3|vec2|float|int|void)\s+\w+\s*\([^)]*\)\s*\{(?:[^{}]|(?R))*\}/gms;

Let's break down what each part does:

• (vec4|vec3|vec2|float|int|void): Matches all valid GLSL function return types (added void since your script includes main() which returns nothing)
• \s+\w+\s*: Captures the function name, allowing for whitespace around it
• \([^)]*\): Matches the entire parameter list (anything inside the parentheses, excluding nested parentheses—this works for your case; we'd adjust if you needed to handle nested params)
• \s*\{: Matches the opening brace of the function body, with optional whitespace
• (?:[^{}]|(?R))*: The key part—this non-capturing group either matches characters that aren't braces, or recursively matches the entire regex pattern (handling any nested braces inside the function body)
• \}: Matches the closing brace that corresponds to the function's opening brace

Working JavaScript Code #

Here's how to use this regex with your GLSL code:

const glslCode = `precision highp float; varying vec4 v_color; #if USE_TEXTURE varying vec2 v_uv0; uniform sampler2D texture; #endif vec2 sfx_func_uv_to_01(vec4 ucrect, vec2 uv) { return vec2( sfx_func_uv_to_01(ucrect[0], ucrect[0] + ucrect[2], uv.x), 1.0 - sfx_func_uv_to_01(ucrect[1], ucrect[1] - ucrect[3], uv.y) ); } vec2 sfx_func_uv_to_01(vec4 ucrect, vec2 uv) { return vec2(1.0, 2.0); } vec4 sfx_fs_output_uv_quarter(vec2 uv, vec4 color) { vec4 result = color; return result; } void main () { vec2 uv = v_uv0; vec4 color = texture2D(texture, uv); gl_FragColor = color; }`;

for (const match of glslCode.matchAll(functionRegex)) {
  console.log("Extracted function:\n", match[0]);
}

This will output all 4 functions (including main()) as separate matches, exactly what you wanted.

A Quick Note on Edge Cases #

This regex works great for your provided GLSL, but if your code includes:

• Strings with curly braces (e.g., "example { text }")
• Comment blocks with curly braces (e.g., /* { comment } */)

You'll need to preprocess the GLSL to remove comments and handle strings first, since the regex will treat those braces as part of the function structure otherwise. For your current use case though, this solution should be perfect.

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