None
Blog / 2010 / March / 12

JavaScript Regular Expression Testing

March 12, 2010

Here's the source for a simple web page, using jQuery, which allows to user to do some simple experimentation with regular expressions in JavaScript.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>RegEx Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style>
li { list-style-type: none; }
</style>
</head>
<body>
<h2>RegEx Test</h2>
<ul>
  <li>
    <table>
      <tr>
        <td>Regular Expression:</td>
        <td><input type="text" id="regex" size="80"/></td>
      </tr>
      <tr>
        <td>Options:</td>
        <td><input type="text" id="options" size="10" value="gm"/></td>
      </tr>
    </table>
  </li>
  <li>Text to search:</li>
  <li><textarea rows="6" cols="80" id="sourcetext"></textarea></li>
  <li><input type="submit" id="testbutton" value="Run Expression"></li>
</ul>
<h2>Results</h2>
<pre>
<div id="resultstext"></div>

</pre>
<script type="text/javascript">
  $('#testbutton').click(function(){
    var lRegExText = '(' + $('#regex').val() + ')';
    var lRegExOptions = $('#options').val();
    var lText = $('#sourcetext').val();
    var lRegEx = new RegExp(lRegExText, lRegExOptions);
    var lResults = lText.replace(lRegEx, "<font color='red'><b>$1</b></font>");
    $('#resultstext').html(lResults);
  });
</script>
</body>
</html>

Tags: regular expressions regex javascript