I am working on an application where user can add comments to certain fields. these comments can also be links. So, as a user I want to be able to click on those links rather than copy pasting them in a new tab.

If a normal web link ([http://|http:]... or [https://|https:]...) occurs in a comment/attribute value, it should be presented as a clickable link.
Multiple links may occur in the same comment/attribute value.
Clicking on a link opens a new browser tab that calls up this link.

This is how the formControl is being managed. I think i can identify multiply links with the help of regex but how do I make them clickable as well?

Thanks for answering and helping in advance.

this.formControl = new FormControl('', [this.params.customValidations(this.params)]);
    this.formControl.valueChanges.subscribe(() => {
      this.sendStatusToServices();
    });

CodePudding user response：

Outside the form editor/input (most likely what you're looking for)

Either before saving the value of the Form Field to the Database, or editing the received body from the database just before presenting to the user, you can use Regex to replace links with anchor tags.

function replaceURLWithHTMLLinks(text) {
    var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9 &@#\/%?=~_|!:,.;]*[-A-Z0-9 &@#\/%=~_|])/ig;
    return text.replace(exp,"<a href='$1'>$1</a>"); 
}

Rich text editor

If however, you're trying to enable links INSIDE the form input (like WordPress's text editor), that's going to be a bit more difficult. You'll need a <textarea> to enable custom HTML elements. Then you need to detect when the user has typed a URL, so you can call replaceURLWithHTMLLinks(). Honestly, you should just use a package. There's several good one out there.

Hope this helps

CodePudding user response：

Using a regex approach and a pipe I was able to come up with something like below. What I'm doing is replacing the links with hyperlink tags using a proper regex.

url replacement regex is taken from here

Supports multiple links within same comment.

Here is the sample pipe code

@Pipe({
  name: 'comment'
})
export class CommentPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer){}

  transform(value: any, args?: any): any {
    const replacedValue = this.linkify(value);
    return this.sanitizer.bypassSecurityTrustHtml(replacedValue)
  }

  // https://stackoverflow.com/questions/37684/how-to-replace-plain-urls-with-links#21925491
  // this method is taken from above answer
  linkify(inputText: string) {
    var replacedText, replacePattern1, replacePattern2, replacePattern3;

    //URLs starting with http://, https://, or ftp://
    replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9 &@#\/%?=~_|!:,.;]*[-A-Z0-9 &@#\/%=~_|])/gim;
    replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');

    //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
    replacePattern2 = /(^|[^\/])(www\.[\S] (\b|$))/gim;
    replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');

    //Change email addresses to mailto:: links.
    replacePattern3 = /(([a-zA-Z0-9\-\_\.]) @[a-zA-Z\_] ?(\.[a-zA-Z]{2,6}) )/gim;
    replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');

    return replacedText;
  }

}

Here is the completed stackblitz

If you want links within Input itself you might want to try different approach