SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question "Find in Page" Script

    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

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    I used google to search for javascript search page and found many useful results.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Here's the script from the first search page script, with a few modifications made so that it works cross-browser.

    Code javascript:
    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;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is another approach, it wraps the matches in highlit spans.

    Code:
    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);
    */

    Code:
    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;
    }
    Last edited by mrhoo; Jun 24, 2008 at 23:44.

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)
    Code:
    <!-- 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
    HTML Code:
    <!--  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
    HTML Code:
    <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>

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2005
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 !

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,788
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •