How to make links clickable in text?

Question

I develop a web app where users can post text, images, Files a post text can contain links also, for example

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

I store the above text in the database and I want to make https://demo.com/page1/home this text is clickable. What can I do..?

For example, I want something as follows

Comments use mini-Markdown formatting:

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

I store post text in a variable userPostObj.post_text

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

as above I use mat-card to display post.

Answer 1

use the <a> & </a> tags - these tags define a hyperlink.

Answer 2

Before you render the entire text, you have to wrap it with anchor tag <a> and add href property on it with text as its value.

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

Answer 3

You should use and pass url in href value like this:

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

Answer 4

I suggest you to use of regex to find and extract links from the text. and then put them inside a tag in your HTML or anywhere you want