0

I'm working on a search field to be implemented in a web application, and I'm trying to emulate Chrome's search highlighting. My approach so far has been to split elements up into several child elements, and then to apply a CSS class to the subset of child elements that contain the search query. However, the content on the page is highly dynamic, and this "split and apply CSS" approach is clashing with our current functionality. Manipulating the DOM in this way isn't going to work.

So I'm looking at what browser-native Ctrl+F does, but I can't figure out how the search highlight is actually applied. Poking at a web page with F12 tools, the highlighted elements with Ctrl+F aren't actually new elements - the highlight doesn't appear in the DOM! This looks promising to me, since I may be able to update the search results without manipulating the underlying DOM.

So, how does the highlight get applied, if not via CSS or styling directly on elements? Are there other paradigms for search highlighting that might be of use?

webdev
  • 21
  • 4
  • The browser has higher level access since it is the application that renders the dom. You only have access to the dom with your code – charlietfl Apr 03 '21 at 22:33
  • How does the browser do it, though? What's the mechanism? – webdev Apr 03 '21 at 23:09
  • Not sure to be honest.Most likely done in rendering layer above the dom where it generates the display pixels, Your code is sandboxed at window level and wouldn't have access – charlietfl Apr 03 '21 at 23:10
  • It's not a direct answer but maybe this will help: [Select range in contenteditable div](https://stackoverflow.com/questions/3771824/select-range-in-contenteditable-div) – shadow-lad Apr 03 '21 at 23:24

0 Answers0