第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

在不允許 HTML 標(biāo)簽的情況下將 Markdown 轉(zhuǎn)換為 HTML

在不允許 HTML 標(biāo)簽的情況下將 Markdown 轉(zhuǎn)換為 HTML

POPMUISE 2023-05-25 15:46:40
我正在嘗試構(gòu)建一個(gè)textarea支持降價(jià)的。我已經(jīng)成功地將降價(jià)轉(zhuǎn)換為 HTML 以呈現(xiàn)預(yù)覽,使用以下管道: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">它正在工作并顯示降價(jià)設(shè)計(jì),但問題是我可以在降價(jià)字符串中添加任何 HTML 標(biāo)簽,并且因?yàn)槲艺谑褂胕nnerHTMLdiv 將使用它們,例如<h1>hello</h1>在此標(biāo)簽的預(yù)覽中使用禮物,它應(yīng)該將其呈現(xiàn)為文本。沒有其余的 HTML 標(biāo)簽,我如何轉(zhuǎn)換為降價(jià)?我已經(jīng)嘗試對(duì) HTML 字母進(jìn)行編碼(例如&amp;等等),問題是在使用代碼降價(jià)時(shí),這個(gè)轉(zhuǎn)換:<div>example</div>是&lt;div&gt;example&lt;/div&gt;
查看完整描述

1 回答

?
慕尼黑8549860

TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超11個(gè)贊

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


解決方案是創(chuàng)建一個(gè)包含 HTML 的元素,并<code>使用該unescapeCodes函數(shù)反轉(zhuǎn)元素中的 HTML 轉(zhuǎn)義。


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;

  }

}


查看完整回答
反對(duì) 回復(fù) 2023-05-25
  • 1 回答
  • 0 關(guān)注
  • 237 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)