oki ... her er så et eksempel, der highlight'er indenfor et element, der hedder 'content':
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TITLE</title>
<style type="text/css">
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.yellow {
background-color: #ffff00;
}
</style>
<script type="text/JavaScript">
function highLight() {
var rng, rng2, cont, wrd = document.getElementById("inp").value;
cont = document.getElementById("content");
rng = rng2 = document.body.createTextRange();
rng.moveToElementText(cont);
while (rng.findText(wrd)) {
if (rng.offsetTop>cont.offsetTop+cont.offsetHeight) break;
rng.pasteHTML("<span class=\"yellow\">"+rng.text+"</span>");
rng.collapse(false);
rng2 = rng.duplicate();
rng.moveToElementText(cont);
rng.setEndPoint("StartToEnd", rng2);
}
}
</script>
</head>
<body>
<input id="inp" type="text" value="ipsum">
<button onclick="highLight()">TEST</button>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ullamcorper. Aliquam neque. Sed tincidunt, sapien et fermentum accumsan, augue wisi ullamcorper erat, vel varius elit orci quis turpis. Pellentesque condimentum blandit quam. Duis neque elit, elementum ut, ornare sit amet, rhoncus sit amet, velit. Integer velit wisi, lobortis et, pretium at, volutpat eget, sapien. Praesent egestas aliquet nisl. Vestibulum viverra. Sed massa eros, lacinia suscipit, tristique id, molestie imperdiet, metus. Mauris at justo. Sed vitae libero. Mauris convallis semper nunc. Phasellus ullamcorper consectetuer nisl. Praesent leo est, elementum a, elementum non, pharetra et, elit. Nam elementum, velit non fringilla tempus, erat elit ullamcorper libero, hendrerit ultrices nunc eros et nibh.
</p>
<p>
Maecenas pellentesque lectus nec lectus. Donec vel magna nec ipsum sollicitudin facilisis. Vestibulum malesuada convallis orci. Mauris magna. Donec ultricies. Integer turpis mi, venenatis a, egestas a, dignissim venenatis, metus. Morbi nisl nunc, lobortis lacinia, faucibus a, congue id, leo. Morbi quis leo in sem ultricies aliquet. Etiam urna nulla, iaculis ornare, vehicula at, venenatis sit amet, tortor. Sed facilisis mollis felis. Ut libero purus, auctor sed, malesuada eu, nonummy eu, quam. Etiam a justo. Maecenas posuere laoreet pede. Sed vitae arcu. Aenean auctor fermentum augue. Suspendisse quam magna, euismod eget, lacinia id, placerat at, lorem. Phasellus dictum tristique ligula. Aenean congue lorem ac sem. Etiam iaculis nunc varius felis bibendum venenatis.
</p>
<p>
Integer eleifend mauris ut orci. Maecenas condimentum purus sed magna. Etiam adipiscing, neque in scelerisque fermentum, lacus dolor tempus quam, vel vehicula augue eros ut dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam eleifend facilisis odio. Etiam lectus purus, porttitor eget, interdum ut, laoreet vitae, felis. Phasellus malesuada gravida risus. Integer nulla. Cras nec arcu vitae sem suscipit iaculis. Etiam euismod turpis et enim. Vestibulum volutpat, turpis at dignissim facilisis, pede risus scelerisque lorem, vitae euismod lacus nisl ac dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
<p>
Donec eleifend. Proin vel diam eget velit tempus interdum. Curabitur ante libero, condimentum sit amet, imperdiet quis, pulvinar adipiscing, dui. In molestie. Cras ut diam in sem pretium varius. Suspendisse eu pede. Duis libero wisi, mattis non, iaculis a, tincidunt eget, erat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. In hac habitasse platea dictumst.
</p>
<p>
Vestibulum laoreet, augue ut egestas malesuada, ligula velit fringilla odio, egestas lacinia purus eros sed risus. Fusce erat eros, eleifend ut, dictum pharetra, sodales id, ipsum. Quisque vitae urna tincidunt magna varius tristique. Duis porta, pede a faucibus mattis, quam est rhoncus turpis, sit amet cursus magna ipsum et mauris. Mauris at velit. Morbi elit. Duis molestie ligula placerat odio. Nunc nonummy quam eget neque. Quisque neque leo, fringilla ac, vestibulum a, consectetuer at, orci. Curabitur eget velit. Nullam iaculis vehicula sapien. Proin lectus. Sed ac mauris. Phasellus vitae lorem a mi lacinia hendrerit. Phasellus congue leo vel eros. Cras lacus massa, consectetuer tincidunt, sodales a, vestibulum et, orci. Aliquam tortor. Vestibulum odio libero, porttitor eget, tincidunt sit amet, rutrum vel, tellus. Mauris consequat dolor in nunc.
</p>
</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque ullamcorper. Aliquam neque. Sed tincidunt, sapien et fermentum accumsan, augue wisi ullamcorper erat, vel varius elit orci quis turpis. Pellentesque condimentum blandit quam. Duis neque elit, elementum ut, ornare sit amet, rhoncus sit amet, velit. Integer velit wisi, lobortis et, pretium at, volutpat eget, sapien. Praesent egestas aliquet nisl. Vestibulum viverra. Sed massa eros, lacinia suscipit, tristique id, molestie imperdiet, metus. Mauris at justo. Sed vitae libero. Mauris convallis semper nunc. Phasellus ullamcorper consectetuer nisl. Praesent leo est, elementum a, elementum non, pharetra et, elit. Nam elementum, velit non fringilla tempus, erat elit ullamcorper libero, hendrerit ultrices nunc eros et nibh.
</p>
</body>
</html>
