Snippets: RegEx: Get Started
*, *::before, *::after { outline: none; box-sizing: border-box; margin: 0; padding: 0; } html, body { background: white; font-family: Arial, Verdana, Helvetica, Tahoma, Trebuchet MS, Times New Roman, Georgia, Garamond, Courier New, Brush Script MT, monospace, cursive, serif, sans-serif; font-size: 20px; font-weight: normal; color: black; line-height: 1.2; } body { background: #0c1222; width: 100%; min-height: 100%; padding: 1rem; font-size: 0.8rem; } .container { width: 100%; height: 100%; background: #0c1222; padding: 1rem; } .container h3 { color: #fcfcfc; margin-bottom: 1rem; } .h3-wrap-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; width: 100%; } .h3-wrap { display: flex; flex-flow: column nowrap; align-items: flex-start; justify-content: flex-start; gap: 0.5rem; flex-shrink: 0; flex-grow: 1; background: #18212f; border-radius: 6px; padding: 15px; color: #fcfcfc; } @media screen and (max-width: 1280px) { .h3-wrap-list { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media screen and (max-width: 1024px) { .h3-wrap-list { display: flex; flex-direction: column; gap: 1rem; width: 100%; } } .character-classes, .section { width: 100%; } .container table { display: table; width: 100%; text-indent: 0; border-collapse: collapse; } .container thead, .container tbody { gap: 0.5rem; width: 100%; overflow: hidden; } .container table td:first-child { white-space: nowrap; } .container table td:last-child { text-align: right; } .container table td, .container table th { padding: 9px 14px; text-align: left; } .container tr { display: table-row; width: 100%; gap: 0.5rem; overflow: hidden; border-bottom: solid 1px rgba(85,102,119,0.3); } .container tr:last-child { border-bottom: none; } .container code { background: rgba(0, 0, 0, 0.25); color: rgb(101, 250, 204); padding: 4px 8px; border-radius: 6px; } .container li { list-style-position: inside; } .h-anchor { color: rgb(101, 250, 204); margin-right: 8px; text-decoration: none; }
CSS Before Head
HTML Head
CSS After Head
JS Before HTML Body
<div class="container"> <h3>RegEx Get Started</h3> <div class="h3-wrap-list"> <div class="h3-wrap"> <h3 id="character-classes"><a class="h-anchor" href="#character-classes">#</a>Character Classes</h3> <div class="section"> <table> <thead> <tr> <th>Pattern</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>[abc]</code></td> <td>A single character of: a, b or c</td> </tr> <tr> <td><code>[^abc]</code></td> <td>A character except: a, b or c</td> </tr> <tr> <td><code>[a-z]</code></td> <td>A character in the range: a-z</td> </tr> <tr> <td><code>[^a-z]</code></td> <td>A character not in the range: a-z</td> </tr> <tr> <td><code>[0-9]</code></td> <td>A digit in the range: 0-9</td> </tr> <tr> <td><code>[a-zA-Z]</code></td> <td>A character in the range:<br>a-z or A-Z</td> </tr> <tr> <td><code>[a-zA-Z0-9]</code></td> <td>A character in the range: <br>a-z, A-Z or 0-9</td> </tr> </tbody> </table> </div> </div> <div class="h3-wrap"> <h3 id="quantifiers"><a class="h-anchor" href="#quantifiers">#</a>Quantifiers</h3> <div class="section"> <table> <thead> <tr> <th>Pattern</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>a?</code></td> <td>Zero or one of a</td> </tr> <tr> <td><code>a*</code></td> <td>Zero or more of a</td> </tr> <tr> <td><code>a+</code></td> <td>One or more of a</td> </tr> </tbody> <tbody> <tr> <td><code>[0-9]+</code></td> <td>One or more of 0-9</td> </tr> </tbody> <tbody> <tr> <td><code>a{3}</code></td> <td>Exactly 3 of a</td> </tr> <tr> <td><code>a{3,}</code></td> <td>3 or more of a</td> </tr> <tr> <td><code>a{3,6}</code></td> <td>Between 3 and 6 of a</td> </tr> </tbody> <tbody> <tr> <td><code>a*</code></td> <td>Greedy quantifier</td> </tr> <tr> <td><code>a*?</code></td> <td>Lazy quantifier</td> </tr> <tr> <td><code>a*+</code></td> <td>Possessive quantifier</td> </tr> </tbody> </table> </div> </div> <div class="h3-wrap"> <h3 id="common-metacharacters"><a class="h-anchor" href="#common-metacharacters">#</a>Common Metacharacters</h3> <div class="section"> <ul class="cols-3 marker-none"> <li>^</li> <li>{</li> <li>+</li> <li><</li> <li>[</li> <li>*</li> <li>)</li> <li>></li> <li>.</li> <li>(</li> <li>|</li> <li>$</li> <li>\</li> <li>?</li> </ul> <p>Escape these special characters with <code>\</code></p> </div> </div> <div class="h3-wrap row-span-4"> <h3 id="meta-sequences"><a class="h-anchor" href="#meta-sequences">#</a>Meta Sequences</h3> <div class="section"> <table> <thead> <tr> <th>Pattern</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>.</code></td> <td>Any single character</td> </tr> <tr> <td><code>\s</code></td> <td>Any whitespace character</td> </tr> <tr> <td><code>\S</code></td> <td>Any non-whitespace character</td> </tr> <tr> <td><code>\d</code></td> <td>Any digit, Same as [0-9]</td> </tr> <tr> <td><code>\D</code></td> <td>Any non-digit, Same as [^0-9]</td> </tr> <tr> <td><code>\w</code></td> <td>Any word character</td> </tr> <tr> <td><code>\W</code></td> <td>Any non-word character</td> </tr> <tr> <td><code>\X</code></td> <td>Any Unicode sequences, linebreaks included</td> </tr> <tr> <td><code>\C</code></td> <td>Match one data unit</td> </tr> <tr> <td><code>\R</code></td> <td>Unicode newlines</td> </tr> <tr> <td><code>\v</code></td> <td>Vertical whitespace character</td> </tr> <tr> <td><code>\V</code></td> <td>Negation of \v - anything except newlines and vertical tabs</td> </tr> <tr> <td><code>\h</code></td> <td>Horizontal whitespace character</td> </tr> <tr> <td><code>\H</code></td> <td>Negation of \h</td> </tr> <tr> <td><code>\K</code></td> <td>Reset match</td> </tr> <tr> <td><code>\n</code></td> <td>Match nth subpattern</td> </tr> <tr> <td><code>\pX</code></td> <td>Unicode property X</td> </tr> <tr> <td><code>\p{...}</code></td> <td>Unicode property or script category</td> </tr> <tr> <td><code>\PX</code></td> <td>Negation of \pX</td> </tr> <tr> <td><code>\P{...}</code></td> <td>Negation of \p</td> </tr> <tr> <td><code>\Q...\E</code></td> <td>Quote; treat as literals</td> </tr> <tr> <td><code>\k<name></code></td> <td>Match subpattern <code>name</code></td> </tr> <tr> <td><code>\k'name'</code></td> <td>Match subpattern <code>name</code></td> </tr> <tr> <td><code>\k{name}</code></td> <td>Match subpattern <code>name</code></td> </tr> <tr> <td><code>\gn</code></td> <td>Match nth subpattern</td> </tr> <tr> <td><code>\g{n}</code></td> <td>Match nth subpattern</td> </tr> <tr> <td><code>\g<n></code></td> <td>Recurse nth capture group</td> </tr> <tr> <td><code>\g'n'</code></td> <td>Recurses nth capture group.</td> </tr> <tr> <td><code>\g{-n}</code></td> <td>Match nth relative previous subpattern</td> </tr> <tr> <td><code>\g<+n></code></td> <td>Recurse nth relative upcoming subpattern</td> </tr> <tr> <td><code>\g'+n'</code></td> <td>Match nth relative upcoming subpattern</td> </tr> <tr> <td><code>\g'letter'</code></td> <td>Recurse named capture group <code>letter</code></td> </tr> <tr> <td><code>\g{letter}</code></td> <td>Match previously-named capture group <code>letter</code></td> </tr> <tr> <td><code>\g<letter></code></td> <td>Recurses named capture group <code>letter</code></td> </tr> <tr> <td><code>\xYY</code></td> <td>Hex character YY</td> </tr> <tr> <td><code>\x{YYYY}</code></td> <td>Hex character YYYY</td> </tr> <tr> <td><code>\ddd</code></td> <td>Octal character ddd</td> </tr> <tr> <td><code>\cY</code></td> <td>Control character Y</td> </tr> <tr> <td><code>[\b]</code></td> <td>Backspace character</td> </tr> <tr> <td><code>\</code></td> <td>Makes any character literal</td> </tr> </tbody> </table> </div> </div> <div class="h3-wrap"> <h3 id="anchors"><a class="h-anchor" href="#anchors">#</a>Anchors</h3> <div class="section"> <table> <thead> <tr> <th>Pattern</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>\G</code></td> <td>Start of match</td> </tr> <tr> <td><code>^</code></td> <td>Start of string</td> </tr> <tr> <td><code>$</code></td> <td>End of string</td> </tr> <tr> <td><code>\A</code></td> <td>Start of string</td> </tr> <tr> <td><code>\Z</code></td> <td>End of string</td> </tr> <tr> <td><code>\z</code></td> <td>Absolute end of string</td> </tr> <tr> <td><code>\b</code></td> <td>A word boundary</td> </tr> <tr> <td><code>\B</code></td> <td>Non-word boundary</td> </tr> </tbody> </table> </div> </div> <div class="h3-wrap"> <h3 id="substitution"><a class="h-anchor" href="#substitution">#</a>Substitution</h3> <div class="section"> <table> <thead> <tr> <th>Pattern</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>\0</code></td> <td>Complete match contents</td> </tr> <tr> <td><code>\1</code></td> <td>Contents in capture group 1</td> </tr> <tr> <td><code>$1</code></td> <td>Contents in capture group 1</td> </tr> <tr> <td><code>${foo}</code></td> <td>Contents in capture group <code>foo</code></td> </tr> <tr> <td><code>\x20</code></td> <td>Hexadecimal replacement values</td> </tr> <tr> <td><code>\x{06fa}</code></td> <td>Hexadecimal replacement values</td> </tr> <tr> <td><code>\t</code></td> <td>Tab</td> </tr> <tr> <td><code>\r</code></td> <td>Carriage return</td> </tr> <tr> <td><code>\n</code></td> <td>Newline</td> </tr> <tr> <td><code>\f</code></td> <td>Form-feed</td> </tr> <tr> <td><code>\U</code></td> <td>Uppercase Transformation</td> </tr> <tr> <td><code>\L</code></td> <td>Lowercase Transformation</td> </tr> <tr> <td><code>\E</code></td> <td>Terminate any Transformation</td> </tr> </tbody> </table> </div> </div> <div class="h3-wrap"> <h3 id="group-constructs"><a class="h-anchor" href="#group-constructs">#</a>Group Constructs</h3> <div class="section"> <table> <thead> <tr> <th>Pattern</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>(...)</code></td> <td>Capture everything enclosed</td> </tr> <tr> <td><code>(a|b)</code></td> <td>Match either a or b</td> </tr> <tr> <td><code>(?:...)</code></td> <td>Match everything enclosed</td> </tr> <tr> <td><code>(?>...)</code></td> <td>Atomic group (non-capturing)</td> </tr> <tr> <td><code>(?|...)</code></td> <td>Duplicate subpattern group number</td> </tr> <tr> <td><code>(?#...)</code></td> <td>Comment</td> </tr> </tbody> <tbody> <tr> <td><code>(?'name'...)</code></td> <td>Named Capturing Group</td> </tr> <tr> <td><code>(?<name>...)</code></td> <td>Named Capturing Group</td> </tr> <tr> <td><code>(?P<name>...)</code></td> <td>Named Capturing Group</td> </tr> </tbody> <tbody> <tr> <td><code>(?imsxXU)</code></td> <td>Inline modifiers</td> </tr> <tr> <td><code>(?(DEFINE)...)</code></td> <td>Pre-define patterns before using them</td> </tr> </tbody> </table> </div> </div> <div class="h3-wrap"> <h3 id="assertions"><a class="h-anchor" href="#assertions">#</a>Assertions</h3> <div class="section"> <table> <thead> <tr> <th>-</th> <th>-</th> </tr> </thead> <tbody> <tr> <td><code>(?(1)yes|no)</code></td> <td>Conditional statement</td> </tr> <tr> <td><code>(?(R)yes|no)</code></td> <td>Conditional statement</td> </tr> <tr> <td><code>(?(R#)yes|no)</code></td> <td>Recursive Conditional statement</td> </tr> <tr> <td><code>(?(R&name)yes|no)</code></td> <td>Conditional statement</td> </tr> <tr> <td><code>(?(?=...)yes|no)</code></td> <td>Lookahead conditional</td> </tr> <tr> <td><code>(?(?<=...)yes|no)</code></td> <td>Lookbehind conditional</td> </tr> </tbody> </table> </div> </div> <div class="h3-wrap"> <h3 id="lookarounds"><a class="h-anchor" href="#lookarounds">#</a>Lookarounds</h3> <div class="section"> <table> <thead> <tr> <th>-</th> <th>-</th> </tr> </thead> <tbody> <tr> <td><code>(?=...)</code></td> <td>Positive Lookahead</td> </tr> <tr> <td><code>(?!...)</code></td> <td>Negative Lookahead</td> </tr> <tr> <td><code>(?<=...)</code></td> <td>Positive Lookbehind</td> </tr> <tr> <td><code>(?<!...)</code></td> <td>Negative Lookbehind</td> </tr> </tbody> </table> <p>Lookaround lets you match a group before (lookbehind) or after (lookahead) your main pattern without including it in the result.</p> </div> </div> <div class="h3-wrap"> <h3 id="flags-modifiers"><a class="h-anchor" href="#flags-modifiers">#</a>Flags/Modifiers</h3> <div class="section"> <table> <thead> <tr> <th>Pattern</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>g</code></td> <td>Global</td> </tr> <tr> <td><code>m</code></td> <td>Multiline</td> </tr> <tr> <td><code>i</code></td> <td>Case insensitive</td> </tr> <tr> <td><code>x</code></td> <td>Ignore whitespace</td> </tr> <tr> <td><code>s</code></td> <td>Single line</td> </tr> <tr> <td><code>u</code></td> <td>Unicode</td> </tr> <tr> <td><code>X</code></td> <td>eXtended</td> </tr> <tr> <td><code>U</code></td> <td>Ungreedy</td> </tr> <tr> <td><code>A</code></td> <td>Anchor</td> </tr> <tr> <td><code>J</code></td> <td>Duplicate group names</td> </tr> </tbody> </table> </div> </div> <div class="h3-wrap"> <h3 id="recurse"><a class="h-anchor" href="#recurse">#</a>Recurse</h3> <div class="section"> <table> <thead> <tr> <th>-</th> <th>-</th> </tr> </thead> <tbody> <tr> <td><code>(?R)</code></td> <td>Recurse entire pattern</td> </tr> <tr> <td><code>(?1)</code></td> <td>Recurse first subpattern</td> </tr> <tr> <td><code>(?+1)</code></td> <td>Recurse first relative subpattern</td> </tr> <tr> <td><code>(?&name)</code></td> <td>Recurse subpattern <code>name</code></td> </tr> <tr> <td><code>(?P=name)</code></td> <td>Match subpattern <code>name</code></td> </tr> <tr> <td><code>(?P>name)</code></td> <td>Recurse subpattern <code>name</code></td> </tr> </tbody> </table> </div> </div> <div class="h3-wrap col-span-2"> <h3 id="posix-character-classes"><a class="h-anchor" href="#posix-character-classes">#</a>POSIX Character Classes</h3> <div class="section"> <table class="show-header"> <thead> <tr> <th>Character Class</th> <th>Same as</th> <th>Meaning</th> </tr> </thead> <tbody> <tr> <td><code>[[:alnum:]]</code></td> <td><code>[0-9A-Za-z]</code></td> <td>Letters and digits</td> </tr> <tr> <td><code>[[:alpha:]]</code></td> <td><code>[A-Za-z]</code></td> <td>Letters</td> </tr> <tr> <td><code>[[:ascii:]]</code></td> <td><code>[\x00-\x7F]</code></td> <td>ASCII codes 0-127</td> </tr> <tr> <td><code>[[:blank:]]</code></td> <td><code>[\t ]</code></td> <td>Space or tab only</td> </tr> <tr> <td><code>[[:cntrl:]]</code></td> <td><code>[\x00-\x1F\x7F]</code></td> <td>Control characters</td> </tr> <tr> <td><code>[[:digit:]]</code></td> <td><code>[0-9]</code></td> <td>Decimal digits</td> </tr> <tr> <td><code>[[:graph:]]</code></td> <td><code>[[:alnum:][:punct:]]</code></td> <td>Visible characters (not space)</td> </tr> <tr> <td><code>[[:lower:]]</code></td> <td><code>[a-z]</code></td> <td>Lowercase letters</td> </tr> <tr> <td><code>[[:print:]]</code></td> <td><code>[ -~] == [ [:graph:]]</code></td> <td>Visible characters</td> </tr> <tr> <td><code>[[:punct:]]</code></td> <td><code>[!"#$%&’()*+,-./:;<=>?@[]^_`{|}~]</code></td> <td>Visible punctuation characters</td> </tr> <tr> <td><code>[[:space:]]</code></td> <td><code>[\t\n\v\f\r ]</code></td> <td>Whitespace</td> </tr> <tr> <td><code>[[:upper:]]</code></td> <td><code>[A-Z]</code></td> <td>Uppercase letters</td> </tr> <tr> <td><code>[[:word:]]</code></td> <td><code>[0-9A-Za-z_]</code></td> <td>Word characters</td> </tr> <tr> <td><code>[[:xdigit:]]</code></td> <td><code>[0-9A-Fa-f]</code></td> <td>Hexadecimal digits</td> </tr> <tr> <td><code>[[:<:]]</code></td> <td><code>[\b(?=\w)]</code></td> <td>Start of word</td> </tr> <tr> <td><code>[[:>:]]</code></td> <td><code>[\b(?<=\w)]</code></td> <td>End of word</td> </tr> </tbody> </table> </div> </div> <div class="h3-wrap"> <h3 id="control-verb"><a class="h-anchor" href="#control-verb">#</a>Control verb</h3> <div class="section"> <table> <thead> <tr> <th>-</th> <th>-</th> </tr> </thead> <tbody> <tr> <td><code>(*ACCEPT)</code></td> <td>Control verb</td> </tr> <tr> <td><code>(*FAIL)</code></td> <td>Control verb</td> </tr> <tr> <td><code>(*MARK:NAME)</code></td> <td>Control verb</td> </tr> <tr> <td><code>(*COMMIT)</code></td> <td>Control verb</td> </tr> <tr> <td><code>(*PRUNE)</code></td> <td>Control verb</td> </tr> <tr> <td><code>(*SKIP)</code></td> <td>Control verb</td> </tr> <tr> <td><code>(*THEN)</code></td> <td>Control verb</td> </tr> <tr> <td><code>(*UTF)</code></td> <td>Pattern modifier</td> </tr> <tr> <td><code>(*UTF8)</code></td> <td>Pattern modifier</td> </tr> <tr> <td><code>(*UTF16)</code></td> <td>Pattern modifier</td> </tr> <tr> <td><code>(*UTF32)</code></td> <td>Pattern modifier</td> </tr> <tr> <td><code>(*UCP)</code></td> <td>Pattern modifier</td> </tr> <tr> <td><code>(*CR)</code></td> <td>Line break modifier</td> </tr> <tr> <td><code>(*LF)</code></td> <td>Line break modifier</td> </tr> <tr> <td><code>(*CRLF)</code></td> <td>Line break modifier</td> </tr> <tr> <td><code>(*ANYCRLF)</code></td> <td>Line break modifier</td> </tr> <tr> <td><code>(*ANY)</code></td> <td>Line break modifier</td> </tr> <tr> <td><code>\R</code></td> <td>Line break modifier</td> </tr> <tr> <td><code>(*BSR_ANYCRLF)</code></td> <td>Line break modifier</td> </tr> <tr> <td><code>(*BSR_UNICODE)</code></td> <td>Line break modifier</td> </tr> <tr> <td><code>(*LIMIT_MATCH=x)</code></td> <td>Regex engine modifier</td> </tr> <tr> <td><code>(*LIMIT_RECURSION=d)</code></td> <td>Regex engine modifier</td> </tr> <tr> <td><code>(*NO_AUTO_POSSESS)</code></td> <td>Regex engine modifier</td> </tr> <tr> <td><code>(*NO_START_OPT)</code></td> <td>Regex engine modifier</td> </tr> </tbody> </table> </div> </div> </div> </div>
HTML Body
HTML Foot
JS After HTML Body
Full HTML Code
