A CodePen by Colt Pini. RegExpert - This is a regex tester. Javascript style. This shows the matches in an output window, and a .test() result. Also a small regex lookup. Basically I wanted my own little tool instead of dealing with other peoples. Most of them are written in languages other than JS so the regex isn't quite right.

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">
            <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;
}
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 #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;
}