时间戳

首页 > 解决方案 > 如何在没有 [innerHTML] 的情况下显示段落中的链接

javascript - 如何在没有 [innerHTML] 的情况下显示段落中的链接

问题描述

我有一个用 html 链接替换文本链接的管道，我将链接放在带有 [innerHtml] 的段落中。innerHTML 的问题在于，如果有人键入诸如“a<b?”之类的内容。或包含字符“<”或“>”的任何内容，其后面的所有文本都不会显示

< p [innerHTML]="text | generateLinksPipe">

这是管道：

导出类 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>`);

} }

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

标签： javascripthtmlangulartypescriptpipe

解决方案

使用 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>

推荐阅读