Angular sanitize and HTML highlighting of special char

Question

I'm currently trying to combine Angular DomSanitizer.sanitize function with an "home made" Search highlighting.

Given that I have a data which could be entered by users (like most of web site in this world) named dataEnterredByUser

I want to be able to search term on this data in order to highlight them for end user without causing any security issue.

To Highlight

I already had the highlighting part that I had to improve in order to secure it.

To decorate term occurence I use DOM element <mark></mark> That I add in the HTML string by using the following code:

this.dataTermHighlighted = this.dataEnterredByUser.replace(
  new RegExp(term, 'g'),
  (m) => `<mark>${m}</mark>`
);

With this when searching for 233 in Data with é & 233, dataTermHighlighted look like Data with é & <mark>233</mark>

To be able to apply style I have to use [innerHTML] property binding:

<span [innerHTML]="dataTermHighlighted"> </span>

---

To secure

But as explained in this Angular DOC

DOM property like [innerHTML] could cause Cross Site Scripting (XSS) security bugs when improperly handled.

I have to secure dataEnterredByUser by using DomSanitizer.sanitize.

This is what I do by sanitizing the originalDataSanitized:

this.originalDataSanitized = sanitizer.sanitize(
  SecurityContext.HTML,
  this.dataEnterredByUser
);

Using DomSanitizer.sanitize will change any special characters by his HTML ISO CODE.

Then Data with é & 233 sanitized will look like Data with é & 233

---

Problem

I've managed the search for special characters. When searching for é in Data with é & 233 HTML string will look like Data with <mark>&#233;</mark> &amp; 233 which it's nice.

But now when I'm trying to search for term that is part of any HTML ISO CODE, rendered datas are completely broke.

For example:

1. When searching for 233 in Data with é & 233 HTML string will be Data with &#<mark>233</mark>; &amp; <mark>233</mark> because é HTML ISO code is é
2. When searching for & in Data with é & 233 HTML string will be Data with <mark>&</mark>#233; <mark>&</mark>amp; 233 because & is used as start char of HTML ISO code.

I'm wonder how I can deal with this.

In fact I'm even wondering if choose the right solution.

I've made this little stackblitz for you.