javascript - 如何检测 HTML 中的可点击链接

Question

我从后端的列表中得到响应，并将错误代码放入表格中，如图所示

这个解释字符串中有一个 URL，如您所见 www.google...我想让它可点击，但我做不到。

当我尝试使用以下代码用正则表达式替换链接时(我的表项模型对象是response: errorArray.slice(1, errorArray.length))；

const urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
        const errorArray = errorResponse.error.toString()
          .replace(/\[/g, "")
          .replace(/]/g, "")
          .replace(urlRegex, "<a href='$1' target='_blank' ></a>")
          .replace(/\.,/g, ".")
this.allUploadedPinsFiles.push({uploadDate: uploaded, fileName: file.name,
          status: status, responseHeader: errorArray[0], response: errorArray.slice(1, errorArray.length)});

变成了

它正在替换错误数组中的项目，但在 UI 中它仍然显示为文本。我怎样才能让它能够理解文本中的链接并使其可点击？

这是该列表的 html 代码:

<div *ngIf="upload.response.length > 0">
          <ul class="list-item">
            <li *ngFor="let singleResponce of upload.response">{{singleResponce}}</li>
          </ul>
        </div>

Answer 1

清理数据并传递给 html

this.sanitizer.bypassSecurityTrustHtml("<a href='www.google.com' target='_blank'>My Link</a>)

试试这个

Working link