Kanske kan en enkel search & replace fungera för dig? Inga avancerade saker alls, och fungerar bra på en mindre textmängd.
JavaScript:
var searchInContainer = function(container, query) {
var hitPosition = container.innerHTML.indexOf(query);
if (hitPosition >= 0) {
container.innerHTML = eval('container.innerHTML.replace(/(' + query + ')/gim, "<span class=hit>' + query + '</span>");');
}
}
window.onload = function() {
document.getElementById('search').onkeyup = function(e) {
var container = document.getElementById('container');
container.innerHTML = container.innerHTML.replace(/<span class=hit>(.*?)<\/span>/g, '$2');
if (this.value.length >= 3)
searchInContainer(document.getElementById('container'), this.value);
}
}
Test-fil:
<html>
<head>
<script>
var searchInContainer = function(container, query) {
var hitPosition = container.innerHTML.indexOf(query);
if (hitPosition >= 0) {
container.innerHTML = eval('container.innerHTML.replace(/(' + query + ')/gim, "<span class=hit>' + query + '</span>");');
}
}
window.onload = function() {
document.getElementById('search').onkeyup = function(e) {
var container = document.getElementById('container');
container.innerHTML = container.innerHTML.replace(/<span(.*?)>(.*?)<\/span>/g, '$2');
if (this.value.length >= 3)
searchInContainer(document.getElementById('container'), this.value);
}
}
</script>
<style>
span.hit {
color: #ff00ff;
background-color: #000;
}
</style>
</head>
<body>
<input type="text" id="search" />
<div id="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur accumsan nisi ac lorem scelerisque tristique ac sit amet dolor. Proin dapibus accumsan scelerisque. Aenean pretium facilisis odio non vulputate. Aenean sollicitudin ullamcorper justo sit amet venenatis. Suspendisse sodales ligula vel enim eleifend et vulputate mi sagittis. Aliquam velit ligula, volutpat in rutrum vel, faucibus posuere est. Mauris at tristique mauris. Donec convallis est porttitor nisl rhoncus vehicula. Sed lectus magna, laoreet ut semper aliquet, vulputate id neque. Maecenas molestie magna sit amet sapien posuere mattis. Nam vulputate, est vitae viverra gravida, purus lacus lacinia sem, vitae varius urna purus at nulla. Nulla tellus quam, convallis sit amet fringilla vel, semper vel erat. Pellentesque a augue tortor.</p>
<p>Donec ac tempor diam. Suspendisse porta posuere elementum. Suspendisse porta dictum congue. Integer in lectus purus, a porta leo. Ut sit amet lacus justo, ac pharetra metus. Proin lobortis imperdiet purus, vitae dignissim massa commodo eu. Integer porttitor eros id ipsum lobortis porttitor. Curabitur porttitor lobortis cursus. Fusce nec orci nec nisl tincidunt auctor vel eget nunc. Sed adipiscing orci sed urna lacinia gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat. Nullam at rutrum odio.</p>
<p>Aenean nunc sapien, volutpat ut euismod in, porttitor eget libero. Donec tempus scelerisque posuere. Fusce venenatis felis a dolor gravida mollis eu id felis. Pellentesque ut viverra purus. Sed lectus dui, posuere in varius sed, mollis euismod justo. Proin hendrerit magna vel mauris dictum quis ullamcorper purus rutrum. Cras lacus dui, laoreet a consequat molestie, fringilla eget ipsum. Sed fringilla nulla nec neque feugiat ac aliquam nulla accumsan. Nunc nisl elit, molestie a euismod quis, hendrerit sed nisl. Nulla in velit sit amet magna imperdiet eleifend et eu mi. Fusce ut neque at elit fringilla bibendum. Ut laoreet massa vel purus rutrum eu mattis justo rhoncus. Suspendisse condimentum, justo id volutpat pharetra, nulla nisl vehicula arcu, ac bibendum mi arcu eget risus. Sed porttitor convallis mi, sit amet luctus massa ultrices quis.</p>
<p>Donec in tempor neque. Aliquam ultrices dignissim urna ac feugiat. Nam posuere arcu ut nisi dictum sed convallis neque pulvinar. Ut nibh risus, tempus eu ornare eget, laoreet eu velit. Donec at eros augue, at accumsan orci. Maecenas mollis nulla ut felis luctus elementum. Suspendisse eu erat ac purus aliquet rhoncus. Fusce mauris velit, sodales vel fringilla sed, lacinia consectetur erat. Nunc magna justo, tristique sed placerat non, tincidunt eu enim. Nullam risus purus, fringilla non ultrices in, ultrices sit amet orci.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec pharetra volutpat libero sed aliquet. Quisque suscipit tristique urna, et vehicula nibh volutpat eu. Mauris scelerisque porttitor tincidunt. Phasellus libero mauris, auctor in vehicula at, tincidunt lacinia nisl. Nulla et dignissim metus. Maecenas in tincidunt velit. Suspendisse ornare interdum purus vel bibendum. Phasellus tortor libero, tempor non facilisis id, lacinia at odio. Aenean dapibus interdum pretium.</p>
</div>
</body>
</html>
