无法修改锚元素的 innerHTML

Question

我正在尝试使用 angular renderer2 通过 DOM 操作添加一些样式。

我可以更新 anchor 期望的所有 html 元素的样式。

在下面的例子中，我试图用这个 World 替换这个文本 www.url.com 到一个锚链接。

注意：仅尝试更改文本，而不是 href

  styleList = [
    {
      ori: 'www.url.com',
      replace: 'World'
    }
  ];

当我检查 <a href="wWorld">www.url.com</a> 时，replace 文本被添加到 href。

所以预期的输出应该是<a href="wwww.url.com">World</a>

为什么这只发生在anchor标签上？

下面是更新DOM的函数

styleList.forEach(styleItem => {
  for (const childNode of childNodes) {
    renderer.setProperty(childNode, 'innerHTML', childNode.innerHTML.replace(styleItem.ori, styleItem.replace));
  }
});

您可以查看此stackblitz 链接以供参考。

请帮忙。

Answer 1

这是我取得的成就 https://stackblitz.com/edit/angular-mdhle9?file=src/app/style.service.ts

我做的主要事情是更改您的服务以使用 RegExp 组

for (const childNode of childNodes) {
   const regex = new RegExp('<(.*)>' + styleItem.ori + '<(.*)>')

   renderer.setProperty(childNode, 'innerHTML', childNode.innerHTML.replace(regex, '<$1>' + styleItem.replace + '<$2>'));
}

在这里我创建了两个匹配的组，它们将复制 HTML 开始和结束标记的内部。

然后我只需将这些组（内部标签）返回到 < > 并将值放在它们之间。