Как отобразить пользовательские HTML-теги в виде простого текста внутри innerHtml

Question

У меня есть своего рода странный вариант использования в Angular 2, где у меня есть контент, который содержит обычные HTML-теги, а также пользовательские HTML-теги. Я хочу сделать обычные HTML-теги и показать пользовательские HTML-теги в виде простого текста. Например

the <CUSTOM_TAG>boy</CUSTOM_TAG> went to the <b>store</b>

должен иметь <CUSTOM_TAG>boy</CUSTOM_TAG> в виде обычного текста, как вы видите его выше, однако <b>store</b> должен отображаться как store , т. Е. Тег bold фактически отображается.

Когда я пробую обычный способ вставки html, т.е.

<div [innerHtml]="myHtml"></div>

Я получаю ошибку очистки из-за пользовательского тега. Когда я исправляю ошибку очистки, как это было сделано 1016 *, он просто удаляет пользовательские теги, которые я тоже не хочу. Возможно ли отображение пользовательских тегов в виде простого текста и отображение обычных тегов html?

Answer 1

Если все возможные пользовательские теги известны, вы можете кодировать их перед передачей строки в привязку [innerHTML]. Метод encodeCustomTags в следующем фрагменте кода использует регулярное выражение для замены <customTag> на <customTag>:

private customTags = [
  "CUSTOM_TAG",
  "otherTag",
];

myHtml = this.encodeCustomTags("the <CUSTOM_TAG>boy</CUSTOM_TAG> went to the <b>store</b>");

private encodeCustomTags(html: string): string {
  let regex: RegExp;
  for (let tag of this.customTags) {
    regex = new RegExp(`<(/?)${tag}>`, "gi");
    html = html.replace(regex, `&lt;$1${tag}&gt;`)
  }
  return html;
}

См. этот стек для демонстрации.