Introduction

In modern web design, most components are modular, resulting in repeated structures like task lists, product information, or navigation menus. These consistent frameworks simplify extracting data in a structured format.

Examples:

1. CoolPC CPU Product Page: How can we quickly extract price details for products?
2. Agile development Kanban tasks: How to consolidate tasks relevant to your annual objectives?
3. Other use cases: Searching across multiple files for specific content and parsing it.

These scenarios can be addressed by efficiently extracting necessary data in VS Code, enabling further analysis.

This article uses practical examples to demonstrate how to leverage regular expressions in VS Code to extract meaningful information from raw data and transform it into analyzable formats.

Preparation

Install VS Code

Ensure VS Code is installed on your computer. If not, refer to the Visual Studio Code section in “Awesome Windows - Essential Productivity Software Installation and Guide”.

Common Regular Expressions

In VS Code, we use the search functionality to find strings that match specific patterns. By utilizing regular expressions, we can select the content we need. Below is a compilation of commonly used regular expressions that every developer should be familiar with:

There are also some more specialized regular expressions, such as lookaheads, word boundaries, and non-digits, which are less commonly used in searches and will not be covered here. For those interested, refer to Microsoft’s documentation.

Extracting Product Information

This example uses the CoolPC CPU page, which displays product names and pricing information. How can we extract product names and prices from the webpage and convert them into an Excel file for further analysis? Below are the detailed steps and workflow:

Retrieve Web Page Source Code

1. Navigate to the CoolPC CPU Product Page.

2. Right-click on any blank area of the webpage and select View Page Source, or use the shortcut Ctrl + U.

   

3. Use Ctrl + A to select all the page source content, then Ctrl + C to copy it.

4. Paste the copied content into VS Code using Ctrl + V.

Search Target

In VS Code, use Search (Ctrl + F). A search bar will appear at the top-right of the editor, with an option to enable regular expressions. This feature must be activated to search using regular expressions.

We can observe that the product name is enclosed within <div class=t> and </div>, while the price information is on the next line, starting with <div class=x> followed by either a tax-included (含稅) or tax-excluded (未稅) NT + number.

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【16C/32T】4.3G(↑5.7G)170W/With RDNA iGPU搭板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>

We can enter <div class=t>.*?</div>\n<.*?\d+ in the search bar to perform a matching search.

This regular expression can be interpreted as follows:

• Matches a starting tag: the HTML tag <div class=t>.
• Then matches any characters .*?, zero or more times, in a non-greedy manner.
• Next, it matches the closing tag </div> and proceeds to a newline.
• After the newline, it matches < at the start of a tag. .*? indicates an unknown length, but it must eventually match one or more digits \d+.

If you’re not familiar with these matching rules, it’s recommended to try typing them yourself to get a better sense of how they work.

For those comfortable with regular expressions, this can even be simplified to: <d.*=t>.*?.*\n<d.*=x>.*?\d+.

Select All Occurrences

In VS Code, you can quickly select all occurrences items using the Command Palette or a shortcut. Here are the steps:

1. Open the Command Palette

   Press F1 or Ctrl + Shift + P, then type Select All Occurrences of Find Match in the search bar. Alternatively, you can use the shortcut Ctrl + Shift + L.

2. Execute Selection

   After confirming the matching items, press the shortcut. The system will automatically select all matching items. Exit the search mode to view the selected results.

   

3. Copy and Paste

   Press Ctrl + C to copy the selected content. Open a new blank document using Ctrl + N, then paste the copied content with Ctrl + V.

   

4. Format the Data

   Use regular expressions to format the data for easier analysis:

   • Use Ctrl + Shift + L again to select unrelated content and delete it.
   • Perform a regex-based replace operation to convert specific strings into \t (TAB space), making the data easier to import into Excel for analysis. Format it as Product Name\tPrice.

Paste into Excel

Once the data is organized, paste it into Excel for further processing:

1. Copy Selected Content
   Select all rows and press Ctrl + C to copy the data to the clipboard.

2. Paste Special
   Select the target cell (e.g., A1) and use the shortcut Ctrl + Shift + V to paste the content as Text Format. Excel will automatically parse the \t (TAB) delimiters, splitting the data into multiple columns.

   • Column A will contain product names.
   • Column B will contain product prices.

Once pasted, you can proceed with further data processing or analysis.

Output Results

Below are the extracted CPU prices in Taiwan as of December 2024.

Conclusion

This article highlighted the effective use of the Select All Occurrences of Find Match feature to filter relevant content and organize it into structured data for further analysis. Notably, this feature can be used without opening the search bar by selecting specific strings and pressing the shortcut Ctrl + Shift + L to effortlessly find all matching items.

With VS Code’s regular expressions, we can precisely search for key information. During processes requiring extensive filtering, these actions can be performed entirely within VS Code, eliminating the need to rely on GPT for accurate data extraction.

The application of regular expressions extends beyond VS Code. Mastering them can yield long-term technical benefits in various programming languages and tools such as JavaScript, Python, and more.

References

1. Regular Expression Language - Quick Reference - .NET | Microsoft Learn
2. Regexper