Insert anchor tag in string variable

Question

I am trying to insert an anchor tag in a string variable. The string will be shown on screen as a link, but it seems to ignore the anchor tag, and only including the value inside the tag. example something turns to just 'something'

private generateAnchors(content: string) {
    let contentToReturn = content;
    if (content.indexOf('@') < 0) return contentToReturn;
    else if (content.indexOf('@') > -1) {
        let tag = content.substring(content.indexOf('@'), content.indexOf(' ', content.indexOf('@')));
        let address = tag.substring(1, tag.length);
        let anchor = '<a href="/home/user/"'+address+'>'+tag+'</a>';
        console.log('found substr: '+tag, ' '+address+' '+anchor);
        contentToReturn.replace(tag, anchor);
        console.log('final string: '+contentToReturn);
    }
    return contentToReturn;
}

How is this done in Angular/TypeScript ?

`else if (content.indexOf('@') > -1)`, `else` works too, no need to search again. — Adrien Brunelat, Jan 25 '18 at 15:52
See here: https://stackoverflow.com/questions/48412229/angular-replace-html-content-with-a-link-to-a-page-fragment/48412661#48412661 — joh04667, Jan 25 '18 at 15:52
Generating HTML is the job of the template, not the job of the component. — JB Nizet, Jan 25 '18 at 15:54

Adrien Brunelat · Accepted Answer · 2018-01-25T16:15:46.623

Did you try to replace:

contentToReturn.replace(tag, anchor);

with:

contentToReturn = contentToReturn.replace(tag, anchor);

String.replace doesn't change your string since it's immutable, it just returns a new one with the replacement done.

Angular Templating

Apart from this little issue, you should consider using Angular's templating mechanics. You should read the documentation to learn this but I'll try to give you an example that fits your particular case.

You'd have one links.component.html file with:

<a href="/home/user/{{address}}">{{tag}}</a>

Or maybe a loop if you need several of them:

<div *ngFor="let link in links">
  <a href="/home/user/{{link.address}}">{{link.tag}}</a>
</div>

And a corresponding links.component.ts with the corresponding elements:

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

@Component({
  selector?: "app-links-component"
  templateUrl: "links.component.html"
})
export class LinksComponent {
  address: string;
  tag: string;

  constructor() {}

  // ts logic to fill address/tag information
}

Or an array in the second case:

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

@Component({
  selector?: "app-links-component"
  templateUrl: "links.component.html"
})
export class LinksComponent {
  links: Link[] = [];

  constructor() {}

  generateAnchors(address: string, tag: string) {
    // You can bind this method to a form submit or something.
    this.links.push(new Link(address, tag));
  }
}

N.B.: Since this is all written by heart, there might be typos here and there...

Insert anchor tag in string variable

1 Answers1

Angular Templating