HTML Element Extractor
Extract text, HTML and attribute values from any markup using CSS selectors, with copy, filter and export to TXT, CSV or JSON.
On this page
How to use the HTML Element Extractor
The HTML Element Extractor pulls specific content out of any HTML code using CSS selectors. Paste your markup, enter a selector such as .post-title or #main a, and get every match listed in seconds. Everything runs locally in your browser, so your code is never uploaded anywhere.
- Paste your HTML into the input box, upload an .html or .txt file, or click Example to try it with sample markup.
- Type one or more CSS selectors separated by commas, for example
a.menu-link, .cta. - Pick what to extract: text content, inner or outer HTML, an attribute such as href or src, or all attributes.
- Press Extract, or leave Live extraction enabled and watch results update as you type.
- Filter the results, sort them A to Z, then copy everything or download the list as TXT, CSV or JSON.
Supported selectors
The tool uses the browser’s native querySelectorAll engine, so any valid CSS selector works: classes ( .item ), IDs ( #header ), tag names ( a ), attributes ( a[href] ), nesting ( nav a ), and combinations like div.card h2. Multiple selectors can be separated by commas and results are merged.
Extraction modes
- Text content – the visible text inside each matched element, whitespace collapsed.
- Inner HTML – everything between the opening and closing tags.
- Outer HTML – the complete element including its tags.
- href / src / class / id – the value of that specific attribute.
- Custom attribute – any attribute you name, for example
data-id. - All attributes – every attribute of each matched element, listed as
name="value"pairs.
Options
- Remove duplicates – hides repeated values so you only see unique matches.
- Live extraction – re-runs automatically while you type or change settings.
- Show as table – displays results in a table with the source element next to each value.
- Filter box – narrows the displayed list to values containing your search text.
Examples
Get all link URLs: selector a with the mode href attribute returns every href value in the document, ready to copy.
Collect product titles: selector h2.product-title, h3.product-title with the mode Text content lists every heading text. Enable Remove duplicates to skip repeats.
Inventory attributes: selector img with the mode All attributes outputs the full src, alt and class set of every image, which is handy for audits and migrations.