How can I split a string into an array of elements that are and aren't links?

Question

I can't find a good solution for my problem. So I have to create a view that is wrapped by clickable div. My content will be just plain text mixed with URLs that are clickable - the problem is that click on link also triggers method of wrapping div - this is unwanted behaviour so I have to add event.stopPropagation() on <a> element.

This solution doesn't work (there is no way to handle click in the component, it just doesn't work - it takes everything I pass for (click)=.... as string even when I use ${ } ):

@Pipe({
  name: 'urlify'
})
export class UrlifyPipe implements PipeTransform {
  transform(text: any): any {
    const urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z\d+&@#/%?=~_|!:,.;]*[-A-Z\d+&@#/%=~_|])/ig;

    return text.replace(urlRegex, (url) => {
      return '<a href="' + url + '">' + url + '</a>';
    });
  }
}

So my idea is to create component with text input. On init I want to split text like this:

Example text: Lorem Ipsum is simply dummy text www.wykop.pl of the printing and typesetting industry https://sadistic.pl.

Wanted array:

[
"Lorem Ipsum is simply dummy text ",
"www.wykop.pl ",
"of the printing and typesetting industry "
"https://sadistic.pl"
"."
]

And then in the html I want to use ngFor and ngCase to create proper element and then I could easily add stopPropagation for <a> element. Can someone help me how to split text in this way? Or maybe you have other ideas for my problem?

Answer 1

I think you might use split method with regexp and keep delimiter:

 const text = 'Lorem Ipsum is simply dummy text www.wykop.pl of the printing and typesetting industry https://sadistic.pl.'; const urlRegex = /([https?|ftp|file|]+[:\/\/]+[-AZ\d+&@#/%?=~_|!:,.;]*[-AZ\d+&@#/%=~_|]|[www][-AZ\d+&@#/%?=~_|!:,.;]*[-AZ\d+&@#/%=~_|])/gi; const result = text.split(urlRegex); console.log(result);

PS a little bit modified you regexp

Answer 2

You can use onclick directly on element <a> to prevent propagation:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<div (click)="wrap()" [innerHtml]="text | urlify"></div>`,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  text = 'Lorem Ipsum is simply dummy text www.wykop.pl of the printing and typesetting industry https://google.com';

  wrap() {
    console.log('wrap click');
  }
}

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({
  name: 'urlify',
})
export class UrlifyPipe implements PipeTransform {
  constructor(private _sanitizer: DomSanitizer) {}

  transform(value: any, args?: any): SafeHtml {
    const urlRegex =
      /(\b(https?|ftp|file):\/\/[-A-Z\d+&@#/%?=~_|!:,.;]*[-A-Z\d+&@#/%=~_|])/gi;

    const html = value.replace(
      urlRegex,
      (url) => `<a href="#${url}" onclick="event.stopPropagation();">${url}</a>`
    );

    return this._sanitizer.bypassSecurityTrustHtml(html);
  }
}

example: StackBlitz

or you can implement witch structural directives something like this:

<app-text [text]="text">
  <ng-template *appHref="let href">
    <a [href]="href" (click)="$event.stopPropagation()">{{ href }}</a>
  </ng-template>

  <ng-template *appText="let text">
    <span>{{ text }}</span>
  </ng-template>
</app-text>

(@Yan Koshelev, like this?)