Original Blog Entry: Textractor

Il2c — Mon, 26 Jan 2026 05:58:29 GMT

Textractor, the utility tool I was talking about. This tool is soooo cool, and useful for what I do.

I use it alot and updated it to v3.

Adding file input, and the option to export certain lines for certain data.

Free Share Use. If you do decide to redistribute it, send a link back to the site / this blog.

!DOCTYPE html

html lang= en

head

meta charset= UTF-8

meta name= viewport content= width=device-width, initial-scale=1.0

title TEXTractor v3 /title

!-- Import Inter Font from Google Fonts --

link rel= preconnect href= https://fonts.googleapis.com

link rel= preconnect href= https://fonts.gstatic.com crossorigin

link href= https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600 display=swap rel= stylesheet

style

/* CSS Reset Base */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Inter', sans-serif;

font-weight: 400;

background-color: #f8f9fa;

color: #2d3748;

line-height: 1.6;

padding: 20px;

max-width: 1200px;

margin: 0 auto;

padding-top: 80px; /* Space for tabs */

}

h1, h2, h3 {

font-weight: 600;

color: #1a202c;

margin-bottom: 0.5rem;

}

h1 {

font-size: 2.5rem;

border-bottom: 3px solid #4299e1;

padding-bottom: 10px;

margin-bottom: 20px;

}

h2 {

font-size: 1.5rem;

margin-top: 1rem;

}

/* Tab Navigation - FLAT STYLE */

.tab-nav {

position: fixed;

top: 20px;

left: 20px;

right: 20px;

max-width: 1200px;

margin: 0 auto;

background: white;

border-radius: 4px;

border: 1px solid #cbd5e0;

display: flex;

z-index: 100;

}

.tab-btn {

flex: 1;

padding: 14px 20px;

border: none;

background: none;

font-family: 'Inter', sans-serif;

font-weight: 500;

font-size: 1rem;

color: #718096;

cursor: pointer;

transition: all 0.2s ease;

border-bottom: 3px solid transparent;

}

.tab-btn:hover {

color: #4a5568;

background-color: #f7fafc;

}

.tab-btn.active {

color: #4299e1;

border-bottom-color: #4299e1;

font-weight: 600;

}

.tab-content {

display: none;

}

.tab-content.active {

display: block;

}

/* Main Container Sections - FLAT STYLE */

.container {

background-color: #ffffff;

border-radius: 6px;

border: 1px solid #cbd5e0;

padding: 30px;

margin-bottom: 25px;

}

/* Collapsible Section Styling - FLAT STYLE */

.collapsible {

background-color: #edf2f7;

border: 1px solid #cbd5e0;

border-radius: 6px;

margin-bottom: 15px;

overflow: hidden;

}

.collapsible-header {

padding: 12px 16px;

cursor: pointer;

display: flex;

justify-content: space-between;

align-items: center;

font-weight: 500;

transition: background-color 0.2s ease;

}

.collapsible-header:hover {

background-color: #e2e8f0;

}

.collapsible-header::after {

content: ' ';

font-size: 0.8rem;

transition: transform 0.3s ease;

}

.collapsible-header.active::after {

transform: rotate(180deg);

}

.collapsible-content {

padding: 0 20px;

max-height: 0;

overflow: hidden;

transition: max-height 0.3s ease-out, padding 0.3s ease;

background-color: #ffffff;

border-top: 1px solid #cbd5e0;

}

.collapsible-content.expanded {

padding: 20px;

max-height: 2000px;

}

/* Form and Input Styling */

label {

display: block;

font-weight: 500;

margin-bottom: 8px;

color: #4a5568;

}

textarea, input[type= text ] {

width: 100%;

padding: 14px;

border: 1px solid #cbd5e0;

border-radius: 6px;

font-family: 'Inter', sans-serif;

font-size: 1rem;

margin-bottom: 20px;

background-color: #fff;

transition: border 0.2s;

resize: vertical;

}

textarea:focus, input[type= text ]:focus {

outline: none;

border-color: #4299e1;

}

#inputData {

min-height: 220px;

}

#results {

min-height: 150px;

background-color: #f7fafc;

font-family: monospace;

white-space: pre-wrap;

word-wrap: break-word;

}

/* File Upload Styling */

.upload-section {

margin-bottom: 20px;

padding: 15px;

background-color: #f7fafc;

border: 1px solid #cbd5e0;

border-radius: 6px;

}

.upload-row {

display: flex;

align-items: center;

gap: 15px;

flex-wrap: wrap;

}

