Regular Expression tester - JavaScript
In a previous post, I posted the code I used for a ColdFusion regular expression tester.
This time I've got an attempt at a JavaScript version. There's a number of TODOs, but ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JavaScript Regular Expression Tester</title>
<style type="text/css">
#form_help {
float:right;
font-size:.8em;
width:50%;
}
#form_results {
margin:1em;
width:45%;
}
.highlight {
background-color:#ff9;
}
#form_highlighttext {
border:1px dashed #ccc;
margin-left:1em;
width:45%;
}
</style>
<script type="text/javascript">
function RemoveHTML(TextContent) {
var str = '';
str = TextContent;
str = str.replace(/</g, "<");
return str;
}
function TestExpression() {
var Expression = '';
var ExpressionParameters = 'gm';
var ExpressionText = '';
try {
document.getElementById('form_error').innerHTML = '';
document.getElementById('form_results').innerHTML = '';
document.getElementById('form_highlighttext').innerHTML = '';
if (document.getElementById('InputExpression').value != '' && document.getElementById('InputText').value != '') {
// TODO better check and error writing - use span with _s
if (document.getElementById('CheckCase').checked) {
ExpressionParameters += 'i';
}
Expression = document.getElementById('InputExpression').value;
ExpressionText = document.getElementById('InputText').value;
var ExpressionObject = new RegExp(Expression, ExpressionParameters);
var ExpressionTest = ExpressionObject.test(ExpressionText);
if (ExpressionTest == true) {
document.getElementById('form_results').innerHTML = '<p>The following results were found for your search:</p>';
// Testing it appears to run it, so ...
ExpressionObject = new RegExp(Expression, ExpressionParameters);
var StringPosition = 0;
var LastPosition = 0;
var CountResults = 0;
var ExpressionResults = ExpressionObject.exec(ExpressionText);
if (ExpressionObject.global) {
while (ExpressionResults != null) {
document.getElementById('form_results').innerHTML += '' + RemoveHTML(ExpressionResults[0]) + ' (' + ExpressionResults.index + ' - ' + ExpressionObject.lastIndex + ')' + '<br />';
if (CountResults == 0) {
StringPosition = 0;
} else {
StringPosition = LastPosition;
}
document.getElementById('form_highlighttext').innerHTML += RemoveHTML(ExpressionText.substring(StringPosition, ExpressionResults.index)) + '<span class="highlight">' + RemoveHTML(ExpressionText.substring(ExpressionResults.index, ExpressionObject.lastIndex)) + '</span>';
LastPosition = ExpressionObject.lastIndex;
ExpressionResults = ExpressionObject.exec(ExpressionText);
CountResults++;
}
if (LastPosition && LastPosition < ExpressionText.length) {
document.getElementById('form_highlighttext').innerHTML += RemoveHTML(ExpressionText.substring(LastPosition, ExpressionText.length));
}
} else {
// TODO
document.getElementById('form_results').innerHTML += '' + ExpressionResults[0] + ' (' + ExpressionResults.index + ')' + '<br />';
document.getElementById('form_results').innerHTML += '<br /><br />';
//document.getElementById('form_highlighttext').innerHTML += ExpressionText.substring(StringPosition, ExpressionResults.index) + '<span class="highlight">' + ExpressionResults + '</span>';
}
} else {
document.getElementById('form_error').innerHTML = 'No match found.';
}
} else {
document.getElementById('form_error').innerHTML = 'You must enter both an expression and text to check that expression against.';
}
return false;
} catch(e) {
alert(e.message);
}
}
</script>
</head>
<body>
<div id="form_help">
<p>Regular expression notation:</p>
<ul>
<li>\b = Word boundary</li>
<li>\B = Word nonboundary</li>
<li>\d = Numeral (0-9)</li>
<li>\D = Nonnumeral</li>
<li>\s = Single whitespace</li>
<li>\S = Single nonwhitespace</li>
<li>\w = Letter, numeral, underscore</li>
<li>\W = Not \w</li>
<li>. = Any character except newline</li>
<li>[] = Any character(s) in brackets</li>
<li>[^] = Not []</li>
<li>* = Preceding zero or more times</li>
<li>? = Preceding zero or one time</li>
<li>+ = Precending one or more times</li>
<li>{<em>n</em>} = The preceding <em>n</em> times</li>
<li>{<em>n</em>,} = <em>n</em> or more times </li>
<li>{<em>n</em>,<em>m</em>}= At least <em>n</em>, at most <em>m</em>, times</li>
<li>^ = Beginning of the string or line </li>
<li>$ = End of the string or line </li>
</ul>
</div>
<form onsubmit="return false;">
<label for="InputExpression">Regular expression:</label><input type="text" id="InputExpression" value="" /><br />
<label for="CheckCase">Ignore case:</label><input type="checkbox" id="CheckCase" /><br />
<textarea cols="50" id="InputText" rows="5">Hello and welcome. I do hope you'll come again. Will you?</textarea><br />
<input type="button" onclick="TestExpression();" value="Test expression" />
</form>
<div id="form_error" style="color:red;"></div>
<div id="form_results"></div>
<div id="form_highlighttext"></div>
</body>
</html>As always, comments appreciated.
Search
Links of Note
Support This Site
If my blog was helpful to you, then please consider visiting my Amazon Wishlist.