使用 VS Code 把原始資料轉為可分析的資料

前言

在現代網頁設計中，大多數元件採用模組化結構，這意味著重複性的框架隨處可見，例如任務列表、商品資訊或連結目錄等。而這些重複性結構讓我們更容易以格式化方式提取特定資料。

例如：

原價屋 CPU 商品頁面：如何快速取得商品的價格資訊？
敏捷開發中的看板任務：如何彙整屬於自己今年度的任務清單？
其他應用場景：例如從多個檔案中搜尋特定內容並進行解析。

這些情境都可以在 VS Code 中快速提取所需資料，利於後續分析。

本篇文章將以實務操作為例，說明如何在 VS Code 中使用正規表示式提取原始資料中的有意義內容，將其轉換為可分析的資料。

前置作業

安裝 VS Code

請先確定電腦已安裝 VS Code。如果尚未安裝，請參考《Awesome Windows - 必備生產力軟體安裝與說明》中的 Visual Studio Code 小節。

常用的正規表示式

我們會在 VS Code 中透過尋找，找到符合規則的字串。使用正歸表示式可以選擇我們想要的內容。以下是常用且開發人員幾乎必須掌握的正規表示式範例整理：

描述	正規表示式	範例	說明
匹配任意字元	.	a.c 匹配 `abc` 或 `a3c`	單一任意字元（不含換行符）
匹配一次或多次	+	a+ 匹配 `a` 或 `aaa`	至少匹配 1 次
匹配零次或多次	*	a* 匹配 `aaa` 或 `a` 或`空字串`	前面的字元可以出現 0 次或多次
匹配零次或一次	?	a? 匹配 `a` 或`空字串`	最多匹配 1 次
匹配開始位置	^	^hello 匹配 `hello` world	行首
匹配結束位置	$	world$ 匹配 hello `world`	行尾
匹配數字	\d	\d+ 匹配 `123` 或 `56`	數字 0-9
匹配字母或數字	\w	\w+ 匹配 `hello123`	包含字母、數字及底線 _
匹配具體次數	{n}	a{3} 匹配 `aaa`	精確匹配 n 次
匹配最少次數範圍	{n,}	a{2,} 匹配 `aa` 或 `aaaa`	至少匹配 n 次
匹配範圍次數	{n,m}	a{2,4} 匹配 `aa` 或 `aaa`	至少 n 次，最多 m 次
匹配某字符集	[abc]	[abc] 匹配 `a` 或 `b` 或 `c`	只匹配指定字符集中的字元
匹配字符集以外的字符	[^abc]	[^abc] 不匹配 `a` 或 `b` 或 `c`	匹配不在指定字符集內的字符
匹配換行符	\n	a\nb 匹配 `a` + `換行` + `b`	特殊字符：換行
非貪婪匹配	*?、+?、??、{n,m}?	a+? 匹配 `a` 而非 aaa，aaa 會被匹配 3 次個別的 a	優先匹配最少次數
分組	()	(ab)+ 匹配 `abab` 或 `ab`	將內容分組，便於捕獲和重複使用
匹配特殊字符（轉義）	\	`\[` 匹配 `[`，`\)` 匹配 `)`	轉義正規表示式的特殊字符

還有一些較特殊的正規表示式，如 先行斷言、單字邊界、非數字 等，在搜尋中較少用到，此處不詳述。有興趣者可參考微軟的說明文件。

取得商品頁面的資訊

本案例以原價屋的 CPU 頁面為例，該頁面展示了商品名稱與價格資訊。我們應該如何擷取網頁中的商品名稱與售價，並將其轉換為 Excel 以便進行進一步的分析呢？以下是具體的操作流程與步驟：

取得網頁原始碼

首先來到原價屋 CPU 商品頁面。
對著網頁空白處右鍵 → 檢視頁面來源（Chrome: 網頁原始碼），或使用快捷鍵 Ctrl + U。
使用 Ctrl + A 全選頁面原始碼內容，然後按 Ctrl + C 複製。
在 VS Code 中使用 Ctrl + V 貼上複製的內容。

搜尋目標

於 VS Code 中，進行搜尋（Ctrl + F），此時編輯器上右方會出現尋找條，有一個使用規則運算式的按鈕，需要打開此功能以使用正規表示式進行搜尋。

我們可以看到商品名稱被 <div class=t> 與 </div> 包起，價格資訊位於下一行，並於 <div class=x> 起始，後續會接一個含稅或未稅的 NT + 數字。

1
2
3
<div class=w>QU1EIFI5IDk5NTBYpU6yerKwuMuhaTE2rtYvMzK6/KFqNC4zRyih9DUuN0cpMTcwVy+o41JETkGkusXjt2aqTzEyLzI4ukmk7qFJ</div>
<span onclick='Show(this)'><img src='/eval/4/amd9000.jpg'><div class=t>AMD R9 9950X 【16核/32緒】 4.3G(↑5.7G)170W/具RDNA內顯搭板12/28截止！</div>
<div class=x>含稅：NT20950 &nbsp;&diams;<a href='https://www.amd.com/zh-tw/products/processors/desktops/ryzen/9000-series/amd-ryzen-9-9950x.html' target=_BLANK>開箱討論</a> &nbsp;<font class=buy onmouseover='url(100, this)' onclick="Buy('100')">Buy</font></div></span>

我們可以於搜尋欄中輸入 <div class=t>.*?</div>\n<.*?\d+ 進行匹配搜尋。

匹配流程

這句正規表示式可以解讀為：

匹配一個開頭：<div class=t> 的 HTML 標籤。
接著匹配任意字符 .*?，0 次或多次，使用非貪婪模式。
接著匹配到 </div> 的關閉標記，後去接著一個換行。
換行後匹配 < 開頭，.*?表示不知道有多長，但後續必須匹配一個或多個數字 \d+。

上述的規則匹配規則不熟悉，建議可以自己用打的，會更有匹配的感覺。

熟悉的話甚至也可以化簡為：<d.*=t>.*?.*\n<d.*=x>.*?\d+

選取所有找到的相符項目

在 VS Code 中，可使用功能窗格或快捷鍵快速選取所有符合條件的內容。以下為操作步驟：

叫出功能窗格
按下 F1 或 Ctrl + Shift + P，在搜尋框中輸入 選取所有找到的相符項目。你也可以直接使用快捷鍵 Ctrl + Shift + L。
執行選取
確認所需條件的項目後，按下快捷鍵，系統會自動選取所有符合條件的內容。此時離開搜尋狀態，即可檢視選取的結果。
複製與貼上
按下 Ctrl + C 複製選取的內容，並使用 Ctrl + N 開啟新的空白文件後，按下 Ctrl + V 貼上複製的內容。
進行格式調整
利用正規表示式將資料整理為方便分析的格式：
- 再次使用 Ctrl + Shift + L 選取不相干的內容，將其刪除。
- 執行正規表示式取代，將指定字串取代為 \t (TAB 空格)，以利後續資料導入至 Excel 進行分析。使其為商品名稱\t價格。

貼至 Excel

完成資料整理後，將結果貼到 Excel 中進行進一步處理：

複製選取內容 選取所有行，並按下 Ctrl + C 將資料複製到剪貼簿。
選擇性貼上 點選目標儲存格 A1，使用快捷鍵 Ctrl + Shift + V 進行選擇性貼上，並將內容貼上為文字格式。Excel 會自動解析 \t，將資料分割為多欄。
- A 欄為商品名稱。
- B 欄為商品售價。

貼上完成後，即可進行後續的資料處理或分析。

輸出結果

以下為抓取後的 2024 年 12 月，臺灣 CPU 售價。

CPU	TWD	USD
AMD 8500G + 任搭主板 (需跟主機板在同一張發票開立)	4990	153.02
AMD R5 3400G 【4核/8緒】 3.7G(↑4.2G)65W/12nm/代理商三年保/含內顯	2550	78.20
AMD R5 5500GT 【6核/12緒】 3.6G(↑4.4G)65W/含內顯/7nm	3900	119.60
AMD R5 5600GT 【6核/12緒】 3.6G(↑4.6G)65W/含內顯/7nm	4450	136.46
AMD R5 7600X 【6核/12緒】 4.7G(↑5.3G)105W/具RDNA內顯	7600	233.06
AMD R5 8400F 【6核/12緒】 4.2G(↑4.7G)65W	5700	174.79
AMD R5 8500G 【6核/12緒】 3.5G(↑5.0G)65W/RDNA 3內顯/新4奈米技術/最低45W	5150	157.93
AMD R5 8600G 【6核/12緒】 4.3G(↑5.0G)65W/RDNA 3內顯~~內建NPU支持AI~~	6350	194.73
AMD R5 9600X 【6核/12緒】 3.9G(↑5.4G)65W/具RDNA內顯	8650	265.26
AMD R7 5700X3D 【8核/16緒】 3.0G(↑4.1G)105W/96M	7550	231.52
AMD R7 5700X3D 【8核/16緒】 3.0G(↑4.1G)105W/96M 【任搭主機板】	6990	214.35
AMD R7 7700 MPK(代理含風扇) 【8核/16緒】 3.8G(↑5.3G)65W	7390	226.62
AMD R7 7700 MPK(代理含風扇) 【8核/16緒】 3.8G(↑5.3G)65W 【任搭主機板】	6990	214.35
AMD R7 7800X3D 【8核/16緒】 4.2G(↑5.0G)96M/120W/具RDNA內顯	13950	427.78
AMD R7 8700F 【8核/16緒】 4.1G(↑5.0G)65W/內建NPU支持AI~	9200	282.12
AMD R7 8700G 【8核/16緒】 4.2G(↑5.1G)65W/RDNA 3內顯~~內建NPU支持AI~~	9450	289.79
AMD R7 9700X 【8核/16緒】 3.8G(↑5.5G)65W/具RDNA內顯	11550	354.19
AMD R9 7900 【12核/24緒】 3.7G(↑5.4G)65W/具RDNA內顯	13400	410.92
AMD R9 7950X3D 【16核/32緒】 4.2G(↑5.7G)128M/120W/具RDNA內顯	21450	657.77
AMD R9 7950X 【16核/32緒】 4.5G(↑5.7G)170W/具RDNA內顯	18900	579.58
AMD R9 9900X 【12核/24緒】 4.4G(↑5.6G)120W/具RDNA內顯	14850	455.38
AMD R9 9950X 【16核/32緒】 4.3G(↑5.7G)170W/具RDNA內顯	20950	642.44
AMD Ryzen TR 7980X 【64核/128緒】 3.2G(↑5.1G)350W/320M/7nm	182700	5602.58
AMD Ryzen TR PRO 7975WX 【32核/64緒】 4.0G(↑5.3G)350W/144M/7nm	137700	4222.63
Intel Core Ultra 5 245K 【14核/14緒】 4.2G(↑5.2G)/24M/內顯Xe-core/無風扇	10100	309.72
Intel Core Ultra 5 245KF 【14核/14緒】 4.2G(↑5.2G)/24M/無內顯/無風扇	9650	295.92
Intel Core Ultra 7 265K 【20核/20緒】 3.9G(↑5.5G)/30M/內顯Xe-core/無風扇	13600	417.05
Intel Core Ultra 7 265KF 【20核/20緒】 3.9G(↑5.5G)/30M/無內顯/無風扇	13000	398.65
Intel Core Ultra 9 285K 【24核/24緒】 3.7G(↑5.7G)/36M/內顯Xe-core/無風扇	19700	604.11
Intel i3-12100 【4核/8緒】 (與指定主板同發票,省150)	3100	95.06
Intel i3-12100 【4核/8緒】 3.3G(↑4.3G)/12M/UHD730/60w 全球三年保	3250	99.66
Intel i3-14100 【4核/8緒】 (與指定主板同發票,省300)	3500	107.33
Intel i3-14100 【4核/8緒】 3.5GHz(↑4.7GHz)/20M/UHD730/60W	3800	116.53
Intel i3-14100F 【4核/8緒】 3.5GHz(↑4.7GHz)/20M/無內顯/58W	2880	88.32
Intel i5-12400 【6核/12緒】 (與指定主板同發票,省150)	4250	130.33
Intel i5-12400 【6核/12緒】 2.5G(↑4.4G)/18M/UHD730/65w 全球三年保	4400	134.93
Intel i5-12400F 【6核/12緒】 2.5G(↑4.4G)/18M/無內顯/65w 全球三年保	3500	107.33
Intel i5-14400 【10核/16緒】 (與指定主板同發票,省200)	6100	187.06
Intel i5-14400 【10核/16緒】 2.5GHz(↑4.7G)/24M/UHD730/65W	6300	193.19
Intel i5-14400F 【10核/16緒】 2.5GHz(↑4.7G)/24M/無內顯/65W	5400	165.59
Intel i5-14500 【14核/20緒】 (與指定主板同發票,省200)	7300	223.86
Intel i5-14500 【14核/20緒】 2.6GHz(↑5G)/24M/UHD770/65W	7500	229.99
Intel i5-14600K 【14核/20緒】 (與指定主板同發票,省400)	7590	232.75
Intel i5-14600K 【14核/20緒】 3.5G(↑5.3G)/24M/UHD770/無風扇	7990	245.02
Intel i5-14600KF 【14核/20緒】 (與指定主板同發票,省200)	7200	220.79
Intel i5-14600KF 【14核/20緒】 3.5G(↑5.3G)/24M/無內顯/無風扇	7400	226.92
Intel i7-14700 【20核/28緒】 (與指定主板同發票,省450)	9999	306.62
Intel i7-14700 【20核/28緒】 2.1GHz(↑5.4G)/33M/UHD770/65W	10450	320.45
Intel i7-14700F 【20核/28緒】 (與指定主板同發票,省500)	9200	282.12
Intel i7-14700F 【20核/28緒】 2.1GHz(↑5.4G)/33M/無內顯/65W	9700	297.45
Intel i7-14700K 【20核/28緒】 (與指定主板同發票,省600)	11900	364.92
Intel i7-14700K 【20核/28緒】 3.4G(↑5.6G)/33M/UHD770/無風扇	12500	383.32
Intel i7-14700KF 【20核/28緒】 (與指定主板同發票,省500)	10900	334.25
Intel i7-14700KF 【20核/28緒】 3.4G(↑5.6G)/33M/無內顯/無風扇	11400	349.59
Intel i9-14900F 【24核/32緒】 (與指定主板同發票,省1200)	13700	420.12
Intel i9-14900F 【24核/32緒】 2.0GHz(↑5.8G)/36M/無內顯/65W	14900	456.92
Intel i9-14900K 【24核/32緒】 (與指定主板同發票,省1000)	15700	481.45
Intel i9-14900K 【24核/32緒】 3.2G(↑6.0G)/36M/UHD770/無風扇	16700	512.11
Intel i9-14900KF 【24核/32緒】 (與指定主板同發票,省1200)	14100	432.38
Intel i9-14900KF 【24核/32緒】 3.2G(↑6.0G)/36M/無內顯/無風扇	15300	469.18
Intel Processor 300 【2核/4緒】 3.9GHz/6M/UHD710/46W	2680	82.18
Intel Xeon W5-2455X 【12核/24緒】 3.20GHz(↑4.6GHz)/30M/200W	36700	1125.42
Intel Xeon W5-2465X 【16核/32緒】 3.10GHz(↑4.7GHz)/33.75M/200W	47900	1468.87
Intel Xeon W5-3435X 【16核/32緒】 3.10GHz(↑4.7GHz)/45M/270W	56500	1732.60
Intel Xeon W7-2475X 【20核/40緒】 2.60GHz(↑4.8GHz)/37.5M/225W	61200	1876.72
Intel Xeon W7-2495X 【24核/48緒】 2.50GHz(↑4.8GHz)/45M/225W	75500	2315.24
Intel Xeon W7-3465X 【28核/56緒】 2.50GHz(↑4.8GHz)/75M/300W	100500	3081.88
Intel Xeon W9-3475X 【36核/72緒】 2.20GHz(↑4.8GHz)/82.5M/300W	132500	4063.17

結論

本篇文章重點介紹如何善用 選取所有找到的相符項目 功能，篩選符合條件的內容，將其整理為結構化的數據，便於進一步分析。值得一提的是，這個功能無需開啟搜尋框即可使用，也可以選取特定字串並按下快捷鍵 Ctrl + Shift + L，即可輕鬆找到所有相符項目。

透過 VS Code 的 正規表示式，我們可以更精準地搜尋到關鍵資訊。在需要大量篩選的過程中，這些行為在 VS Code 中即可進行，不需要丟給 GPT 便可以取得正確的資料。

正規表示式的應用不僅侷限於 VS Code，熟練掌握後，還能在 JavaScript、Python 等多種程式語言與工具中發揮作用，帶來長期的技術收益。