.file-input-wrapper {

flex: 1;

min-width: 200px;

}

#fileUpload {

width: 100%;

padding: 10px;

border: 1px solid #cbd5e0;

border-radius: 6px;

background-color: white;

}

#fileName {

font-size: 0.9rem;

color: #718096;

font-style: italic;

}

/* Button Styling - FLAT STYLE */

.button-group {

display: flex;

gap: 15px;

flex-wrap: wrap;

margin-top: 10px;

}

.download-group {

display: flex;

gap: 15px;

flex-wrap: wrap;

margin-top: 20px;

}

button {

padding: 14px 28px;

border: 1px solid #cbd5e0;

border-radius: 6px;

font-family: 'Inter', sans-serif;

font-weight: 600;

font-size: 1rem;

cursor: pointer;

transition: all 0.2s ease;

display: inline-flex;

align-items: center;

justify-content: center;

gap: 8px;

background-color: white;

}

#extractBtn {

background-color: #4299e1;

color: white;

border-color: #3182ce;

}

#extractBtn:hover {

background-color: #3182ce;

}

.download-btn {

background-color: #48bb78;

color: white;

border-color: #38a169;

}

.download-btn:hover {

background-color: #38a169;

}

#clearBtn, #clearInputBtn {

background-color: #a0aec0;

color: white;

border-color: #718096;

}

#clearBtn:hover, #clearInputBtn:hover {

background-color: #718096;

}

button:disabled {

opacity: 0.5;

cursor: not-allowed;

}

.input-actions {

display: flex;

justify-content: flex-end;

margin-top: 10px;

}

#clearInputBtn {

padding: 10px 20px;

font-size: 0.9rem;

}

/* Info Stats */

.info-box {

background-color: #ebf8ff;

border-left: 4px solid #4299e1;

padding: 16px;

border-radius: 4px;

margin: 20px 0;

}

.stats {

font-size: 0.9rem;

color: #718096;

margin-top: 15px;

padding-top: 15px;

border-top: 1px solid #cbd5e0;

display: flex;

justify-content: space-between;

align-items: center;

flex-wrap: wrap;

gap: 10px;

}

.stat-number {

font-weight: 600;

color: #2d3748;

}

/* Guide Content */

.guide-content {

line-height: 1.7;

}

.guide-content h3 {

margin-top: 1.5rem;

margin-bottom: 0.75rem;

color: #2d3748;

}

.guide-content ul, .guide-content ol {

margin-left: 1.5rem;

margin-bottom: 1rem;

}

.guide-content li {

margin-bottom: 0.5rem;

}

.guide-content code {

background-color: #edf2f7;

padding: 2px 6px;

border-radius: 4px;

font-family: 'Monaco', 'Menlo', monospace;

font-size: 0.9em;

color: #2d3748;

}

/* Scroll to Top Button */

#scrollTopBtn {

position: fixed;

bottom: 30px;

right: 30px;

width: 50px;

height: 50px;

border-radius: 6px;

background-color: #4299e1;

color: white;

border: 1px solid #3182ce;

cursor: pointer;

opacity: 0;

visibility: hidden;

transition: all 0.3s ease;

z-index: 99;

font-size: 1.2rem;

display: flex;

align-items: center;

justify-content: center;

}

#scrollTopBtn.visible {

opacity: 1;

visibility: visible;

}

#scrollTopBtn:hover {

background-color: #3182ce;

}

/* Footer */

footer {

text-align: center;

margin-top: 40px;

color: #718096;

font-size: 0.9rem;

padding: 20px;

}

/style

/head

body

!-- Tab Navigation --

div class= tab-nav

button class= tab-btn active data-tab= extractor Extractor /button

button class= tab-btn data-tab= guide Guide /button

/div

header

h1 TEXTractor v3 /h1

p class= info-box Extract 3-digit and 4-digit numbers from your text. Upload files, extract data, and download odd/even line results. /p

/header

!-- Extractor Tab Content --

div id= extractor-tab class= tab-content active

main

!-- Input Section --

section class= container

div class= collapsible

div class= collapsible-header active

h2 Step 1: Input Your Text Data /h2

/div

div class= collapsible-content expanded

!-- File Upload Section --

div class= upload-section

p strong Upload a text file: /strong /p

div class= upload-row

div class= file-input-wrapper

input type= file id= fileUpload accept= .txt,.csv,.text

div id= fileName No file chosen /div

/div

button id= clearInputBtn

