代码之家 › 专栏 › 技术社区 › user1893354

如何在InnerHTML中以纯文本形式显示自定义HTML标记

angular html

user1893354 · 技术社区 · 5 年前

在Angular2中,我有一个奇怪的用例,其中有些内容包含常规的HTML标记以及自定义的HTML标记。我想呈现常规的HTML标记,并将自定义的HTML标记显示为纯文本。例如

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

应该有 <CUSTOM_TAG>boy</CUSTOM_TAG> 不过,显示为纯文本,正如您在上面看到的那样 <b>store</b> 应显示为商店也就是说,粗体标签是实际呈现的。

当我尝试用通常的方法插入HTML时,

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

由于自定义标记,我收到一个清理错误。当我修复消毒错误时 done here 它只是去掉了我也不想要的定制标签。是否可以将自定义标记显示为纯文本并呈现常规HTML标记?

1 回复 | 直到 5 年前

ConnorsFan 5 年前

如果已知所有可能的自定义标记,则可以在将字符串传递给 [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;
}

见 this stackblitz 一个演示。