Hi,
Can anyone point me in the right direction of a script/function/class that allows a user to search a single page for a string?
I have tried searching for ‘inline search’, ‘text find’, ‘search page’, you name it, to no avail.
Any help will be greatly appreciated 
Thanks but I have performed the same search and tested some of the scripts I found through Google, the most promising of which is the ‘Find in Page’ script on Dynamic Drive - however the last release was in 2003 and this script doesn’t seem to work in any browser except for IE6.
I was hoping someone who is currently using or knows of a working script that is at least a little browser compatible.
Here’s the script from the first search page script, with a few modifications made so that it works cross-browser.
var n = 0;
function findInPage(str) {
var txt, i, found;
if (str == "") {
return false;
}
// Find next occurance of the given string on the page, wrap around to the
// start of the page if necessary.
if (window.find) {
// Look for match starting at the current point. If not found, rewind
// back to the first match.
if (!window.find(str)) {
while (window.find(str, false, true)) {
n++;
}
} else {
n++;
}
// If not found in either direction, give message.
if (n == 0) {
alert("Not found.");
}
} else if (window.document.body.createTextRange) {
txt = window.document.body.createTextRange();
// Find the nth match from the top of the page.
found = true;
i = 0;
while (found === true && i <= n) {
found = txt.findText(str);
if (found) {
txt.moveStart("character", 1);
txt.moveEnd("textedit");
}
i += 1;
}
// If found, mark it and scroll it into view.
if (found) {
txt.moveStart("character", -1);
txt.findText(str);
txt.select();
txt.scrollIntoView();
n++;
} else {
// Otherwise, start over at the top of the page and find first match.
if (n > 0) {
n = 0;
findInPage(str);
}
// Not found anywhere, give message. else
alert("Not found.");
}
}
return false;
}
This is another approach, it wraps the matches in highlit spans.
Run.hiliter= function(pa,Rx){
var A,L,tem,str,papa,fun,hL;
A= document.getElementsByTagName('span');
L= A.length;
while(L){
tem= A[--L];
if(tem.className== 'highLitCss'){
tem.className= '';
tem.style.backgroundColor= '';
}
}
if(!pa) return true;
var fun= function (hoo){
// You can limit the results to include or exclude particular elements:
if(hoo.parentNode.form) return null;
var tem= hoo.data || '';
if(Rx.test(tem)) return hoo;
return null;
}
A= Run.goDeep(pa, 3, fun);
hL= document.createElement('span');
hL.className= 'highLitCss';
hL.style.backgroundColor= 'yellow';
while(A.length){
hoo= A.shift();
str= hoo.data;
pa= hoo.parentNode;
while(str && (res= Rx.exec(str)) != null){
var tem= res[1];
el= hL.cloneNode(false);
el.appendChild(document.createTextNode(tem));
hoo.replaceData(res.index, tem.length, '');
hoo= hoo.splitText(res.index);
str= hoo.data;
if (str) pa.insertBefore(el, hoo);
else pa.appendChild(el);
Rx.lastIndex= 0;
}
}
}
Run.hiliter(document.body,/\b(the)\b/gi)
//Test case:
Run.hiliter(document.body,/\b(and)\b/gi)
/* You can get a string from the user and make a reg exp of it.
The parentheses are required around the matching text.
var s= ‘and’;
var r= new RegExp(‘\\b(’+s+‘)\\b’,‘gi’);
var x= document.body;
Run.hiliter(x,r);
*/
Run.goDeep= function(hoo,t,fun,arg){
var A= [], tem;
if (hoo){
hoo= hoo.firstChild
while(hoo!= null){
if(!t || hoo.nodeType== t){
if(fun){
if ((tem= fun(hoo,arg))!== null) A.push(tem);
}
else A.push(hoo);
}
A= A.concat(arguments.callee(hoo,t,fun,arg));
hoo= hoo.nextSibling
}
}
return A;
}
Thanks pmw57 but your code only seems to work in IE?
Mr Hoo, I am not familiar at all with Javascript so not sure how to implement the code you provided.
I did find a script that seems to work with Navigator, Mozilla and IE (not opera) but it is conflicting with another search form on my page and I’m not sure how to modify it to stop this.
The script (my apologies for not highlighting more appropriately but my post screen didn’t load correctly)
<!-- Hide from old browsers
/******************************************
* Find In Page Script -- Submitted/revised by Alan Koontz (alankoontz@REMOVETHISyahoo.com)
* Visit Dynamic Drive (http://www.dynamicdrive.com/) for full source code
* This notice must stay intact for use
******************************************/
// revised by Alan Koontz -- May 2003
var TRange = null;
var dupeRange = null;
var TestRange = null;
var win = null;
// SELECTED BROWSER SNIFFER COMPONENTS DOCUMENTED AT
// http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html
var nom = navigator.appName.toLowerCase();
var agt = navigator.userAgent.toLowerCase();
var is_major = parseInt(navigator.appVersion);
var is_minor = parseFloat(navigator.appVersion);
var is_ie = (agt.indexOf("msie") != -1);
var is_ie4up = (is_ie && (is_major >= 4));
var is_not_moz = (agt.indexOf('netscape')!=-1)
var is_nav = (nom.indexOf('netscape')!=-1);
var is_nav4 = (is_nav && (is_major == 4));
var is_mac = (agt.indexOf("mac")!=-1);
var is_gecko = (agt.indexOf('gecko') != -1);
var is_opera = (agt.indexOf("opera") != -1);
// GECKO REVISION
var is_rev=0
if (is_gecko) {
temp = agt.split("rv:")
is_rev = parseFloat(temp[1])
}
// USE THE FOLLOWING VARIABLE TO CONFIGURE FRAMES TO SEARCH
// (SELF OR CHILD FRAME)
//var frametosearch = 'main';
var frametosearch = self;
function search(whichform, whichframe) {
// TEST FOR IE5 FOR MAC (NO DOCUMENTATION)
if (is_ie4up && is_mac) return;
// TEST FOR NAV 6 (NO DOCUMENTATION)
if (is_gecko && (is_rev <1)) return;
// TEST FOR Opera (NO DOCUMENTATION)
if (is_opera) return;
// INITIALIZATIONS FOR FIND-IN-PAGE SEARCHES
if(whichform.findthis.value!=null && whichform.findthis.value!='') {
str = whichform.findthis.value;
win = whichframe;
var frameval=false;
if(win!=self)
{
frameval=true; // this will enable Nav7 to search child frame
win = parent.frames[whichframe];
}
}
else return; // i.e., no search string was entered
var strFound;
// NAVIGATOR 4 SPECIFIC CODE
if(is_nav4 && (is_minor < 5)) {
strFound=win.find(str); // case insensitive, forward search by default
// There are 3 arguments available:
// searchString: type string and it's the item to be searched
// caseSensitive: boolean -- is search case sensitive?
// backwards: boolean --should we also search backwards?
// strFound=win.find(str, false, false) is the explicit
// version of the above
}
// NAVIGATOR 7 and Mozilla rev 1+ SPECIFIC CODE (WILL NOT WORK WITH NAVIGATOR 6)
if (is_gecko && (is_rev >= 1)) {
if(frameval!=false) win.focus(); // force search in specified child frame
strFound=win.find(str, false, false, true, false, frameval, false);
// The following statement enables reversion of focus
// back to the search box after each search event
if (is_not_moz) whichform.findthis.focus();
}
if (is_ie4up) {
// EXPLORER-SPECIFIC CODE revised 5/21/03
if (TRange!=null) {
TestRange=win.document.body.createTextRange();
if (dupeRange.inRange(TestRange)) {
TRange.collapse(false);
strFound=TRange.findText(str);
if (strFound) {
//the following line added by Mike and Susan Keenan, 7 June 2003
win.document.body.scrollTop = win.document.body.scrollTop + TRange.offsetTop;
TRange.select();
}
}
else {
TRange=win.document.body.createTextRange();
TRange.collapse(false);
strFound=TRange.findText(str);
if (strFound) {
//the following line added by Mike and Susan Keenan, 7 June 2003
win.document.body.scrollTop = TRange.offsetTop;
TRange.select();
}
}
}
if (TRange==null || strFound==0) {
TRange=win.document.body.createTextRange();
dupeRange = TRange.duplicate();
strFound=TRange.findText(str);
if (strFound) {
//the following line added by Mike and Susan Keenan, 7 June 2003
win.document.body.scrollTop = TRange.offsetTop;
TRange.select();
}
}
}
if (!strFound) alert ("String '"+str+"' not found!") // string not found
}
// -->
the form
<!-- EXAMPLE FORM OF FIND-IN-PAGE SEARCH USING SUBMIT (ALLOWING 'ENTER/RETURN' KEY PRESS EVENT) -->
<form name="find" id="find" onSubmit="search(document.find, frametosearch); return false">
<input type="text" name="findthis" id="findthis" size="15" title="Press 'ALT s' after clicking submit to repeatedly search page">
<input type="submit" value="Find in Page" ACCESSKEY="s"></form>
The other form which is causing the script to not work
<form id="search" name="searchform" method="POST" action="/search.epl">
<input type="text" name="searchstring" class="searchinput" id="searchbox" value="">
<input type="submit" value="Search"></form>
I knew I would figure it out eventually and that it would be something simple. The conflict was caused by the name of the javascript function, I’m assuming that it was getting confused with the id of the 2nd search form since no javascript is invloved for that one?
Would love some clarification on why a function name would conflict with another form name/id !
Internet Explorer maps all of the ids and names in your HTML into JScript so that they will automatically clash with any JavaScript objects with the same name (including any variables and functions).
I have a find in page script at http://www.felgall.com/jstip21.htm