无法修改锚元素的 innerHTML

Question

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

我可以为 anchor.

之外的所有 html 元素更新样式

在下面的示例中，我正在尝试将此文本 www.url.com 替换为此 World 到锚 link.

注意：仅尝试更改文本，而不是 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 link以供参考。

请帮忙。

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, '<>' + styleItem.replace + '<>'));
}

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

然后我简单地 return 这些组（内部标签）回到 < > 并将值放在它们之间。

无法修改锚元素的 innerHTML

Unable to modify innerHTML for anchor element

html

javascript

renderer

typescript

angular