How does browser search tool work on web page? - browser

Question

I am trying to figure out how the search tool in a web browser is being able to parse through the entire web page(assuming huge content on a page) and highlight the result as we type. Does it pre-cache the page while loading in a map or use regex to get a quick result on the fly?

Answer 1

The document is already parsed, by the browser. Searching that document could walk the DOM tree, decide what nodes that could be searched, and inject document nodes to alter the display(such as making the text bold etc).
A standard string matching algorithms can parse through a really huge chunk of text in a second.(think about it, you can run a 3D multiplayer game with collition detection,scene culling, AI,, sound, flashy effects, integrated voice chat, at 60fps on a standard computer, searching a few megabytes of text is nothing..)

Answer 2

Finding a substring in a bigger text isn't such of a hard work for a computer to do. Actually, I believe it is much harder to render a html page (though not too hard) than to find a substring. As mentioned, there is fast algorithms for this.
Keep in mind, your machine is almost fully dedicated to this at this moment, so there's lots of processing capacity dedicated to this (rather simple) job...

Answer 3

I don't know the details, but I would imagine it is something like this.
The Boyer-Moore algorithm is a very fast and efficient way of searching for text substrings.

Answer 4

I expect it would involve traversing the dom for plain text. I may only be speculating but I would take the dom and search for elements that could contain plaintext, inside which I would do a search of that elements contents and child elements.
If you do a search in firefox and look via firefbug you'll notice that firefox modifies the dom of the document so that search items are children of elements themselves, to which styling such as the highlighting is applied.
For example, here is what happens to the phrase 'eleme' on this page if I start a search using firefox and highlight all:
<span style="padding: 0pt; background-color: yellow; color: black; display: inline; font-size: inherit;" class="__mozilla-findbar-search">eleme</span>

Answer 5

php/ smarty
by using url encode you can do it ?pls serach on urlencode file?="c-content"
prefix
sample code ::::
print_r($file);
if(isset($file)){
$var=explode("-",$file);
print_r($var);
$prefix=$var[0];
$script=$var[1];
}
else
{
$file="c-home1";
$prefix="c";
$script="home";
$modid = 0;
}
if($script=="")
$script="prod_list";
------------------------------------------------------------------------------------------
//following code finds out the modules from sufiix and find out the script name
switch ($prefix)
{
case "c":
$module = "content";
break;
case "m":
$module = "myaccount";
break;
default:
$module = "content";
break;
}
$smarty->assign("module",$module);
//following code finds out the modules from suffix and find out the script name
$include_script .= $module."/".$script.".php";
if(file_exists($include_script))
include_once($include_script);
else
include_once("content/error.php");
if($script!='home')
{
if($script == 'termsandcondition'){
$smarty->display("content/termsandcondition.tpl");
}else{
$smarty->display("template.tpl");
}
}
else
{
$smarty->display("template_home.tpl");
$smarty->assign("msg",$msg);
$smarty->assign("msglogin",$msglogin);
}
?>