An idea to create easy regex authoring and debugging.

index.html

<h1>RegEx Tooling</h1>
<p>An idea to create easy regex authoring and debugging.
</p>
<section class="synopsis">
<h2>Synopsis</h2>
<ul>
  <li>Show immidiate response to author</li>
  <li>Show patterns in input text</li>
  <li>Make transformations a one-step process
    <ol>
      <li>Accept many kind of input formats</li>
      <li>Output text</li>
    </ol>
  </li>
</ul>
</section>  
  
<section>
  <h2>Test Data</h2>
  <pre id="test1" contenteditable="true">d
  </pre>
</section>
<section class="results">
  <h2>Output</h2>
  <pre id="result1">d
  </pre>
</section>

script.js

var ns = {}
ns.regex = new function() {
   this.prototype = this;
  this.addEvent =function(element, type){
  			for (var i = 2; i < arguments.length; i++) {
					if (element.addEventListener) {
						element.addEventListener(type, arguments[i], false);
					}
					else { // IE
						element.attachEvent('on' + type, arguments[i]);
					}
				}
}
ns.regex.prototype.patterns = function(input) {
   alert(input)
}
  console.log(document.getElementById('test1'))
   
  
  ns.addEvent( document.getElementById('test1') , "focus", ns.regex.patterns)

style.css

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box }
body { font-size:20px }
h1 { font-size:1.4em; }
h2 { font-size:1.2em; }
p,li { font-size: 1em }
h1,h2,p,li {
  line-height:1em;
  margin:0.6em;
  padding:0;
}
ul { margin:0; }
section {
  vertical-align: top;
  display: inline-block;
  width: 30%;
}
section:first-of-type { margin: 0 1em 0 0; }