在Angular中替换innerHTML不必要地关闭标签[重复]

Posted 2023-03-05

【中文标题】在Angular中替换innerHTML不必要地关闭标签[重复]

【英文标题】：Replacing innerHTML closes tag unnecessarily in Angular [duplicate]

【发布时间】：2020-03-08 14:00:59

【问题描述】：

我在 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;
    

【问题讨论】：

为什么不解释就投反对票？提出您认为类似的问题并不是投反对票的理由 (meta.stackexchange.com/questions/10841/…)，尤其是因为它是对所引用的类似问题的不同描述。

【参考方案1】：

根据网络浏览器，您的 HTML 格式不正确。

它不允许在<p> 标签内容中使用<div> 标签。