Home Articles FAQs XREF Games Software Instant Books About Feedback Search Site-Map
irt.org logo

Q171 How can I implement a Search capability to find a word in the current document using JavaScript?

irt.org | Knowledge Base | JavaScript | Text | Q171 [ previous next ]

Q171 How can I implement a Search capability to find a word in the current document using JavaScript?

It can be done in Netscape Navigator 4 and Microsoft Internet Explorer 4+:

<script language="JavaScript"><!--
var pos = 0;
function findit() {
    if (document.myform.mytext.value == '') {
        alert('Nothing to search for');
        return;
    }
    if (document.all) {
        var found = false;
        var text = document.body.createTextRange();
        for (var i=0; i<=pos && (found=text.findText(document.myform.mytext.value)) != false; i++) {
            text.moveStart("character", 1);
            text.moveEnd("textedit");
        }
        if (found) {
            text.moveStart("character", -1);
            text.findText(document.myform.mytext.value);
            text.select();
            text.scrollIntoView();
            pos++;
        }
        else {
            if (pos == '0')
                alert('"' + document.myform.mytext.value +'" was not found on this page.');
            else
                alert('No further occurences of "' + document.myform.mytext.value +'" were found.');
            pos=0;
        }
    }
    else if (document.layers) {
        find(document.myform.mytext.value,false);
    }
}

if (document.layers || document.all) {
      document.write('<form name="myform">');
      document.write('<input type="text" name="mytext">');
      document.write('<input type="button" value="Find" onClick="findit()">');
      document.write('<\/form>');
}
//--></script>

If you want to search from a popup window, then the above code needs to be amended slightly:

<form name="myform">
<input type="text" name="mytext">
<input type="button" value="Find" onClick="findit()">
</form>

<script language="JavaScript"><!--
var pos = 0;
function findit() {
    if (document.myform.mytext.value == '') {
        alert('Nothing to search for');
        return;
    }
    if (document.all) {
        var found = false;
        var text = opener.document.body.createTextRange();
        for (var i=0; i<=pos && (found=text.findText(document.myform.mytext.value)) != false; i++) {
            text.moveStart("character", 1);
            text.moveEnd("textedit");
        }
        if (found) {
            text.moveStart("character", -1);
            text.findText(document.myform.mytext.value);
            text.select();
            text.scrollIntoView();
            pos++;
        }
        else {
            if (pos == '0')
                alert('"' + document.myform.mytext.value +'" was not found on this page.');
            else
                alert('No further occurences of "' + document.myform.mytext.value +'" were found.');
            pos=0;
        }
    }
    else if (document.layers) {
        opener.find(document.myform.mytext.value,false);
    }
}
//--></script>

And then in the main window:

<script language="JavaScript"><!--
if (document.all || document.layers) {
    popup = window.open('search.htm');
    if (!popup.opener) popup.opener = self;
}
//--></script>

Thanks to Eric for suggesting changes when a match isn't found.

Tracy Blevins writes:

I did find one minor bug that is fixed by setting pos=1 instead of pos=0 in the else condition of if(found). Without this change the first instance of the text to find is found twice after going through the entire document once.

Feedback on 'Q171 How can I implement a Search capability to find a word in the current document using JavaScript?'


Provide feedback ...
AddThis Social Bookmark Button

Provide feedback ... AddThis Social Bookmark Button


Last Updated: 30th March 2008. Maintained by: Martin Webb and Michel Plungjan
irt.org liability, trademark, document use, privacy statement and software licensing rules apply.
Copyright © 1996-2008 irt.org, All Rights Reserved.