I cannot hand-code the <a> ... </a>
since the input is a not known string.
I came up with this:
HTMLFormattingService:
makeLinksClickable(inp: string): string { const regex = /((([A-Za-z]{3,9}:(?://)?)(?:[-;:&=+$,w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,w]+@)[A-Za-z0-9.-]+)((?:/[+~%/.w-_]*)???(?:[-+=&;%@.w_]*)#?(?:[w]*))?)/ig return inp.replace(regex, '<a href="$1" target="_blank">$1</a>'); }
HTML:
<div> {{myObject ? this.myService.makeLinksClickable(myObject.text) : ""}} </div>
The replacing works, but the <a> ... </a>
is NOT clickable with this method! That is because <a>
not treated as a HTML element but just as text. So the users see the <a>
and </a>
and cannot click the link.
How can I fix this?
Advertisement
Answer
Keep it simple?
<div [innerHTML]="myObject ? this.myService.makeLinksClickable(myObject.text) : ''"> </div>