Category: Web Development

http://www.nsftools.com/misc/SearchAndHighlight.htm

//<script language=”JavaScript”>
function doHighlight(spanText, searchTerm, highlightStartTag, highlightEndTag) {
// the highlightStartTag and highlightEndTag parameters are optional
if ((!highlightStartTag) || (!highlightEndTag)) {
highlightStartTag = “<font style=’background-color:yellow;’>”;
highlightEndTag = “</font>”;
}
var newText = “”;
var i = -1;
var lcSearchTerm = searchTerm.toLowerCase();
var lcSpanText = spanText.toLowerCase();
while (spanText.length > 0) {
i = lcSpanText.indexOf(lcSearchTerm, i + 1);
if (i < 0) {
newText += spanText;
spanText = “”;
} else {
// skip anything inside an HTML tag
if (spanText.lastIndexOf(“>”, i) >= spanText.lastIndexOf(“<“, i)) {
// skip anything inside a <script> block
if (lcSpanText.lastIndexOf(“/script>”, i) >= lcSpanText.lastIndexOf(“<script”, i)) {
// skip anything inside a <HyperLink> block
if (lcSpanText.lastIndexOf(“/asp:HyperLink>”, i) >= lcSpanText.lastIndexOf(“<asp:HyperLink”, i)) {
// skip anything inside a <linkbutton> block
if (lcSpanText.lastIndexOf(“/asp:linkbutton>”, i) >= lcSpanText.lastIndexOf(“<asp:linkbutton”, i)) {
// skip anything inside a <Checkbox> block
if (lcSpanText.lastIndexOf(“/asp:Checkbox>”, i) >= lcSpanText.lastIndexOf(“<asp:Checkbox”, i)) {
// skip anything inside a <panel> block
if (lcSpanText.lastIndexOf(“/asp:panel>”, i) >= lcSpanText.lastIndexOf(“<asp:panel”, i)) {
// skip anything inside a <legend> block
if (lcSpanText.lastIndexOf(“legend>”, i) >= lcSpanText.lastIndexOf(“<legend”, i)) {
newText += spanText.substring(0, i) + highlightStartTag + spanText.substr(i, searchTerm.length) + highlightEndTag;
spanText = spanText.substr(i + searchTerm.length);
lcSpanText = spanText.toLowerCase();
i = -1;
}
}
}
}
}
}
}
}
}
return newText;
return false;
}
function highlightSearchTerms(searchText, treatAsPhrase, warnOnFailure, highlightStartTag, highlightEndTag) {
if (treatAsPhrase) {
searchArray = [searchText];
} else {
searchArray = searchText.split(” “);
}
if (!document.getElementById(“spanText”) || typeof (document.getElementById(“spanText”).innerHTML) == “undefined”) {
if (warnOnFailure) {
Sorry, for some reason the text of this page is unavailable. Searching will not work.”);
}
return false;
}
var spanText = document.getElementById(“spanText”).innerHTML;
for (var i = 0; i < searchArray.length; i++) {
spanText = doHighlight(spanText, searchArray[i], highlightStartTag, highlightEndTag);
}
document.getElementById(“spanText”).innerHTML = spanText;
return false;
}
function badphrases(){
highlightSearchTerms(‘die kill’);
}
//window.onload(setTimeout(‘badphrases();’,3000));
//</script>

The code worked beautifully when I tested it’s search then highlight functions. BUT when I tested it against the rest of the page I realized that my buttons weren’t working anymore. Something was going wrong and after playing with how the script loaded, what to block it from replacing, and where it highlighted I gave up.

Another solution had to be found. Knowing that Dotnetnuke had jQuery integrated into it I tried this jQuery plugin:

http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

Ostensibly, it looked like a winner like the last one. NO!, something was still wrong. Further inspection told me that the JavaScript was messing with DNN’s method of posting back. After some more trial and error I went to the DNN forums:

http://www.dnnsoftware.com/forums/forumid/199/threadid/503867/scope/posts

javascript and asp.net postbacks are somewhat at odds with each other under certain circumstances.
This is especially the case if there are any async / partial update panels on the page
– something that is more and more common these days.

That’s what I got, though it didn’t help much. I told me that I shouldn’t give up and after a little more searching I found my code: http://bartaz.github.io/sandbox.js/jquery.highlight.html

<style>.highlight { background-color: yellow; }</style>

<script language=”javascript” type=”text/javascript”>

jQuery.fn.highlight = function(pat) {
function innerHighlight(node, pat) {
var skip = 0;
if (node.nodeType == 3) {
var pos = node.data.toUpperCase().indexOf(pat);
if (pos >= 0) {
var spannode = document.createElement(‘span’);
spannode.className = ‘highlight’;
var middlebit = node.splitText(pos);
var endbit = middlebit.splitText(pat.length);
var middleclone = middlebit.cloneNode(true);
spannode.appendChild(middleclone);
middlebit.parentNode.replaceChild(spannode, middlebit);
skip = 1;
}
}
else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
for (var i = 0; i < node.childNodes.length; ++i) {
i += innerHighlight(node.childNodes[i], pat);
}
}
return skip;
}
return this.length && pat && pat.length ? this.each(function() {
innerHighlight(this, pat.toUpperCase());
}) : this;
};

$(document).ready(function(){
$(“td”).highlight(“kill”);
});

</script>

Thank you Bartaz and Johann for the nice code. Bartaz’s updated code did the trick. I hope this helps someone else working with Dotnetnuke. Happy Coding to all!