Skip to content

Instantly share code, notes, and snippets.

@bunnymatic

bunnymatic/.htaccess

Created February 5, 2012 08:40
Show Gist options
  • Save bunnymatic/1744140 to your computer and use it in GitHub Desktop.
Save bunnymatic/1744140 to your computer and use it in GitHub Desktop.
Download ZIP
javascript regex tester
Raw
.htaccess
Options -Indexes
Raw
css.css
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body {
font-family: "helvetica neue", helvetica, arial, sans-serif;
color: #ccccdd;
background: #20252b; /* Old browsers */
}
ul, li {
margin:0;
padding:0;
}
li {
line-height: 1.4em;
}
.gradient {
background: #30355b; /* Old browsers */
background: -moz-linear-gradient(top, #30353b 0%, #30355b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#30353b), color-stop(100%,#30355b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #30353b 0%,#30355b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #30353b 0%,#30355b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #30353b 0%,#30355b 100%); /* IE10+ */
background: linear-gradient(top, #30353b 0%,#30355b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#30353b', endColorstr='#30355b',GradientType=0 ); /* IE6-9 */
}
#main {
padding: 20px 40px 40px;
width: 750px;
height: 100%;
border: 1px solid #101010;
margin: 20px auto 60px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-box-shadow: 0 10px 20px rgba(0,0,0,.25);
-moz-box-shadow: 0 10px 20px rgba(0,0,0,.25);
box-shadow: 0 10px 20px rgba(0,0,0,.25);
}
#main a {
color: #eeccdd;
text-decoration: none;
}
#main h1 {
margin: auto;
text-align: center;
}
#main h3 {
text-align: right;
}
#main h4 {
margin-bottom: 10px;
}
#main .entry {
margin-bottom: 10px;
}
#main label {
display:block;
font-weight: bold;
padding-bottom: 2px;
}
#main .results ul {
list-style: none;
}
#main .results li {
}
#main .results label {
margin-bottom: 10px;
}
#main input, #main textarea {
border: 1px solid #171a24;
padding:10px;
font-size:18px;
color: #1b1824;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#main input[name=regex] {
width: 540px;
}
#main input[name=modifier] {
width: 105px;
}
#main textarea {
width: 650px;
height: 80px;
}
#main .instructions li {
}
#main .meat{
padding-top: 10px;
}
#main .meat .section {
float: left;
}
#main .error {
color: #f88;
}
#main .section.results {
clear:right;
}
#main .afterword {
padding-top: 10px;
clear: left;
}
#main .afterword ul {
list-style: none;
}
Raw
js_regex.html
<!DOCTYPE html>
<html>
<head>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css.css" type="text/css" rel="stylesheet"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta content="Test your Javascript Regular Expressions here with ease." name="description">
<meta content="javascript, regex, regular expressions, 2rye, rubular, coding, playground, regexp" name="keywords">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-25168776-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<title>Javascript Regex Playground - 2rye.com</title>
<script src='./js_regex.js'></script>
</head>
<body>
<div id="main" class="gradient">
<header>
<h1>Javascript Regex Playground</h1>
<h3>by <a href="http://www.2rye.com">2rye</a></h3>
</header>
<section class="instructions">
<h4>how to play</h4>
<ol>
<li>
Type some javascript regular expression in the <i>regex</i> input box. You don't need to add leading and trailing slashes. That's done on the automatic.
</li>
<li>
Add modifiers if you like. <em>i</em> for case-insensitive, <em>m</em> to match across newlines, <em>g</em> for "global" matching. Check out <a target="_blank" href="http://www.regular-expressions.info/javascript.html">this page</a> for details on modifiers.
<li>
Type a sample string to match against in the other box.
</li>
<li>
Check out the resulting matches.
</li>
<li>
Repeat steps 1-3 until you've figured out the right regular expression.
</li>
</ol>
</section>
<section class="meat">
<div class="inputs section">
<form>
<div class="entry">
<label for="input_regex" >regex + modifier:</label>
<input id="input_regex" name='regex' value='^(\d{1}\w+)(.*)\s+(\w+[-](\w+))'>
<input id="input_modifier" name="modifier" value="mg">
</div>
<div class="entry">
<label for="input_input" >string to match:</label>
<textarea id="input_input" name='input'>2rye has javascript-fu
2rye has other-fu too</textarea>
</div>
</form>
</div>
<div class="results section">
<div class='results'>
<label>results:</label>
<div id='results'></div>
</div>
</div>
</section>
<section class="afterword">
<h4>links</h4>
<ul>
<li>
<a href="https://gist.github.com/1744140">This tool on gist.github.com</a>
</li>
<li>
<a href="http://www.w3schools.com/jsref/jsref_obj_regexp.asp">Javascript Regex at w3schools</a>
</li>
<li>
<a href="http://distillations.2rye.com">distillations, the 2rye blog</a>
</li>
<li>
Inspired by: <a href="http://rubular.com/">Rubular, a Ruby regular expression editor</a>
<li>
</ul>
</section>
</div>
</body>
</html>
Raw
js_regex.js
$(function() {
var processRegex = function() {
var regex = $('#input_regex').val();
if (!regex) return;
var str = $('#input_input').val();
if (!str) return;
var modifier = $('#input_modifier').val();
regex = regex.replace(/^\//, '').replace(/\/$/, '');
try {
var regexp = new RegExp(regex, modifier);
var m = str.match(regexp);
var ms = [];
$('#results').html('');
if (m) {
var ul = $('<ul>');
var ii = 0;
var n = m.length;
for (; ii < n; ++ii) {
ul.append($('<li>').html('['+ii+'] => [' + m[ii] + ']'));
};
$('#results').removeClass('error').append(ul);
}
else {
$('#results').removeClass('error').html('no match');
}
}
catch(e) {
console.log(e);
$('#results').addClass('error').html(e.toString());
}
};
$("input[name=regex], input[name=modifier], textarea[name=input]")
.bind('keyup',function() {
processRegex();
return true;
})
.bind('focus',function() {
processRegex();
return true;
}).bind('blur',function() {
processRegex();
return true;
});
processRegex();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment