I am facing a challenge where I am unable to hand-code the <a> ... </a> due to the fact that the input is an unknown string.
To address this issue, I have devised the following solution:
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 replacement process functions as intended, however, the generated <a> ... </a> tags are unfortunately not clickable using this approach! This is because the <a> element is treated as plain text rather than an HTML hyperlink. As a result, users can see the links but are unable to interact with them by clicking.
How can this issue be rectified?