<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>
来源：https://www.cnblogs.com/yufenghou/p/3433854.html