JSFiddle - React, Tailwind, and code Playground

RegExpert The output shows the matches, there is highlighting in the block text, and a .test() result on the right side. There is also a lookup table if you want it.

by Jennifer Perrin

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...

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

JavaScript

//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++) {
   ...