Regex Editor UI

Regex Editor UI

by Chance Nursey-Bush

HTML

Add Symbol<input type="text" max=1 min=1 id="inputSymbol" onchange="addSymbol()" />
<br> Length of Pattern <input type="number" onchange="createPattern()" id="inputNumPattern" />
<br> Symbols
<p id="symbolsArea"></p>
<br>
<div id="patternArea" class="row">

</div>
<br> Test Pattern
<input id="testPattern" oninput="onPatternEnter(this)" />

JavaScript

var symbolsObj = {};

function addSymbol() {
  var symbols = document.getElementById('inputSymbol').value.split(',');

  for (var i = 0; i < symbols.length; ++i) {
    if (symbols[i].length == 1) {
      symbolsObj[symbols[i]] = "";
    }
  }
  createPattern();
  document.getElementById('symbolsArea').innerHTML = Object.keys(symbolsObj).join(',');
}

function createPattern() {
  var input = document.getElementById('inputNumPattern');
  if (input.value.length == 0 && input.value == 0) {
    return;
  }

  var symbols = Object.keys(symbolsObj);

  var patternLength = input.value;
  var patternArea = document.getElementById('patternArea');
  var html = [];
  for (var i = 0; i < patternLength; ++i) {
    html[html.length] = "<div class='col' style='display:inline;'>"
    html[html.length] = "<select class='patternSelect'>";
    html[html.length] = "<option value='[a-zA-Z]'>";
    html[html.length] = "Alpha";
    html[html.length] = "</option>";
    html[html.length] = "<option value='[0-9]'>";
    html[html.length] = "Num";
    html[html.length] = "</option>";
    for (var j = 0; j < symbols.length; ++j) {
      html[html.length] = "<option value='[" + symbols[j] + "]'>";
      html[html.length] = symbols[j];
      html[html.length] = "</option>";
    }

    html[html.length] = "</select>";
    html[html.length] = "</div>";
  }
  patternArea.innerHTML = html.join("");
}

function getPattern() {
  var patternArea = document.getElementById('patternArea');
  var patternSelects = patternArea.getElementsByClassName('patternSelect');
  var pattern = [];
  for (var i = 0; i < patternSelects.length; ++i) {
    pattern.push(patternSelects[i].value);
  }
  return pattern;
}

function isPatternMatch(inputString, patternString) {
  var regex = new RegExp(patternString);
  return regex.test(inputString);
}

function onPatternEnter(input) {
  var test = input.value;
  if (test.length == 0) {
    input.style.backgroundColor = "";
    input.style.color = "black";
    return;
  }
 ...