Home Articles FAQs XREF Games Software Instant Books BBS About FOLDOC RFCs Feedback Sitemap
irt.Org
#

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

You are here: irt.org | FAQ | JavaScript | Text | Q171 [ previous next ]

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?'

©2018 Martin Webb