Du kan se scriptet køre her:
http://www.devd.dk/940178.htmlJavascript delen, placeres i <head> tagget:
<script type="text/javascript">
function highlightWord(node,word) {
if (node.hasChildNodes) {
var hi_cn;
for (hi_cn=0;hi_cn<node.childNodes.length;hi_cn++) {
highlightWord(node.childNodes[hi_cn],word);
}
}
if (node.nodeType == 3) {
tempNodeVal = node.nodeValue.toLowerCase();
tempWordVal = word.toLowerCase();
if (tempNodeVal.indexOf(tempWordVal)!= -1) {
pn = node.parentNode;
if (pn.className!= "searchword") {
nv = node.nodeValue;
ni = tempNodeVal.indexOf(tempWordVal);
before = document.createTextNode(nv.substr(0,ni));
docWordVal = nv.substr(ni,word.length);
after = document.createTextNode(nv.substr(ni+word.length));
hiwordtext = document.createTextNode(docWordVal);
hiword = document.createElement("span");
hiword.className = "searchword";
hiword.appendChild(hiwordtext);
pn.insertBefore(before,node);
pn.insertBefore(hiword,node);
pn.insertBefore(after,node);
pn.removeChild(node);
}
}
}
}
</script>
Eksempel på style delen, placeres i <head> tagget:
<style type="text/css">
span.searchword {
font-weight: bold;
color: #FF9900;
}
</style>
Eksempel på html delen, placeres i <body> tagget:
<input type="text" id="word" /><input type=button onClick="highlightWord(document.getElementsByTagName('body')[0], document.getElementById('word').value)" value="Test" />
<p>
Her en lille tekst, der kan testes imod.<br />
Der skal også være et lille link:<a href="
http://www.devd.dk"> linket </a>med tekst efter.<br />
</p>