In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > methods > find (window)

find method (window)

Browser support:

Searches for a specified text in the document and highlights the matches.

The start position of the search depends on the current selection. When forward search is set, the start position of the search is the end position of the selection. When backward search is set, the start position of the search is the position before the end position of the selection. If no content is selected, the start position of the forward search is the first position of the document, the start position of the backward search is the last position of the document.

Use the window.getSelection method to retrieve a selectionRange object. With this object you can get or modify the selected content in the document.

In Internet Explorer, use the findText method of the TextRange object for similar functionality. See Example 2 below.
Searching for a text in the document is not supported by Opera.

Syntax:

object.find ([textToFind [, matchCase[, searchUpward[, wrapAround[, wholeWord[, searchInFrames[, showDialog]]]]]]]);

You can find the related objects in the Supported by objects section below.

Parameters:

textToFind

Optional. String that specifies the text to find. If this parameter is not set or its value is an empty string, the Find dialog box appears in Firefox and nothing happens in Google Chrome and Safari.

matchCase

Optional. Boolean value that specifies the case sensitivity.

One of the following values:

false

Default. Case-insensitive search.

true

Case-sensitive search.

searchUpward

Optional. Boolean that specifies the search direction.

One of the following values:

false

Default. Search from the current selection position upward through the document.

true

Search from the current selection position forward through the document.

wrapAround

Optional. Boolean that indicates whether to search in wrapped text, or not.

One of the following values:

false

Default. Search in wrapped text, too.

true

Do not search in wrapped text.

wholeWord

Optional. Boolean that indicates whether to match whole words only, or not.

One of the following values:

false

Default. Match part of a word.

true

Match whole words only.

searchInFrames

Optional. Boolean that indicates whether to also search in frames, or not.

One of the following values:

false

Default. Search in frames.

true

Do not search in frames.

showDialog

Optional. Boolean that indicates whether to show the find dialog of the browser.

One of the following values:

false

Default. Find dialog is not shown.

true

Find dialog is shown.

Return value:

Boolean. One of the following values:

false	No match was found.
true	A match was found.

Example HTML code 1:

This example shows how to find text within a page:

<head>
    <script type="text/javascript">
        function FindNext () {
            var str = document.getElementById ("findInput").value;
            if (str == "") {
                alert ("Please enter some text to search!");
                return;
            }
            
            if (window.find) {        // Firefox, Google Chrome, Safari
                var found = window.find (str);
                if (!found) {
                    alert ("The following text was not found:\n" + str);
                }
            }
            else {
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body>
    <div>LaLa, Lala, laLa , lala, lalala, tralala, some other text</div>
    <br />
    <input type="text" id="findInput" value="lala" size="20" />
    <button onclick="FindNext ();">Find Next</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates a cross-browser solution for the previous example:

<head>
    <script type="text/javascript">
        function FindNext () {
            var str = document.getElementById ("findField").value;
            if (str == "") {
                alert ("Please enter some text to search!");
                return;
            }

            var supported = false;
            var found = false;
            if (window.find) {        // Firefox, Google Chrome, Safari
                supported = true;
                    // if some content is selected, the start position of the search 
                    // will be the end position of the selection
                found = window.find (str);
            }
            else {
                if (document.selection && document.selection.createRange) { // Internet Explorer, Opera before version 10.5
                    var textRange = document.selection.createRange ();
                    if (textRange.findText) {   // Internet Explorer
                        supported = true;
                            // if some content is selected, the start position of the search 
                            // will be the position after the start position of the selection
                        if (textRange.text.length > 0) {
                            textRange.collapse (true);
                            textRange.move ("character", 1);
                        }

                        found = textRange.findText (str);
                        if (found) {
                            textRange.select ();
                        }
                    }
                }
            }

            if (supported) {
                if (!found) {
                    alert ("The following text was not found:\n" + str);
                }
            }
            else {
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body>
    <div>LaLa, Lala, laLa , lala, lalala, tralala, some other text</div>
    <br />
    <input type="text" id="findField" value="lala" size="20" />
    <button onclick="FindNext ();">Find!</button>
</body>