替换innerHTML会在Angular中不必要地关闭标签

Question

我在Angular中有一个函数，该函数接收DOM内容并进行搜索和替换以注释特定的文本。问题是被替换的文本（使用innerHTML）过早关闭了标签。简单来说，它是在阅读：

}--><p _ngcontent-atr-c1="" class="paragraph-body ng-star-inserted"><div>Blah blah</div></p><!--bindings={

并且认为<p>没有关闭并且</p>没有打开，所以innerHTML不适当地像这样自动关闭和打开标签：

}--><p _ngcontent-atr-c1="" class="paragraph-body ng-star-inserted"></p><div>Blah blah</div><p></p><!--bindings={

我该如何解决？

我的函数（它将寻找要替换的searchTerm的大小写变体：：

startSearch(searchTerm: string) {
    const content = document.getElementById('chapter').children;
    const regexLower = new RegExp(`${searchTerm.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')}`, 'g');
    const regexUpper = new RegExp(`${searchTerm.toUpperCase().replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')}`, 'g');
    const regexCapitalized = new RegExp(
      `${searchTerm.replace(/^\w/,
      c => c.toUpperCase()).replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')}`, 'g'
    );
    for (let i = 0; i < content.length; i++) {
      const block = content[i].innerHTML;
      block.replace(regexLower, `<span class="highlight">${searchTerm.toLowerCase()}</span>`);
      block.replace(regexUpper, `<span class="highlight">${searchTerm.toUpperCase()}</span>`);
      block.replace(regexCapitalized, `<span class="highlight">${searchTerm.replace(/^\w/, c => c.toUpperCase())}</span>`);
      content[i].innerHTML = block;
    }
}

Answer 1

根据网络浏览器，您的HTML格式有误。

不允许在<div>标签内容中包含<p>标签。