在不允许 HTML 标签的情况下将 Markdown 转换为 HTML

Question

我正在尝试构建一个textarea支持降价的。我已经成功地将降价转换为 HTML 以呈现预览，使用以下管道：import { Pipe, PipeTransform } from '@angular/core';import * as marked from 'marked';import * as DOMPurify from 'dompurify';@Pipe({ name: 'markdown' })export class MarkdownPipe implements PipeTransform {  markdownToSafeHtml(value: string): string {    const html = marked(value);    const safeHtml = DOMPurify.sanitize(html);    return safeHtml;  }  transform(str: string): string {    if (str && str.length > 0) {      const html = this.markdownToSafeHtml(str);      return html.toString();    }    return str;  }}以及以下 HTML：<div [innerHTML]="value | markdown">它正在工作并显示降价设计，但问题是我可以在降价字符串中添加任何 HTML 标签，并且因为我正在使用innerHTMLdiv 将使用它们，例如<h1>hello</h1>在此标签的预览中使用礼物，它应该将其呈现为文本。没有其余的 HTML 标签，我如何转换为降价？我已经尝试对 HTML 字母进行编码（例如&amp;等等），问题是在使用代码降价时，这个转换：<div>example</div>是&lt;div&gt;example&lt;/div&gt;

Answer 1

使用下面的管道终于成功了。

解决方案是创建一个包含 HTML 的元素，并<code>使用该unescapeCodes函数反转元素中的 HTML 转义。

import { Pipe, PipeTransform } from '@angular/core';

import * as marked from 'marked';

import * as DOMPurify from 'dompurify';

@Pipe({ name: 'markdown' })

export class MarkdownPipe implements PipeTransform {

  constructor() {

  }

  private escapeHTML(str: string) {

    return str.replace(/&/g, "&amp;")

      .replace(/</g, "&lt;")

      .replace(/>/g, "&gt;")

      .replace(/"/g, "&quot;")

      .replace(/'/g, "&#039;");

  }

  private unescapeHTML(str: string) {

    return str.replace(/&amp;/g, "&")

      .replace(/&lt;/g, "<")

      .replace(/&gt;/g, ">")

      .replace(/&quot;/g, "\"")

      .replace(/&#039;/g, "'");

  }

  private markdownToSafeHtml(value: string): string {

    const html = marked(value);

    return DOMPurify.sanitize(html);

  }

  private unescapeCodes(value: string) {

    const el = document.createElement("div");

    el.innerHTML = value;

    const codes = el.getElementsByTagName('code');

    for (let i = 0; i < codes.length; i++) {

      codes.item(i).innerText = this.unescapeHTML(codes.item(i).innerText);

    }

    return el.innerHTML.toString();

  }

  transform(str: string): string {

    if (!str || str.length == 0) return str;

    str = this.escapeHTML(str);

    let html = this.markdownToSafeHtml(str);

    html = this.unescapeCodes(html);

    return html;

  }

}