Typescript：用 id 属性替换字符串并附加 HTML 标签

Question

我需要将字符串替换为 HTML 标记并具有 id 属性。

这是我的代码，TS 文件：

let content = "this is a car.";

content.replace(new RegExp('car'), match => {

    return `<span class="highlight-text" id="car"> + match +</span>`;

});

<div [innerHTML]="content"></div>

在检查元素时它仅显示类，

<div>

    <span class="highlight-text">car</span>

</div>

为什么它没有在span标签中添加ID属性？

Answer 1

id 字段在 DOM 清理过程中被 Angular 消除。要在innerHTML中添加id字段，您必须明确告诉Angular，解析此HTML内容是安全的。您可以通过以下方式实现：let oldContent = "this is a car.";oldContent.replace(new RegExp('car'), match => {&nbsp; &nbsp; return `<span class="highlight-text" id="car"> + match +</span>`;});let content = this.sanitizer.bypassSecurityTrustHtml(content)其中，sanitizer 是 DOMSanitizer 的实例，应将其注入构造函数中。constructor(private sanitizer: DomSanitizer) { }

Answer 2

替换返回修改后的内容。let content = "this is a car.";content = content.replace(new RegExp('car'), match => {&nbsp; &nbsp; return `<span class="highlight-text" id="car">${match}</span>`;});console.log(content)