RegExp and removeNode

removeNode is available in IE so we are using a prototyped version of it here.

by Vico Bertogli III

HTML

<ul id="regExpContainer">
    <li class="response">test</li>
</ul>

SCSS

#regExpContainer {
    font-family:'helvetica';
    line-height:1.25em;
    font-size:1em;
    
    .response{
        padding:10px 5px;
        border:2px #000 solid;
        margin:5px 0px;
        
         &[passed='true'] {
            background:green;
            color:#fefefe;
        }
        &[passed='false'] {
            background:#f00;
        }
    }
}

JavaScript

//act like we are in IE and create removeNode method
if (window.Node) Node.prototype.removeNode = function (removeChildren) {
    var self = this;
    if (Boolean(removeChildren)) {
        return this.parentNode.removeChild(self);
    } else {
        var range = document.createRange();
        range.selectNodeContents(self);
        return this.parentNode.replaceChild(range.extractContents(), self);
    }
}

// set up document references and template
var container = document.getElementById("regExpContainer");
var template = container.firstElementChild.removeNode(true);

var pattern;

// standard displaying
function addResult(name, original, result) {
    var output = "<b>" + name + "</b> - string: " + original;
    var tempCurrent = template.cloneNode(true);
    tempCurrent.innerHTML = output;
    tempCurrent.setAttribute('passed', result);
    container.appendChild(tempCurrent);
}

pattern = new RegExp('[ab-d]');
addResult(pattern, "aaa", pattern.test("aaa"));
addResult(pattern, "eee", pattern.test("eee"));

pattern = new RegExp('[^ab-d]');
addResult(pattern, "aaa", pattern.test("aaa"));
addResult(pattern, "eee", pattern.test("eee"));

pattern = new RegExp('^[a-d]');
addResult(pattern, "aaa", pattern.test("aaa"));
addResult(pattern, "eee", pattern.test("eee"));

pattern = new RegExp('^[a-z0-9_-]{3,16}$');
addResult(pattern, "aaa", pattern.test("aaa"));
addResult(pattern, "eee", pattern.test("eee"));