如何在没有 [innerHTML] 的情况下显示一个段落的链接

编程问答 2022-05-02

问题描述

我有一个用 html 链接替换文本链接的管道，我将链接放在一个带有 [innerHtml] 的段落中。 innerHTML 的问题在于，如果有人输入诸如“a”的内容，它后面的所有文本都不会显示

这是管道：

导出类 GenerateLinksPipe 实现 PipeTransform { transform(value: string,aClass?:string ): string {

// http://,https://,ftp://
const urlPattern = /\b(?:https?|ftp):\/\/[()a-z0-9-+*&@+#\/%?=+_~_|!:,.;]*[a-z0-9-+&@#\/%=_~_|]/gim;

// www. sans http:// or https://
var pseudoUrlPattern = /(^|[^\/])(www\.[\S]+(\b|$))/gim;

// Email addresses
var emailAddresspattern = /^[a-zA-Z0-9.!#$%&'*+=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*/;

return value
  .replace(urlPattern,`<a href="$&" target="_blank">$&</a>`)
  .replace(pseudoUrlPattern,`$1<a href="http://$2" target="_blank">$2</a>`)
  .replace(emailAddresspattern,`<a href="mailto:$&" target="_blank" >$&</a>`);

} }

我需要一种方法来显示段落中的链接，但能够毫无问题地使用“”字符。

解决方法

使用 Angular 时生成 HTML 的方法是错误的。 Angular 背后的整个想法是，您不再考虑“如何操作 HTML”；相反，我们有一个模型，我们定义了这个模型如何映射到视图——这是您的 Angular 模板。

而不是对字符串进行操作并获取HTML

foo www.bar.com baz    =>    foo <a href="#">bar</a> baz

您应该执行一个操作，为您提供文本的模型。

foo www.bar.com baz   =>   [ { type: 'text',value: 'foo ' },{ type: 'link',href: '#',value: 'www.baz.com' },{ type: 'text',value: ' baz' } ]

客观上这是一种更好的方法，因为它将您的业务逻辑（什么是链接？）与表示/视图层（我想如何表示它）分开。您现在可以构建 HTML、XHTML、Markdown 或任何您想要的内容。它还可以避免您所描述的问题（如果字符串已经包含特定于 HTML 的字符怎么办）。

这里您需要的是一个基于此模型的 Angular 模板。请注意，Angular 模板不是 HTML！当您在 Angular 中编写模板时，编译器 (ngc) 会将该字符串（您的模板）转换为一系列操作 DOM 的 JavaScript 函数。

要创建您需要的内容，您可以执行以下操作。

<ng-container *ngFor="let chunk of parsedData">
  <ng-container [ngSwitch]="chunk.type">
    <ng-container *ngSwitchCase="'text'">{{ chunk.value }}</ng-container>
    <a *ngSwitchCase="'link'" [href]="chunk.href">{{ chunk.value }}</a>
  </ng-container>
</ng-container>
angularangularhtmljavascriptpipetypescripttypescripttypescript