Regular Expressions 101

Save & Share

Flavor

  • PCRE2 (PHP >=7.3)
  • PCRE (PHP <7.3)
  • ECMAScript (JavaScript)
  • Python
  • Golang
  • Java 8
  • .NET 7.0 (C#)
  • Rust
  • Regex Flavor Guide

Function

  • Match
  • Substitution
  • List
  • Unit Tests

Tools

Sponsors
There are currently no sponsors. Become a sponsor today!
An explanation of your regex will be automatically generated as you type.
Detailed match information will be displayed here automatically.
  • All Tokens
  • Common Tokens
  • General Tokens
  • Anchors
  • Meta Sequences
  • Quantifiers
  • Group Constructs
  • Character Classes
  • Flags/Modifiers
  • Substitution
  • A single character of: a, b or c
    [abc]
  • A character except: a, b or c
    [^abc]
  • A character in the range: a-z
    [a-z]
  • A character not in the range: a-z
    [^a-z]
  • A character in the range: a-z or A-Z
    [a-zA-Z]
  • Any single character
    .
  • Alternate - match either a or b
    a|b
  • Any whitespace character
    \s
  • Any non-whitespace character
    \S
  • Any digit
    \d
  • Any non-digit
    \D
  • Any word character
    \w
  • Any non-word character
    \W
  • Non-capturing group
    (?:...)
  • Capturing group
    (...)
  • Zero or one of a
    a?
  • Zero or more of a
    a*
  • One or more of a
    a+
  • Exactly 3 of a
    a{3}
  • 3 or more of a
    a{3,}
  • Between 3 and 6 of a
    a{3,6}
  • Start of string
    ^
  • End of string
    $
  • A word boundary
    \b
  • Non-word boundary
    \B

Regular Expression
No Match

/
/
gm

Test String

Code Generator

Generated Code

const regex = /((((\b(#|\w)+\b\.)?(\bprototype\b\.)?(\b(#|\w)+\b)(\s*\=\s*)?)?(\b(#|\w)+\b\s*)\([\s\w,=]*\s*\))|(\bclass\b\s+\b\w+\b\s*(extends\s*\b\w+\b))(?=\s*\{[\s\S]+\}))(?=\s*\{[\s\S]+\})/gm; // Alternative syntax using RegExp constructor // const regex = new RegExp('((((\\b(#|\\w)+\\b\\.)?(\\bprototype\\b\\.)?(\\b(#|\\w)+\\b)(\\s*\\=\\s*)?)?(\\b(#|\\w)+\\b\\s*)\\([\\s\\w,=]*\\s*\\))|(\\bclass\\b\\s+\\b\\w+\\b\\s*(extends\\s*\\b\\w+\\b))(?=\\s*\\{[\\s\\S]+\\}))(?=\\s*\\{[\\s\\S]+\\})', 'gm') const str = `/** * Created by jetbrains web development IDE ( Web/PhpStorm ). * Project: web-component - spineNav * User: Pascal Gaudin * Mail: pascal.gaudin@zimmerbiomet.com * Date: 14/01/2023 * Time: 14:00 */ /** * * @type {Window.HTMLElementExtd} */ window.HTMLElementExtd = class HTMLElementExtd extends HTMLElement { shadowRoot; style; elementCustomName; /** * * @param props */ constructor(props) { super(props); this.shadowRoot = this.attachShadow({mode: 'open'}); this.host=this.shadowRoot.host; this.style= document.createElement('style'); this.elementCustomName = this.host.tagName.toLowerCase() let css = Tools.fetchSync(\`web-component/\${this.elementCustomName}/default.css\`); const iJson=new Css(css) const jsonCss= iJson.toJson(); console.log('logg : ', jsonCss); css += Tools.fetchSync(\`web-component/\${this.elementCustomName}/custom-element.css\`); this.style.textContent = css; this.shadowRoot.appendChild(this.style); } /** * * @param objVar */ setVarInCtx(objVar){ for(name in objVar ) this[name] = objVar[name]; } /** * * @param className * @returns {string} */ getStyle(className) { var cssText = ""; var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules; for (var x = 0; x < classes.length; x++) { if (classes[x].selectorText == className) { cssText += classes[x].cssText || classes[x].style.cssText; } } return cssText; } /** * * @returns {boolean} */ get firstTime(){ return this.host.ownerDocument.getElementsByTagName(this.elementCustomName).length===1; } /** * * @returns {*[]} */ static get observedAttributes() { return []; } /** * document.adoptNode(el) */ adoptedCallback() { console.log(\`Custom-Element \${this.host.nodeName.toLowerCase()} adopt Node !\`); } /** * each el.setAttribute * * @param attrName * @param oldVal * @param newVal */ attributeChangedCallback(attrName, oldVal, newVal){ console.log(\`Custom-Element \${this.host.nodeName.toLowerCase()} attribute '\${attrName}' Changed with value '\${newVal}' !\`); } /** * el.remove() * */ disconnectedCallback(){ console.log(\`Custom-Element \${this.host.nodeName.toLowerCase()} Element remove !\` ); } /** * */ connectedCallback(){ console.log(\`Custom-Element \${this.host.nodeName.toLowerCase()} was inserted in DOM!\`); } } /** * Created by jetbrains WebStorm . * Project: web-component - MyProject * User: Pascal Gaudin * Mail: * Date: 23/01/2023 * Time: 10:58 */ /** * * @param attributes */ HTMLElement.prototype.setAttributes=function (attributes) { for (const name in attributes) { if(name=='textContent') this.textContent= attributes[name]; if(attributes[name]&&attributes[name]!=='')this.setAttribute(name,attributes[name]); if( attributes[name]==='')this.setAttribute(name,''); } } /** * * @returns {*[]} */ document.createElements =function (){ const args= []; [...arguments].forEach((arg)=>{ args.push(document.createElement(arg)); }) return args; } /** * */ document.toggleFullScreen=function() { if (!document.fullscreenElement) { document.documentElement.requestFullscreen(); } else { if (document.exitFullscreen) { document.exitFullscreen(); } } } /** * * @returns {*[]} */ HTMLElement.prototype.appendChilds =function ( ) { const args= []; [...arguments].forEach((arg)=>{ args.push(this.appendChild(arg)); }) return args; } /** * * @type {function(): *[]} */ ShadowRoot.prototype.appendChilds= HTMLElement.prototype.appendChilds ; /** * * @returns {*[]} */ HTMLElement.prototype.removeChilds=function( ){ const args= []; [...arguments].forEach((arg)=>{ args.push(this.removeChild(arg)); }) return args; } /** * * @param txt */ HTMLInputElement.prototype.setFocusBack =function( txt){ } /** * * @param kill */ HTMLElement.prototype.disconnect=function(kill){ const numObserved = this.dataset.observed; const infoElmt=\`of the element '\${this.tagName.toLowerCase()}' (with name:'\${this.getAttribute('name')??''}')\` if(this.dataset.hasObserverConnected && this.observer[numObserved] ) { this.observer[numObserved].disconnect(); console.log( \`The observer \${infoElmt} n° \${ numObserved } has been disconnected.\`); if(kill) { delete this.observer[numObserved] ; console.log( \`The observer \${infoElmt} n° \${ numObserved } has been destroy.\`); } delete this.dataset.hasObserverConnected; } else { console.log( \`The observer \${infoElmt} is not connected.\`) }; } /** * * @param type * @param oldValue * @param subtree * @param log */ HTMLElement.prototype.observe =function( type,oldValue=true, subtree=true,log=true){ let numObserved=this.dataset.observed; const infoElmt=\`of the element '\${this.tagName.toLowerCase()}' (with name:'\${this.getAttribute('name')??''}')\` if(arguments && !numObserved) { this.config = {...type, subtree};//attributeFilter const callback = {}, propertieAllowed = {}; ['childList', 'attributes', 'characterData'].forEach(_type => { this.config[_type] = type.hasOwnProperty(_type); callback[_type] = type[_type] ?? undefined; }) if (this.config.attributes) this.config.attributeOldValue = oldValue; if (this.config.characterData) this.config.characterDataOldValue = oldValue; propertieAllowed.attributes = ((mut) => { //attributes target newValue attributeName oldValue return { target : mut.target, newValue: mut.target.getAttribute(mut.attributeName), attributeName: mut.attributeName, oldValue: mut.oldValue } }); propertieAllowed.childList = ((mut) => {//childList : target addedNodes removedNodes return {target: mut.target, addedNodes: [...mut.addedNodes], removedNodes: [...mut.removedNodes]} }); propertieAllowed.characterData = ((mut) => { //characterData oldText newText target return {oldText: mut.oldValue, newText: mut.target.data, target: mut.target} }); const cbk = (mutationsList) => { for (var mutation of mutationsList) { if (callback[mutation.type]) callback[mutation.type].call(this, propertieAllowed[mutation.type](mutation)); } } numObserved= 'obs-'+new Date().getTime(); this.dataset.observed=numObserved; this.observer={[numObserved] : new MutationObserver(cbk)}; if(log)console.log( \`The observer \${infoElmt} n° \${ numObserved } is now created.\`) } this.observer[numObserved].observe(this, this.config); this.dataset.hasObserverConnected= true; if(log)console.log( \`The observer \${infoElmt} n° \${ numObserved } is connected.\\n\\n\`) } /** * * @param regexs * @param strs * @param callbacs */ String.prototype.replaceWithArray=function ( regexs, strs,callbacs) { let str=this; regexs.forEach((regex,idx)=>{ str = String.prototype.replace.call(str,regex,strs.at(idx),callbacs?.at(idx)); }); return str; } `; // Reset `lastIndex` if this regex is defined globally // regex.lastIndex = 0; let m; while ((m = regex.exec(str)) !== null) { // This is necessary to avoid infinite loops with zero-width matches if (m.index === regex.lastIndex) { regex.lastIndex++; } // The result can be accessed through the `m`-variable. m.forEach((match, groupIndex) => { console.log(`Found match, group ${groupIndex}: ${match}`); }); }

Please keep in mind that these code samples are automatically generated and are not guaranteed to work. If you find any syntax errors, feel free to submit a bug report. For a full regex reference for JavaScript, please visit: https://developer.mozilla.org/en/docs/Web/JavaScript/Guide/Regular_Expressions