無法修改錨元素的innerHTML

Question

我正在嘗試通過使用角度渲染器2的DOM操作添加一些樣式。

我可以更新所有anchor html元素的樣式。

例如，在下面的示例中，我試圖將“ www.url.com文本替換為“此World以錨定鏈接。

注意：僅嘗試更改文本，而不更改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開頭和結尾標記的內部信息。

然后，我將這些組（內部標簽）簡單地返回到< >並將值放在它們之間。