<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Visualizing String Matching Algorithms</title> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <script src="javascript/strmatch.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-45824317-1', 'whocouldthat.be'); ga('send', 'pageview'); </script> <style> .monospace { font-family: courier new; font-size: 30px; padding-bottom:20px; min-width: 30px; } .cell { text-align: center; } .options { padding-top: 20px; } #needle { position:absolute; } #haystack { } .table-cell { text-align: center; width: 40px; } .char-table { table-layout: fixed; } #links { position:absolute; bottom:0; } </style> </head> <body> <a href="https://github.com/justinj/string-matching-visualization"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> <div id="main" class="container"> <form class="form-inline"> <div class="options"> <div class="algorithms form-group"> <div class="radio"> <label> <input type="radio" name="algorithm" class="algbutton input" value="naive" checked="true"></radio> Naïve </label> </div> <div class="radio"> <label> <input type="radio" name="algorithm" class="algbutton" value="kmp"></radio> KMP </label> </div> <div class="radio"> <label> <input type="radio" name="algorithm" class="algbutton" value="boyer_moore"></radio> Boyer-Moore </label> </div> <br><label>Algorithm</label> </div> <div class="form-group"> <label> <input type="text" value="ABCDABD" maxlength="10" id="needle-input" class="form-control"></input> Needle </label> </div> <div class="form-group"> <label> <input type="text" value="ABC ABCDAB ABCDABCDABDE" maxlength="30" id="haystack-input" class="form-control"></input> Haystack </label> </div> <br> <input type="button" value="Animate" class="btn btn-default" id="animate"></input> <input type="button" value="Step" class="btn btn-default" id="step"></input> <input type="button" value="Reset" class="btn btn-default" id="reset"></input> </div> </form> <div class="result"> <div id="haystack" class="monospace"></div></br> <div id="needle" class="monospace"></div> </div> <br><br><br><br> <div class="row"> <div id="tables" class="col-sm-4"></div> <div id="explanation" class="col-sm-4"></div> </div> <div class="row"> <div id="links"> <a href="http://en.wikipedia.org/wiki/String_matching">Wikipedia Article on String Matching</a><br> <a href="http://en.wikipedia.org/wiki/Knuth%E2%80%93Morris%E2%80%93Pratt_algorithm">KMP Algorithm</a><br> <a href="http://en.wikipedia.org/wiki/Boyer%E2%80%93Moore_string_search_algorithm">Boyer-Moore Algorithm</a><br> </div> </div> </div> </div> </body> </html>