span /span Clear Input

/button

/div

/div

p Or paste/type your data below. TEXTractor will scan this area for 3 and 4-digit numbers. /p

label for= inputData Input Data: /label

textarea id= inputData placeholder= Paste your data here... For example:

1

321

078

2

234

985

... /textarea

div class= stats

div

span Character Count: span id= charCount class= stat-number 0 /span /span |

span Line Count: span id= lineCount class= stat-number 0 /span /span

/div

/div

/div

/div

/section

!-- Action Output Section --

section class= container

div class= collapsible

div class= collapsible-header active

h2 Step 2: Extract Download /h2

/div

div class= collapsible-content expanded

div class= button-group

button id= extractBtn

span /span Extract Numbers

/button

button id= clearBtn

span /span Clear All

/button

/div

label for= results Extracted Numbers (3-digit and 4-digit only): /label

textarea id= results readonly placeholder= Your extracted numbers will appear here... /textarea

div class= stats

span Numbers Found: span id= numbersCount class= stat-number 0 /span /span |

span 3-digit: span id= threeDigitCount class= stat-number 0 /span /span |

span 4-digit: span id= fourDigitCount class= stat-number 0 /span /span

/div

!-- Download Options --

div class= download-group

button id= downloadAllBtn class= download-btn disabled

span /span Download All

/button

button id= downloadOddBtn class= download-btn disabled

span /span Download Odd Lines

/button

button id= downloadEvenBtn class= download-btn disabled

span /span Download Even Lines

/button

/div

p small em Odd lines: 1, 3, 5, 7... | Even lines: 2, 4, 6, 8... /em /small /p

/div

/div

/section

/main

/div

!-- Guide Tab Content --

div id= guide-tab class= tab-content

section class= container

div class= guide-content

h2 How TEXTractor v3 Works /h2

h3 Extraction Logic /h3

p The tool scans your input line-by-line and extracts sequences that match the following rules: /p

ul

li strong 3-digit numbers: /strong Exactly three consecutive digits (e.g., code 123 /code , code 045 /code ). /li

li strong 4-digit numbers: /strong Exactly four consecutive digits (e.g., code 4567 /code , code 1001 /code ). /li

/ul

p Numbers with fewer than 3 or more than 4 digits are ignored. Each extracted number is placed on its own line in the results. /p

h3 New in v3: Position-Based Downloads /h3

ul

li strong Download All: /strong All extracted numbers (original behavior) /li

li strong Download Odd Lines: /strong Lines 1, 3, 5, 7, 9... from the results /li

li strong Download Even Lines: /strong Lines 2, 4, 6, 8, 10... from the results /li

/ul

h3 File Upload /h3

p Upload code .txt /code or code .csv /code files to automatically load text into the input field. /p

h3 Example /h3

p Input: code ID: 12345 Code: 987 and 555 and 10000 /code br

Output: code 987 /code (only the 3-digit number is extracted; 12345 is 5-digit, 10000 is 5-digit). /p

h3 Important Notes /h3

ul

li Numbers with leading zeros are included (e.g., 012, 0015) /li

li The tool uses word boundaries, so numbers within words won't be extracted /li

li Each extracted number appears on a separate line /li

li Large inputs are processed quickly without page freezing /li

/ul

h3 Keyboard Shortcuts /h3

ul

li strong Ctrl/Cmd + Enter: /strong Extract numbers /li

li strong Ctrl/Cmd + S: /strong Download all results /li

li strong Tab: /strong Navigate between elements /li

/ul

h3 Tips for Best Results /h3

ol

li Upload text files or paste data directly /li

li Use Clear Input to reset only the input field /li

li Use Clear All to reset both input and results /li

li Choose the appropriate download option based on your needs /li

li Check the stats to verify extraction counts /li

/ol

/div

/section

/div

!-- Scroll to Top Button --

button id= scrollTopBtn aria-label= Scroll to top /button

footer

p TEXTractor v3 Enhanced extraction with position-based downloads and file upload. /p

/footer

script

// ==================== DOM Elements ====================

const inputDataTextarea = document.getElementById('inputData');

const resultsTextarea = document.getElementById('results');

const extractBtn = document.getElementById('extractBtn');

const downloadAllBtn = document.getElementById('downloadAllBtn');

const downloadOddBtn = document.getElementById('downloadOddBtn');

const downloadEvenBtn = document.getElementById('downloadEvenBtn');

const clearBtn = document.getElementById('clearBtn');

