In JavaScript, by given a html string with tags like: This string has different fonts.

<b>This</b>
<i>string</i>
<span style="background-color: rgb(212, 239, 181);">has</span>
<b>different</b>
<i>fonts</i>.

When user searches for a search term with multiple words like "different fonts".

How can I add highlighting to make the html string look like:

<b>This</b>
<i>string</i>
<span style="background-color: rgb(212, 239, 181);">has</span>
<span class="highlight">
    <b>different</b>
    <i>fonts</i>
</span>.

Please note that the search term is treated as a single string as if the words are in a quote, so I cannot search and highlight each word individually.