HTML：如何使文本中的 URL 可點擊？

Question

我無法手動編碼<a>... </a>因為輸入是未知字符串。

我想出了這個：

HTML格式服務：

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>

替換有效，但<a>... </a>無法使用此方法點擊！ 這是因為<a>不被視為 HTML 元素，而只是被視為文本。 所以用戶看到了<a>和</a>並且不能點擊鏈接。

我怎樣才能解決這個問題？

Answer 1

把事情簡單化？

<div [innerHTML]="myObject ? this.myService.makeLinksClickable(myObject.text) : ''">
</div>

Answer 2

嘗試設置相關元素的 innerHtml：

document.getElementById("myDiv").innerHTML=makeLinksClickable(myUrl);