亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在不允許 HTML 標簽的情況下將 Markdown 轉換為 HTML

在不允許 HTML 標簽的情況下將 Markdown 轉換為 HTML

POPMUISE 2023-05-25 15:46:40
我正在嘗試構建一個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;
查看完整描述

1 回答

?
慕尼黑8549860

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, "&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;

  }

}


查看完整回答
反對 回復 2023-05-25
  • 1 回答
  • 0 關注
  • 229 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號