How To Wrap Part Of The Text In A Node That Has 'display: Flex And Justify-content: Space-between' Styling?

I am currently writing a Firefox extension that uses fuzzy search to highligth words on a web page. The highlighting is done by creating a range that contains the match, then wrapp

Solution 1:

Flex is always responsible for self- and child-layouts. You have to add a wrapper around the child-nodes (even if they are text-nodes), if you don't want them to be affected by the parents flex-settings.

The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

Source: https://drafts.csswg.org/css-flexbox-1/

The browser marks the highlight from the search (CTRL+F) on a completely different level and does not inject html code.

That what you want to do, can be solved with the Selection API, but keep in mind, that only Firefox supports multiple selection-ranges at once.

Check out the example here: https://developer.mozilla.org/en-US/docs/Web/API/Selection/addRange#Result

• Firefox: https://i.imgur.com/DnhZJ5y.png
• Webkit Browsers: https://i.imgur.com/sfKriEl.png

Solution 2:

Can you modify html? Do you need to keep raw text inside the element with problematicClass? Easy solution is to wrap block of text in ex. <span>.