html - Highlighting divs without empty spaces in between

Question

given the code in the screenshot

I get words highlighted in yellow if I take a note.

How could I achieve the result where the empty spaces between these words would be highlighted too, so that the whole note is highlighted in yellow? The span element sorrounding all these divs (wrd) is there by chance, so it could easily exists some other structure. I thought of wrapping all these divs and apply a style to a container, but the problem is that I can not wrap these words in any container as they may pertain to several notes and some of these notes could even contain a subset of these words or some text after the words I have highlighted (running the risk to break the HTML structure opening and closing divs the wrong way).

The element wrd has no custom CSS style applied.

Thanks for your help and time!

Answer 1

WRDS element are now spaced like this:

<wrd>Content</wrd>`whitespace`<wrd>Content2</wrd>

You need to contain whitespaces in the wrd element like this:

<wrd>Content </wrd><wrd>Content2 </wrd>