Regex Character Class Generator

🔧 Regex Character Class Generator

Visually build regex character classes [...], test matches in real-time.

Select Character Ranges

[a-z]

Test Match

📖 Regex Character Class Generator

What isRegexcharacterclass?

RegexExpressioncharacterclassisuse Brackets[...]enclosed character set, matching anyBracketsany one character in the set. For example[abc]matches a, b, orcany one in the set. [a-z] matches anyLowercase.[^0-9]matches non-Digitscharacter.Character classes are one of the most commonly used regex constructs.

Core features of Regex Character Class Generator

Regex Character Class Generator in 3 steps

  1. Check needed character ranges (digits, letters、special chars, etc.)
  2. Choose whether to use negation mode
  3. Select quantifier (+, *, ?, {n,m})
  4. Enter text in test area to verify matching
  5. Copy the generated regex to your project

When to use Regex Character Class Generator

📖 FAQ

What are regex character classes?

Regex character classes use brackets [...] to define a set of characters. For example, [abc] matches a, b, or c. [a-z] matches any lowercase letter. [^0-9] matches any non-digit character.

How to use hyphens in character classes?

In character classes, hyphens represent ranges, like [a-z] for all characters from a to z. To match a literal hyphen, place it at the start or end like [-abc] or [abc-], or escape it with [\\-].

What does negation class [^...] mean?

The negation class [^...] matches any character NOT in the set. For example, [^0-9] matches any character that is not a digit.

What predefined character classes are available?

Common predefined classes include \\d (digits), \\w (word characters), \\s (whitespace), and their negated counterparts \\D, \\W, \\S.

Will data be uploaded to a server?

No. All regex generation and testing is done locally in your browser. No data is uploaded to any server. Your regex patterns and test data remain entirely under your control.

