So I am working on a project where I have to search some HTML documents for a possible text string. This lead me to an interesting find in how browsers do searching on text.

Let’s look at the following HTML.

<div>
<div style="background-color: #00ff00;">Hello ther</div>
<div style="background-color: #ff0000;">e,
<span style="background-color: #f0ff00;">bob</span> how are</div>
<div style="background-color: #00ff00;">you?</div>
</div>

The text displays as the following:

The yellow represents the inner span. The divs are different colors to show their distinction.

If you search for the text “Hello there” no results will be found as the browser does not search across div elements.

If you search for the text “e, bob how are” the text will be found as the browser will search across span elements.

It’s interesting to note that the browser’s search works only across defaulted inline elements but not elements set inline by the html.