Search the page with Javascript with IE

Asked

Viewed 160 times

2

Good morning!

We are creating a super simple HTML page even for a small document that some users will access. In this document we have a form (input text) of search that will have to return through an "Highlight" what the user searched. It is like the use of CTRL + F even, but through the search field, because the user does not want to search with CTRL + F or even sometimes does not know the command. I searched some JAVASCRIPT on the Internet, found some results. Most work in Chrome, but not in IE 11. As the application needs to be run on IE, because they are not all who own Chrome in the corporation, had to be by IE same.

Code example that worked on Chrome but not on IE:

function doSearch(text) {
    if (window.find && window.getSelection) {
        document.designMode = "on";
        var sel = window.getSelection();
        sel.collapse(document.body, 0);

        while (window.find(text)) {
            document.getElementById("button").blur();
            document.execCommand("HiliteColor", false, "yellow");
            sel.collapseToEnd();
        }
        document.designMode = "off";
    } else if (document.body.createTextRange) {
        var textRange = document.body.createTextRange();
        while (textRange.findText(text)) {
            textRange.execCommand("BackColor", false, "yellow");
            textRange.collapse(false);
        }
    }
}

<input type="text" id="search">
<input type="button" id="button" onmousedown="doSearch(document.getElementById('search').value)" value="Find">

Any idea of a code that works?

  • "found some results", it would be interesting to give examples. Querews that search the whole page or only in a particular field?

  • Okay, let’s go to an example that worked on Chrome but not on IE:

  • I edited the question with the code now. And it would be on the whole page even, are around 1000 and few lines, but all text, light.

  • Okay, I’ll take a look in a little bit if no one moves faster. A doubt yet: you want to select the text to be able to copy/Paster or just have the text as Highlight?

  • Sergio, only one Highlight. Whatever’s simpler. Just to understand: it is some small information that the user will look for on the page, say for example, a contact phone. Then to make it easier for them, this search jumping on the right line with a selection will help them see what they need, just that.. Thanks for your help so far!

  • Take a look here: https://github.com/padolsey/findAndReplaceDOMText, and also here: http://answall.com/a/45073/129. I have one more question: the text is anywhere on this page or within the specific HTML?

  • I could not understand the relationship between the two links and the problem. It is on the same page.

  • I found that now the IE bold the search result, however, does not "move" the page to where the element is.

Show 4 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.