A CodePen by Colt Pini. RegExpert - I wanted to build a JS app for regex testing. This works well. It is still in progress. But I am happy. Most other apps that I have seen have been built in other languages and didn't truely reflect the JS regex. This is in JS for JS so you don't have those problems. The output shows the matches, there is highl…

index.html

<ul class="aside">
    <li>        
        <span>flags:</span>
        <div>
            g<input type="checkbox" name="flags" value="g" />
            i<input type="checkbox" name="flags" value="i" />
            m<input type="checkbox" name="flags" value="m" />
            y<input type="checkbox" name="flags" value="y" id="y" />
        </div>
    </li>
    <li>
        <span>Test</span>
        <div id="test"></div>
    </li>
    <li>
        <span>err</span>
        <div id="err"></div>
    </li>
    <li>
        <span>output</span>
        <div id="blah"></div>
    </li>
</ul>
<ul class="main">
    <li>
        <span>Pattern</span>
        <div id="ref">
          <span class="arrow"></span>
            <dl id="refContainer">
                
                <dt>.</dt>
                <dd>Matches any Char (use m flag to match linebreaks)</dd>
                
                <dt>\w\W</dt>
                <dd>Word char &amp; not word char</dd>
                
                <dt>\d\D</dt>
                <dd>Digit &amp; not digit</dd>
                
                <dt>\s\S</dt>
                <dd>Whitespace char &amp; not whitespace char</dd>
                
                <dt>[]</dt>
                <dd>matching set</dd>
                
                <dt>[^]</dt>
                <dd>Not matching set</dd>
                
                <dt>[x-y]</dt>
                <dd>Range can be alpha or numberic</dd>
                
                <dt>\t</dt>
                <dd>tab</dd>
                
                <dt>\r</dt>
                <dd>return</dd>
                
                <dt>\n</dt>
                <dd>newline</dd>
                
                <dt>\xXX</dt>
                <dd>Hex index selector</dd>
                
                <dt>\</dt>
                <dd>escape</dd>
                
                <dt>^</dt>
                <dd>Begins with</dd>
                
                <dt>$</dt>
                <dd>Ends with</dd>
                
                <dt>(?=ABC)</dt>
                <dd>Positive Lookahead</dd>
                
                <dt>(?!ABC)</dt>
                <dd>Nagative Lookahead</dd>
                
                <dt>(?&lt;=ABC)</dt>
                <dd>Positive Lookbehind</dd>
                
                <dt>(?&lt;!ABC)</dt>
                <dd>Negative Lookbehind</dd>
                
                <dt>?</dt>
                <dd>Optional (Lazy)</dd>
                
                <dt>*</dt>
                <dd>0 or more (add ? to make lazy)</dd>
                
                <dt>+</dt>
                <dd>1 or more (add ? to make lazy)</dd>
                
                <dt>{x}</dt>
                <dd>Matches exactly x amount</dd>
                
                <dt>{x,y}</dt>
                <dd>Matches between x and y amounts (add ? to make lazy)</dd>
                
                <dt>()</dt>
                <dd>Capturing Group</dd>
                
                <dt>(?:)</dt>
                <dd>Non-capturing Group</dd>
                
                <dt>|</dt>
                <dd>Or</dd>
                
                <dt>\x</dt>
                <dd>Inserts the x number of capture group for select</dd>
                
                <dt class="divider">Replace Functions:</dt>
                
                <dt>$</dt>
                <dd>Insertion ($$ to escape) for Replace</dd>
                
                <dt>$&amp;</dt>
                <dd>Inserts matched substring</dd>
                
                <dt>$`</dt>
                <dd>Inserts proceeding</dd>
                
                <dt>$'</dt>
                <dd>Inserts following</dd>
                
                <dt>$1</dt>
                <dd>Inserts first capture group</dd>
                
                <dt></dt>
                <dd></dd>
            </dl>
        </div>
        <div id="reg" contentEditable>^\d{3}([-\.]?)\d{3}\1\d{4}$</div>
        <!--<div id="reg" contentEditable>&lt;(\w*?).*?&gt;.*?&lt;/\1&gt;</div> -->
       
    </li>
    <li>
        <span>Text to match against</span>
        <div id="val" contentEditable>888-888-8888</div>
        <!--<div id="val" contentEditable>&lt;div attr="something"&gt; this &lt;span&gt;and&lt;br /&gt; that&lt;/span&gt;&lt;/div&gt;</div>-->
    </li>
</ul>

script.js

//REGEX tester

function huh(e) {
    try {
        addingText();
        var flags = "",
            fi = document.querySelectorAll('[name="flags"]:checked');
        for (var i = 0; i < fi.length; i++) {
            flags += fi[i].value;
        }

        var reg = new RegExp(document.getElementById('reg').innerHTML, flags);

        document.getElementById('test').innerHTML = reg.test(document.getElementById('val').innerHTML);
        document.getElementById('blah').innerHTML = document.getElementById('val').innerHTML.match(reg);
        val.innerHTML = val.innerHTML.replace(reg, '<colt>$&</colt>');

        document.getElementById('err').innerHTML = "";
    }
    catch (err) {
        var message = err.arguments ? err.arguments[1] : err;
       document.getElementById('err').innerHTML = message;
    }
    windowResize();
}

function addingText() {
    var val = document.getElementById('val');
    val.innerHTML = val.innerHTML.replace(/<[\/]?(colt|font).*?>/gi, '');
}

function windowResize() {
    var val = document.getElementById('val'),
        output = document.getElementById('blah'),
        refCont = document.getElementById('refContainer');
    getHeight(val);
    getHeight(output);
    getHeight(refCont);
}

function getHeight(elem) {
    elem.style.height = (document.documentElement.offsetHeight - elem.getBoundingClientRect().top - 5) + "px";
}

function refHandler() {
    var rc = this.querySelector('#refContainer');
    rc.style.display = rc.style.display === 'block' ? "none" : "block";    
    getHeight(rc);
}

document.getElementById('reg').addEventListener('keyup', huh);
document.getElementById('val').addEventListener('focus', addingText);
document.getElementById('val').addEventListener('blur', huh);
window.addEventListener('resize', windowResize, false);
document.getElementById('ref').addEventListener('click', refHandler);

var inpts = document.querySelectorAll('input');
for (var i = 0; i < inpts.length; i++) {
    inpts[i].addEventListener('change', huh);
}

// test to see if the y flag is allowed for the browser.
try {
    new Regex(/n/, 'y');
}
catch (e) {
    document.getElementById('y').disabled = true;
}

huh();
windowResize();

style.css

body, html {
    height: 100%;
    font-size: 14px;
    overflow: hidden;
    margin:0;
    padding:0;
}
li > div{
    min-height: 16px;
    background: #bcd;
    padding: 2px 5px;
    font-family: monospace;
}
ul {
    margin: 0;
    padding:0;
}
li {
    list-style: none;
    margin:0;
    padding:0;
}
[contenteditable]{outline:none;}
span{    
    font-size: 10px;
    color: #888;
}
colt {
    background: rgba(75,145,255, 0.6);
    border-radius: 4px;
    padding: 1px 2px;
    /*display:inline-block;
    white-space: pre-wrap;*/
}
.main {
    margin-right: 206px;
    height: 100%;
    padding-left: 5px;
}
.main li:first-child {
    position: relative;
}
#reg{
    height: 16px;
    overflow: auto;
    margin-right: 19px;
    border-top-left-radius: 4px;
}
#ref {
    height: 20px;
    width: 18px;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
    background: #bdc;
    cursor: pointer;
}
#ref .arrow {
  border: 4px solid transparent;
  border-top: 6px solid #fff;
  display: block;
  height:0;
  width:0;
  position: absolute;
  margin: 7px 0 0 5px;
}
#ref #refContainer {
    display: none;
    width: 200px;
    margin-top: 20px;
    margin-left: -182px;
    background:#bdc;
    overflow: auto;
    box-sizing: border-box;
    padding: 5px;
}

#ref #refContainer dd {
    margin: 0 0 15px 10px;
    font-size: 10px;
    color: #444;
}
#ref #refContainer dt.divider {
    margin: 15px 0;
    text-decoration: underline;
}
.main li {
    max-height: 40%;
}
#val {
    box-sizing: border-box;
    overflow: auto;
    white-space: pre-wrap;
    border-bottom-left-radius: 4px;
}
#blah {    
    overflow: auto;
    box-sizing: border-box;
    border-bottom-right-radius: 4px;
}
#err {
    background: #955;
    color: #fff;
    font-size: 10px;
}
.aside {
    width: 200px;
    position:absolute;
    right:5px;
}
.aside li:first-child div {
    border-top-right-radius: 4px;
}