How to limit Javascript's window.find to a particular DIV?

Question

Is it possible to use Javascript in Safari/Firefox/Chrome to search a particular div container for a given text string. I know you can use window.find(str) to search the entire page but is it possible to limit the search area to the div only?

Thanks!

Answer 1

Depending on what you are trying to do, there is an interesting way of doing this that does work (does require some work).

First, searching starts at the location where the user last clicked. So to get to the correct context, you can force a click on the div. This will place the internal pointer at the beginning of the div.

Then, you can use window.find as usual to find the element. It will highlight and move toward the next item found. You could create your own dialog and handle the true or false returned by find, as well as check the position. So for example, you could save the current scroll position, and if the next returned result is outside of the div, you restore the scroll. Also, if it returns false, then you can say there were no results found.

You could also show the default search box. In that case, you would be able to specify the starting position, but not the ending position because you lose control.

Some example code to help you get started. I could also try putting up a jsfiddle if there is enough interest.

Syntax:

window.find(aStringToFind, bCaseSensitive, bBackwards, bWrapAround, bWholeWord, bSearchInFrames, bShowDialog);

For example, to start searching inside of myDiv, try

document.getElementById("myDiv").click(); //Place cursor at the beginning
window.find("t", 0, 0, 0, 0, 0, 0); //Go to the next location, no wrap around

You could set a blur (lose focus) event handler to let you know when you leave the div so you can stop the search.

To save the current scroll position, use document.body.scrollTop. You can then set it back if it trys to jump outside of the div.

Hope this helps! ~techdude

Answer 2

If you are still looking for someting I think I found a pretty nice solution;

Here it is : https://www.aspforums.net/Threads/211834/How-to-search-text-on-web-page-similar-to-CTRL-F-using-jQuery/

And I'm working on removing jQuery (wip) : codepen.io/eloiletagant/pen/MBgOPB Hope it's not too late :)