const clearInputBtn = document.getElementById('clearInputBtn');

const fileUpload = document.getElementById('fileUpload');

const fileName = document.getElementById('fileName');

const charCountSpan = document.getElementById('charCount');

const lineCountSpan = document.getElementById('lineCount');

const numbersCountSpan = document.getElementById('numbersCount');

const threeDigitCountSpan = document.getElementById('threeDigitCount');

const fourDigitCountSpan = document.getElementById('fourDigitCount');

const scrollTopBtn = document.getElementById('scrollTopBtn');

const tabBtns = document.querySelectorAll('.tab-btn');

const tabContents = document.querySelectorAll('.tab-content');

// Store extracted numbers array globally

let extractedNumbers = [];

// ==================== Tab Navigation ====================

tabBtns.forEach(btn = {

btn.addEventListener('click', function() {

const tabId = this.getAttribute('data-tab');

// Update active tab button

tabBtns.forEach(b = b.classList.remove('active'));

this.classList.add('active');

// Show corresponding tab content

tabContents.forEach(content = content.classList.remove('active'));

document.getElementById(`${tabId}-tab`).classList.add('active');

// Scroll to top when switching tabs

window.scrollTo({ top: 0, behavior: 'smooth' });

});

});

// ==================== Collapsible Sections ====================

document.querySelectorAll('.collapsible-header').forEach(header = {

header.addEventListener('click', function() {

this.classList.toggle('active');

const content = this.nextElementSibling;

content.classList.toggle('expanded');

});

});

// ==================== File Upload Handler ====================

fileUpload.addEventListener('change', function(e) {

const file = e.target.files[0];

if (!file) return;

fileName.textContent = file.name;

// Check if file is text-based

if (!file.type.includes('text/') !file.name.endsWith('.txt') !file.name.endsWith('.csv')) {

alert('Please upload a text file (.txt or .csv)');

fileUpload.value = '';

fileName.textContent = 'No file chosen';

return;

}

const reader = new FileReader();

reader.onload = function(event) {

inputDataTextarea.value = event.target.result;

updateInputStats();

// Auto-scroll to show the loaded content

inputDataTextarea.scrollIntoView({ behavior: 'smooth', block: 'nearest' });

};

reader.onerror = function() {

alert('Error reading file. Please try again.');

fileUpload.value = '';

fileName.textContent = 'No file chosen';

};

reader.readAsText(file);

});

// ==================== Input Statistics ====================

function updateInputStats() {

const text = inputDataTextarea.value;

charCountSpan.textContent = text.length;

lineCountSpan.textContent = text.split('\n').length;

}

inputDataTextarea.addEventListener('input', updateInputStats);

window.addEventListener('load', updateInputStats);

// ==================== Core Extraction Logic ====================

function extractNumbers(text) {

const regex = /\b\d{3}\b|\b\d{4}\b/g;

const matches = text.match(regex) || [];

return matches;

}

function updateResultsStats(numbersArray) {

const threeDigit = numbersArray.filter(num = num.length === 3).length;

const fourDigit = numbersArray.filter(num = num.length === 4).length;

numbersCountSpan.textContent = numbersArray.length;

threeDigitCountSpan.textContent = threeDigit;

fourDigitCountSpan.textContent = fourDigit;

// Enable download buttons if we have results

const hasResults = numbersArray.length 0;

downloadAllBtn.disabled = !hasResults;

downloadOddBtn.disabled = !hasResults;

downloadEvenBtn.disabled = !hasResults;

}

// ==================== Position-Based Filtering ====================

function filterOddLines(numbersArray) {

return numbersArray.filter((_, index) = index % 2 === 0); // 0-indexed: 0, 2, 4...

}

function filterEvenLines(numbersArray) {

return numbersArray.filter((_, index) = index % 2 === 1); // 0-indexed: 1, 3, 5...

}

// ==================== Download Helper Function ====================

function downloadTextFile(content, filename) {

const blob = new Blob([content], { type: 'text/plain' });

const url = URL.createObjectURL(blob);

const a = document.createElement('a');

a.href = url;

a.download = filename;

document.body.appendChild(a);

a.click();

document.body.removeChild(a);

URL.revokeObjectURL(url);

}

// ==================== Button Event Handlers ====================

