Skip to content

Instantly share code, notes, and snippets.

/index.html

Created February 24, 2015 21:17
Show Gist options
  • Save anonymous/518fafd64b304e959fe8 to your computer and use it in GitHub Desktop.
Save anonymous/518fafd64b304e959fe8 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/garuleqevu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<input id="duration" type="text" size="52" value="1 year 2 months 3 weeks 4 days 5 hours 6 minutes 7 seconds" />
<div id="output"></div>
<hr/>
<div id="block">
<input type="text" id="years" size="1" value="1" />y
<input type="text" id="months" size="1" value="2" />m
<input type="text" id="weeks" size="1" value="3" />w
<input type="text" id="days" size="1" value="4" />d
<input type="text" id="hours" size="1" value="5" />h
<input type="text" id="minutes" size="1" value="6" />m
<input type="text" id="seconds" size="1" value="7" />s
<div id="output2"></div>
</div>
<script id="jsbin-javascript">
RE = /^\s*(?:(\d+)\s*years?)?\s*(?:(\d+)\s*months?)?\s*(?:(\d+)\s*weeks?)?\s*(?:(\d+)\s*days?)?\s*(?:(\d+)\s*hours?)?\s*(?:(\d+)\s*minutes?)?\s*(?:(\d+)\s*seconds?)?\s*$/;
$('#duration').on('input', function(e) {
var extracted = RE.exec(this.value);
$('#output').text(JSON.stringify(extracted.slice(1)));
});
$('#block').on('input', 'input', function(e) {
var data = [
$('#years').val(),
$('#months').val(),
$('#weeks').val(),
$('#days').val(),
$('#hours').val(),
$('#minutes').val(),
$('#seconds').val(),
];
$('#output2').text(JSON.stringify(data));
});
$('#block input:first, #duration').trigger('input');
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<input id="duration" type="text" size="52" value="1 year 2 months 3 weeks 4 days 5 hours 6 minutes 7 seconds" />
<div id="output"></div>
<hr/>
<div id="block">
<input type="text" id="years" size="1" value="1" />y
<input type="text" id="months" size="1" value="2" />m
<input type="text" id="weeks" size="1" value="3" />w
<input type="text" id="days" size="1" value="4" />d
<input type="text" id="hours" size="1" value="5" />h
<input type="text" id="minutes" size="1" value="6" />m
<input type="text" id="seconds" size="1" value="7" />s
<div id="output2"></div>
</div>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">RE = /^\s*(?:(\d+)\s*years?)?\s*(?:(\d+)\s*months?)?\s*(?:(\d+)\s*weeks?)?\s*(?:(\d+)\s*days?)?\s*(?:(\d+)\s*hours?)?\s*(?:(\d+)\s*minutes?)?\s*(?:(\d+)\s*seconds?)?\s*$/;
$('#duration').on('input', function(e) {
var extracted = RE.exec(this.value);
$('#output').text(JSON.stringify(extracted.slice(1)));
});
$('#block').on('input', 'input', function(e) {
var data = [
$('#years').val(),
$('#months').val(),
$('#weeks').val(),
$('#days').val(),
$('#hours').val(),
$('#minutes').val(),
$('#seconds').val(),
];
$('#output2').text(JSON.stringify(data));
});
$('#block input:first, #duration').trigger('input');</script></body>
</html>
Raw
jsbin.garuleqevu.js
RE = /^\s*(?:(\d+)\s*years?)?\s*(?:(\d+)\s*months?)?\s*(?:(\d+)\s*weeks?)?\s*(?:(\d+)\s*days?)?\s*(?:(\d+)\s*hours?)?\s*(?:(\d+)\s*minutes?)?\s*(?:(\d+)\s*seconds?)?\s*$/;
$('#duration').on('input', function(e) {
var extracted = RE.exec(this.value);
$('#output').text(JSON.stringify(extracted.slice(1)));
});
$('#block').on('input', 'input', function(e) {
var data = [
$('#years').val(),
$('#months').val(),
$('#weeks').val(),
$('#days').val(),
$('#hours').val(),
$('#minutes').val(),
$('#seconds').val(),
];
$('#output2').text(JSON.stringify(data));
});
$('#block input:first, #duration').trigger('input');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment