Angular中innerHTML无法剥离HTML元素，如何保留文本与链接？

直接使用[innerHTML]无法剥离指定HTML标签，是因为它仅负责将字符串解析为DOM元素，不会主动过滤或移除现有标签结构。要实现保留文本和可点击<a>标签、移除<p>/<br>等冗余结构的需求，可以通过自定义管道处理HTML字符串：

1. 创建自定义管道StripTagsPipe #

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'stripTags'
})
export class StripTagsPipe implements PipeTransform {
  transform(html: string): string {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    
    const processNodes = (node: Node): Node => {
      if (node.nodeType === Node.ELEMENT_NODE) {
        const elem = node as HTMLElement;
        // 仅保留<a>标签，复制其所有属性和内容
        if (elem.tagName.toLowerCase() === 'a') {
          const newAnchor = document.createElement('a');
          Array.from(elem.attributes).forEach(attr => {
            newAnchor.setAttribute(attr.name, attr.value);
          });
          newAnchor.textContent = elem.textContent;
          return newAnchor;
        } else {
          // 其他元素只保留文本内容
          return document.createTextNode(elem.textContent || '');
        }
      }
      // 文本节点直接返回
      return node;
    };

    // 遍历所有子节点处理
    const processedNodes = Array.from(doc.body.childNodes).map(processNodes);
    const tempContainer = document.createElement('div');
    processedNodes.forEach(node => tempContainer.appendChild(node));
    
    return tempContainer.innerHTML;
  }
}

2. 在模块中注册管道 #

import { NgModule } from '@angular/core';
import { StripTagsPipe } from './strip-tags.pipe';

@NgModule({
  declarations: [StripTagsPipe],
  exports: [StripTagsPipe]
})
export class PipesModule { }

3. 在模板中使用管道 #

将原始字符串通过管道处理后，再绑定到[innerHTML]：

<div [innerHTML]="str | stripTags"></div>

方案说明 #

• 采用DOMParser解析HTML，比正则表达式更可靠，能避免嵌套标签、复杂属性等场景下的解析错误
• 完整保留<a>标签的href、target、rel等属性，确保链接可正常点击
• 移除<p>、<br>等冗余标签，仅保留其内部文本内容

内容的提问来源于stack exchange，提问作者Alia