1 回答

TA貢獻1818條經驗 獲得超11個贊
使用下面的管道終于成功了。
解決方案是創建一個包含 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, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
private unescapeHTML(str: string) {
return str.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, "\"")
.replace(/'/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;
}
}
添加回答
舉報