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 => {

    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 => {

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

});

console.log(content)