如何使文本中的鏈接可點擊？

Question

我開發了一個 web 應用程序，用戶可以在其中發布文本、圖像、文件，發布文本也可以包含鏈接，例如

this is my webpage link: https://demo.com/page1/home

我將上面的文本存儲在數據庫中，我想讓https://demo.com/page1/home這個文本是可點擊的。 我能做些什么..？

例如，我想要如下的東西

評論使用 mini-Markdown 格式：

[link](http://example.com)

我將帖子文本存儲在變量 userPostObj.post_text

<mat-card-content>
        <pre class="post-text">{{userPostObj.post_text}}</pre>
    </mat-card-content>

如上所述，我使用 mat-card 來顯示帖子。

Answer 1

使用<a> & </a>標簽——這些標簽定義了一個超鏈接。

Answer 2

在渲染整個文本之前，您必須使用錨標記<a>將其包裹起來，並在其上添加href屬性，並將文本作為其值。

<a href="https://demo.com/page1/home">https://demo.com/page1/home</a>

Answer 3

您應該在 href 值中使用並傳遞 url，如下所示：

<a href="https://demo.com/page1/home">https://demo.com/page1/home</a>

Answer 4

我建議您使用正則表達式從文本中查找和提取鏈接。 然后將它們放在您的 HTML 或您想要的任何地方的標簽內

Answer 5

您可以在 jinja 中使用此內置功能

<mat-card-content>
    <pre class="post-text">{{ userPostObj.post_text|urlize }}</pre>
</mat-card-content>

Answer 6

使用這個K-Coding 的 SO

如果要導航到外部 url，則不要使用 router.navigate else

constructor(...,@Inject(DOCUMENT) readonly document: Document) {}

get window(): Window { return this.document.defaultView; }

@HostListener('click', ['$event'])
onClick(e: any) {
    e.preventDefault();
    const href = e.target.getAttribute('href');
    if (href)
    {
      this.window.open(href);
    }
  }