ng-parsed-text

parse text and make them in to multiple anchor tag or custom link

Usage no npm install needed!

<script type="module">
  import ngParsedText from 'https://cdn.skypack.dev/ng-parsed-text';
</script>

README

ng-parsed-text

This library is used to highlight url, email, phone that contains in the text to an anchor tag or custom link tag. By use of RegExp is used to higlight the text by default there are three patterns you can also define custom patterns and custom templates for styling the highlighted link tag.

Table of contents

Getting started

npm install --save ng-parsed-text

Then import the highlight module in your apps module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ParsedTextModule } from 'ng-parsed-text';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    ParsedTextModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Version dependency

ng-parsed-text Angular
0.1.0 4.x

Documentation

import { Component } from '@angular/core';
import {ParseType}  from 'ng-parsed-text';
@Component({
  selector: 'app-root',
  template: `
  <ng-parsed-text 
        class="parse-text"
        [parse]="parse"
        [text]="text"
        (trigger)="handleLink($event)"
    >
    </ng-parsed-text>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  text = 'Angular is a TypeScriped based web application framework you can check the offical docs at https://angular.io/  for latest Angular news and tips check the angular blog at https://blog.angular.io/. Follow @angular at twitter.';
  parse: ParseType[] = [{type: 'hashtag', pattern: /@(\w+)/, element: { tag: '<any>' }}];

  handleLink(event) {
    console.log(event);
  }
}

Input Binding

name description type
text text need to be parsed and highlighted string
parse Define RegExp pattern to highlight text check Parse properties Array

Parse properties

Matched text to be rendered in anchor <a> tag configure as

{
    type: 'email',
    pattern: /\S+@\S+\.\S+/,
    element: {
      tag: '<a>',
      attributes: {
        target: '_blank',
        displayText(link, $event) {
            // here you will get the matched url link for e.g (foo@gmail.com)
            // You can return what need to show in anchor tag textContent
          const result = link.match(/\w+/i);
          return result[0];
        },
        href(link, $event) {
          return `mailto:${link}`
        },
      },
    },
  }

For Custom link and templating see example stackblitz