英文:
How to detect clickable link in HTML
问题
I am getting a response in a list from backend and putting error codes to a table as in picture
This explanation string has a URL in it as you see www.google... I want to make it clickable but I cannot.
When I try to replace the link with regex with following codes (my model object for the table item is 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)});
It becomes
It is replacing item in the error array but in UI it still shows as a text. How can I make it that it can understand the link in a text and make it clickable?
and here is the html code for that list:
<div *ngIf="upload.response.length > 0"><ul class="list-item"><li *ngFor="let singleResponce of upload.response">{{singleResponce}}</li></ul></div>
英文:
I am getting a response in a list from backend and putting error codes to a table as in picture
This explanation string has a URL in it as you see www.google... I want to make it clickable but I cannot.
When I try to replace the link with regex with following codes (my model object for the table item is 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)});
It becomes
It is replacing item in the error array but in UI it still shows as a text. How can I make it that it can understand the link in a text and make it clickable?
and here is the html code for that list:
<div *ngIf="upload.response.length > 0"><ul class="list-item"><li *ngFor="let singleResponce of upload.response">{{singleResponce}}</li></ul></div>
答案1
得分: 1
将数据进行清理并传递给HTML：
this.sanitizer.bypassSecurityTrustHtml("<a href='www.google.com' target='_blank'>My Link</a>")
尝试这个：
英文:
Sanitize the data and pass to the html
this.sanitizer.bypassSecurityTrustHtml("<a href='www.google.com' target='_blank'>My Link</a>)
Try this
答案2
得分: 0
使用 innerHtml
<li *ngFor="let singleResponse of upload.response"><span [innerHtml]="singleResponse"></span></li>
英文:
Use innerHtml
<li *ngFor="let singleResponce of upload.response"><span [innerHtml]="singleResponce"</li>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论