Webpage Text Search Doesn't Highlight Results

brenji

Sometimes I'll search a webpage for text with Ctrl+F. I tells me there are results but the text doesn't get highlighted. The page will skip to the result but it's not highlighted so you really don't know where it is. Has anyone.., seen this?

Pesala

@brenji Has anyone seen the invisible man?

A link to a page where this happens might help to diagnose the problem.

Pathduck

This can happen on sites who use scripts to hide elements. The text is there in the page content, you just can't see it before expanding the element.

An example is Youtube comment threads.

You could argue that search should not find elements that are hidden, but some might think it useful as well.

LorenAmelang

I see this constantly, and it is a major frustration! I assume I've just missed some occurrence of the search term that happened to be in tiny type, and scan carefully all over the page before giving up and searching the page source. That almost always finds something hidden in some unexpanded "stylish" gimmick.

I would beg and plead for two feature additions:

A minimum size for the highlight of found search words. If the word can't get bigger, then maybe a large, bright-colored circle or frame around it (at least 10% of the full page width!) Probably needs to be optional, in case people with perfect vision don't like it.

If the word is not currently visible at all, draw the circle or frame around the page element within which it is hidden! (I have no idea how difficult this would be, but since the page can scroll to that invisible location, it must be known to the search code...)

Pathduck

@LorenAmelang Try going into vivaldi://experiments/ and enable "Styled Find in Page".
Adds a bit more "flair" to the results. Personally I don't like it but it might make things easier to see.

LorenAmelang

@Pathduck BTDT... I use a hacked version of https://forum.vivaldi.net/topic/28750/less-obstructive-compact-bottom-find-bar/ to make the visible results more visible. But it doesn't enlarge the tiny results, and does nothing about the invisible ones.

Thanks for checking, though!

BoneTone

@LorenAmelang said in Webpage Text Search Doesn't Highlight Results:

If the word is not currently visible at all, draw the circle or frame around the page element within which it is hidden! (I have no idea how difficult this would be, but since the page can scroll to that invisible location, it must be known to the search code...)

This still wouldn't display anything for elements that are "off the page" so to speak. If you spend enough time working with the code of various websites, you'll constantly notice things that are positioned outside of any viewable area. In such a case, the circle or frame would not be visible either.

Really, the best thing to do is use the built-in dev tools to find whatever you're looking for when a search returns results that you can't find. Using the "view page source" is sufficient if you just quickly want to see the result's text. With the dev tools you can also find exactly where it's positioned as well; if it's not outside the display area, you can probably also make a minor change to the code and have it appear.

LorenAmelang

@bonetone Interesting - thanks! I get that if the "circle" was drawn at an off screen location, it wouldn't help me. Maybe it could work like DevTools when I point to code for something out of the current view - point to it from the nearest edge of what is visible?

I'm just barely learning to use DevTools. If I look at the search bar I don't see what it has found, only its visible appearance. If I look at a highlighted word, I only see the text block it is part of. If I'm trying to spot an invisible search result, what would I click or where would I look?

In one particular very simple page I actually saw the Style for the colored highlight of a visible search result. But in normally complex pages I usually can't even find the code for the search bar...

BoneTone

@LorenAmelang said in Webpage Text Search Doesn't Highlight Results:

@bonetone Interesting - thanks! I get that if the "circle" was drawn at an off screen location, it wouldn't help me. Maybe it could work like DevTools when I point to code for something out of the current view - point to it from the nearest edge of what is visible?

I'm just barely learning to use DevTools. If I look at the search bar I don't see what it has found, only its visible appearance. If I look at a highlighted word, I only see the text block it is part of. If I'm trying to spot an invisible search result, what would I click or where would I look?

In one particular very simple page I actually saw the Style for the colored highlight of a visible search result. But in normally complex pages I usually can't even find the code for the search bar...

Yeah, when you're looking at elements like the search bar, you're looking at that specific element, not the potentially many or potentially zero results that could be generated by the search. You would want to search in the code inside of dev tools to find instances of whatever search term you're looking for.

When you hover your mouse pointer over elements in the DOM, they get highlighted on the page. I'm not at my desk right now so I can't take a screenshot, but if an element is hidden outside of the viewable area, the edge of the screen will have a little line if highlighting. I'm trying to recall the last site I saw this on, it was either Wikipedia or Amazon. You could probably just run your mouse over elements in the header section to find one that is placed off screen.

Sometimes the code for things like search bars will be pulled into the HTML through scripting (especially any search results that are part of the page), so you'll have to dig into the scripts (either embedded or included) to see how they are built. But with dev tools you can set break points in the execution of the scripts, and you can modify the values that are being calculated or referenced, just like you can modify CSS on the fly.

(An aside: search tools that are part of the site, not the find in page search that's part of the browser, can be inspected after having performed a search that returns some results.)

So you can make elements that disappear while you're trying to inspect them reappear, or make elements that are temporarily placed off the page move to their location on the page when a certain variable has a certain value. Knowing what value to set where takes some investigation, trial & error, breaking execution to see the value when it is in the desired state, things like that, to figure out what you need.

It's certainly confusing and difficult at first, especially if you haven't already learned some CSS & JS, but with time, patience and practice it keeps getting easier. We're all on the path to greater understanding. Regardless of what we know now, there's even more that we don't.

Hope this helps,
BoneTone

LorenAmelang

@bonetone Oh, I see - just search through the whole Elements tab with a new Ctrl+F in the DevTools pane! (Search field appears at very bottom.) For this page it finds "bone" 33 times as opposed to 10 in the normal page, but it will point to all of them. Will def try that next time I can't spot a result.

BoneTone

@LorenAmelang said in Webpage Text Search Doesn't Highlight Results:

For this page it finds "bone" 33 times as opposed to 10 in the normal page

That's because the browser's "find in page" function is searching only the content, while in dev tools the search is scanning the entire document -- code included. So that's adding in stuff like attribute values on various elements, the text of URIs (links), things like that.

Those results would really confuse people if they were included in the page search, with like 4x as many results as they can actually see. Most of the results would be missing "invisible" items with no highlighting. When you're in dev tools, however, that code is often what you're searching for rather than the page content. But, if you've got a hidden result from the browser's page search, you should find it sifting through the search results in dev tools.