extractBtn.addEventListener('click', function() {

const inputText = inputDataTextarea.value;

extractedNumbers = extractNumbers(inputText);

// Format results: one number per line

resultsTextarea.value = extractedNumbers.join('\n');

// Update statistics

updateResultsStats(extractedNumbers);

// Briefly animate the extract button

this.style.transform = 'scale(0.98)';

setTimeout(() = { this.style.transform = 'scale(1)'; }, 150);

// Auto-scroll to results if they're long

if (extractedNumbers.length 10) {

resultsTextarea.scrollIntoView({ behavior: 'smooth', block: 'nearest' });

}

});

// Download All

downloadAllBtn.addEventListener('click', function() {

if (extractedNumbers.length === 0) return;

const resultText = extractedNumbers.join('\n');

downloadTextFile(resultText, `TEXTractor_All_${new Date().toISOString().slice(0,10)}.txt`);

// Visual feedback

this.innerHTML = ' span /span Downloaded All!';

setTimeout(() = {

this.innerHTML = ' span /span Download All';

}, 1500);

});

// Download Odd Lines

downloadOddBtn.addEventListener('click', function() {

if (extractedNumbers.length === 0) return;

const oddNumbers = filterOddLines(extractedNumbers);

const resultText = oddNumbers.join('\n');

downloadTextFile(resultText, `TEXTractor_OddLines_${new Date().toISOString().slice(0,10)}.txt`);

// Visual feedback

this.innerHTML = ' span /span Downloaded Odd!';

setTimeout(() = {

this.innerHTML = ' span /span Download Odd Lines';

}, 1500);

});

// Download Even Lines

downloadEvenBtn.addEventListener('click', function() {

if (extractedNumbers.length === 0) return;

const evenNumbers = filterEvenLines(extractedNumbers);

const resultText = evenNumbers.join('\n');

downloadTextFile(resultText, `TEXTractor_EvenLines_${new Date().toISOString().slice(0,10)}.txt`);

// Visual feedback

this.innerHTML = ' span /span Downloaded Even!';

setTimeout(() = {

this.innerHTML = ' span /span Download Even Lines';

}, 1500);

});

clearBtn.addEventListener('click', function() {

// Clear all without confirmation

inputDataTextarea.value = '';

resultsTextarea.value = '';

extractedNumbers = [];

// Reset file upload

fileUpload.value = '';

fileName.textContent = 'No file chosen';

// Disable download buttons

downloadAllBtn.disabled = true;

downloadOddBtn.disabled = true;

downloadEvenBtn.disabled = true;

// Reset all stats

charCountSpan.textContent = '0';

lineCountSpan.textContent = '0';

numbersCountSpan.textContent = '0';

threeDigitCountSpan.textContent = '0';

fourDigitCountSpan.textContent = '0';

// Visual feedback

this.style.backgroundColor = '#48bb78';

this.innerHTML = ' span /span Cleared!';

setTimeout(() = {

this.style.backgroundColor = '';

this.innerHTML = ' span /span Clear All';

}, 1000);

// Return focus to input

inputDataTextarea.focus();

});

clearInputBtn.addEventListener('click', function() {

// Clear only input without confirmation

inputDataTextarea.value = '';

// Reset file upload

fileUpload.value = '';

fileName.textContent = 'No file chosen';

// Update input stats

updateInputStats();

// Visual feedback

this.style.backgroundColor = '#48bb78';

this.innerHTML = ' span /span Input Cleared!';

setTimeout(() = {

this.style.backgroundColor = '';

this.innerHTML = ' span /span Clear Input';

}, 1000);

// Return focus to input

inputDataTextarea.focus();

});

// ==================== Scroll to Top Button ====================

function toggleScrollTopButton() {

if (window.scrollY 300) {

scrollTopBtn.classList.add('visible');

} else {

scrollTopBtn.classList.remove('visible');

}

}

scrollTopBtn.addEventListener('click', function() {

window.scrollTo({ top: 0, behavior: 'smooth' });

});

window.addEventListener('scroll', toggleScrollTopButton);

toggleScrollTopButton(); // Initial check

// ==================== Keyboard Shortcuts ====================

document.addEventListener('keydown', function(event) {

// Ctrl/Cmd + Enter to extract

if ((event.ctrlKey || event.metaKey) event.key === 'Enter') {

event.preventDefault();

extractBtn.click();

}

// Ctrl/Cmd + S to save/download all

if ((event.ctrlKey || event.metaKey) event.key === 's') {

event.preventDefault();

if (!downloadAllBtn.disabled) {

downloadAllBtn.click();

}

}

});

// ==================== Initialize ====================

console.log('TEXTractor v3 loaded successfully.');

/script

/body

/html... [ More ]