JavaScript 正則表達式提取 PNG 資源名稱：靜態檔名與動態拼接字串雙模式匹配

需求

從字串中提取兩類 PNG 資源名稱：

1. 純檔名：icon.png, bg_image.png
2. 程式碼拼接形式：icon_skill_123_45_png

正則方案

const regex = /(?:^|\s)([A-Za-z0-9_\-\.]+\.png)(?=\s|$)|icon_skill_[A-Za-z0-9_]+_png/g;
// 簡化版（針對題目範例）
const regex = /([A-Za-z0-9_\-\.]+\.png)|(icon_skill_[A-Za-z0-9_]+_png)/g;

使用範例

const str = 'load("icon.png"); startLoad("icon_skill_100_1_png");';
const matches = str.match(regex);
console.log(matches); // ["icon.png", "icon_skill_100_1_png"]

進階：提取捕獲組

const regex = /([A-Za-z0-9_\-\.]+\.png)|(icon_skill_[A-Za-z0-9_]+_png)/g;
let match;
while ((match = regex.exec(str)) !== null) {
    if (match[1]) console.log('靜態檔名:', match[1]);
    if (match[2]) console.log('動態拼接:', match[2]);
}

關鍵點

• 使用 | 分隔兩種模式，() 捕獲組便於區分類型。
• 字元類別 [A-Za-z0-9_\-\.] 涵蓋常見檔名字元；依實際命名規則調整。
• 全域旗標 g 確保提取所有匹配。