const charGroups = [ { id: 'digits', range: '0-9', desc: 'Digits', selected: false }, { id: 'lower', range: 'a-z', desc: 'Lowercase', selected: true }, { id: 'upper', range: 'A-Z', desc: 'Uppercase', selected: false }, { id: 'hex', range: 'a-f0-9', desc: 'Hexadecimal', selected: false }, { id: 'vowels-lower', range: 'aeiou', desc: 'Lower Vowels', selected: false }, { id: 'vowels-upper', range: 'AEIOU', desc: 'Upper Vowels', selected: false }, { id: 'chinese', range: '\\u4e00-\\u9fff', desc: '', selected: false }, { id: 'hiragana', range: '\\u3040-\\u309f', desc: 'Japanese Hiragana', selected: false }, { id: 'katakana', range: '\\u30a0-\\u30ff', desc: 'Japanese Katakana', selected: false }, { id: 'hangul', range: '\\uac00-\\ud7af', desc: 'Korean', selected: false }, { id: 'punctuation', range: '.,;:!?\\u2026', desc: 'Punctuation', selected: false }, { id: 'math-symbols', range: '+\\-=*/<>%', desc: 'Math Symbols', selected: false }, { id: 'whitespace', range: '\\s', desc: 'Whitespace', selected: false }, { id: 'word-chars', range: '\\w', desc: 'wordcharacter(\\w)', selected: false }, { id: 'url-safe', range: 'a-zA-Z0-9_-', desc: 'URL Safe Chars', selected: false }, { id: 'brackets', range: '()[]{}<>', desc: 'Brackets', selected: false } ]; function initCharGroups() { const container = document.getElementById('char-groups'); container.innerHTML = ''; charGroups.forEach(g => { const item = document.createElement('div'); item.className = 'char-item' + (g.selected ? ' selected' : ''); item.innerHTML = `[${g.range}]${g.desc}`; container.appendChild(item); }); } function toggleGroup(id) { const g = charGroups.find(x => x.id === id); if (g) g.selected = !g.selected; initCharGroups(); updateRegex(); } function buildCharClass() { const selected = charGroups.filter(g => g.selected).map(g => g.range); const custom = document.getElementById('custom-chars').value.trim(); if (custom) { // Escape special regex chars in custom input const escaped = custom.replace(/([\]\\^-])/g, '\\$1'); selected.push(escaped); } return selected.join(''); } function updateRegex() { const negate = document.getElementById('negate-mode').checked; const quant = document.getElementById('quantifier').value; const chars = buildCharClass(); // Show/hide quantifier params const params = document.getElementById('quantifier-params'); const mLabel = document.getElementById('q-m-label'); if (quant === '{n}' || quant === '{n,}' || quant === '{n,m}') { params.style.display = 'flex'; mLabel.style.display = quant === '{n,m}' ? 'flex' : 'none'; } else { params.style.display = 'none'; } if (!chars) { document.getElementById('regex-result').textContent = '(PleaseSelect Character Ranges)'; testMatch(); return; } const neg = negate ? '^' : ''; let qStr = ''; if (quant === '{n}') { const n = document.getElementById('q-n').value || '1'; qStr = `{${n}}`; } else if (quant === '{n,}') { const n = document.getElementById('q-n').value || '1'; qStr = `{${n},}`; } else if (quant === '{n,m}') { const n = document.getElementById('q-n').value || '1'; const m = document.getElementById('q-m').value || '3 || '3'; qStr = `{${n},${m}}`; } else { qStr = quant; } const regex = `[${neg}${chars}]${qStr}`; document.getElementById('regex-result').textContent = regex; testMatch(); } function testMatch() { const regexStr = document.getElementById('regex-result').textContent; const testInput = document.getElementById('test-input').value; const resultDiv = document.getElementById('test-result'); const statsDiv = document.getElementById('match-stats'); if (regexStr === '(PleaseSelect Character Ranges)' || !testInput) { resultDiv.innerHTML = ''; statsDiv.textContent = ''; return; } try { const regex = new RegExp(regexStr, 'g'); const matches = testInput.match(regex); // Highlight matches let highlighted = ''; let lastIndex = 0; let match; const re2 = new RegExp(regexStr, 'g'); while ((match = re2.exec(testInput)) !== null) { highlighted += escapeHtml(testInput.slice(lastIndex, match.index)); highlighted += `${escapeHtml(match[0])}`; lastIndex = re2.lastIndex; } highlighted += escapeHtml(testInput.slice(lastIndex)); resultDiv.innerHTML = highlighted || 'No matches'; statsDiv.textContent = matches ? matches.length + ' match(es) found' : ''; } catch(e) { resultDiv.innerHTML = `RegexError: ${escapeHtml(e.message)}`; statsDiv.textContent = ''; } } function escapeHtml(str) { return str.replace(/&/g,'&').replace(//g,'>'); } function copyRegex() { const text = document.getElementById('regex-result').textContent; navigator.clipboard.writeText(text).then(() => showToast('✅ Regex copied')); } function copyFullPattern() { const regex = document.getElementById('regex-result').textContent; const full = `const regex = /${regex}/g;`; navigator.clipboard.writeText(full).then(() => showToast('✅ Full pattern copied')); } function loadExample() { // Reset and set a common example charGroups.forEach(g => g.selected = false); charGroups.find(g => g.id === 'digits').selected = true; charGroups.find(g => g.id === 'lower').selected = true; charGroups.find(g => g.id === 'upper').selected = true; document.getElementById('custom-chars').value = '@._-'; document.getElementById('negate-mode').checked = false; document.getElementById('quantifier').value = '+'; document.getElementById('test-input').value = 'user@example.com admin@test.org invalid! 123@456'; initCharGroups(); updateRegex(); } function toggleFeedback(){const p=document.getElementById('feedback-panel');p.style.display=p.style.display==='none'?'block':'none';} function submitFeedback(){ const type=document.getElementById('feedback-type').value; const typeLabel={feedback:'💡 Feature Request',bug:'🐛 Bug Report',other:'💬 Other'}[type]; const title=encodeURIComponent(typeLabel+' - '+window.location.pathname); const body=encodeURIComponent('**pageside**: '+window.location.href+'\\n**Type**: '+typeLabel+'\\n\\n'+text); window.open('https://github.com/webtools-cn/tools-site/issues/new?title='+title+'&body='+body,'_blank'); document.getElementById('feedback-success').style.display='block'; } function showToast(msg){const t=document.getElementById('toast')||(()=>{const d=document.createElement('div');d.id='toast';d.className='toast';document.body.appendChild(d);return d;})();t.textContent=msg;t.classList.add('show');setTimeout(()=>t.classList.remove('show'),2000);} // Keyboard shortcuts document.addEventListener('keydown', function(e) { if(e.ctrlKey && e.key==='Enter') { copyRegex(); e.preventDefault(); } if(e.ctrlKey && e.shiftKey && e.key==='C') { copyFullPattern(); e.preventDefault(); } }); // Init initCharGroups(); updateRegex();