У меня иногда есть компонент, который может получать текст следующим образом:
текст www.website.com
Но я хотел бы преобразовать его в URL-адрес, если это ссылка. Вот так.
текст www.website.com
Я прочитал этот SO ответ, который предлагает использовать сторонние библиотеки, такие как anchorme. Есть ли способ сделать это способом angular2?
Существует множество проблем с использованием простых регулярных выражений для изменения содержимого HTML.
Здесь используется подход, который использует модуль linkifyjs, который вам нужен npm install. Обратите внимание, что вход считается открытым текстом, а вывод - HTML-текстом.
import { Pipe, PipeTransform } from '@angular/core';
import linkifyStr from 'linkifyjs/string';
@Pipe({name: 'linkify'})
export class LinkifyPipe implements PipeTransform {
transform(str: string): string {
return str ? linkifyStr(str, {target: '_system'}) : str;
}
}
Примечание. Если вам нужно указать атрибуты target, добавьте, например. {target: '_system'} как второй параметр linkifyStr.
Итак, чтобы сделать трубу, вы создали бы компонент трубы, состоящий из
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'linkify'})
export class LinkifyPipe implements PipeTransform {
transform(link: string): string {
return this.linkify(link);
}
private linkify(plainText): string{
let replacedText;
let replacePattern1;
let replacePattern2;
let replacePattern3;
//URLs starting with http://, https://, or ftp://
replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
replacedText = plainText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');
//URLs starting with "www." (without // before it, or it'd re-link the ones done above).
replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');
//Change email addresses to mailto:: links.
replacePattern3 = /(([a-zA-Z0-9\-\_\.])[email protected][a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');
return replacedText;
}
}
затем импортируйте это, как и директива u, передайте ее
pipes: [LinkifyPipe]
и интерполировать таким образом
{{url | linkify}}
вы должны использовать этот канал таким образом:
<div [innerHtml]="note.title | linkify"></div>
Хорошо, вот как я это сделал, оставив ответ, надеюсь, что это поможет кому-то другому:
Итак, я использую функцию, чтобы связать текст плагина
private linkify(plainText): string{
let replacedText;
let replacePattern1;
let replacePattern2;
let replacePattern3;
//URLs starting with http://, https://, or ftp://
replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
replacedText = plainText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');
//URLs starting with "www." (without // before it, or it'd re-link the ones done above).
replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');
//Change email addresses to mailto:: links.
replacePattern3 = /(([a-zA-Z0-9\-\_\.])[email protected][a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');
return replacedText;
}
Но это возвращает строку с кодировкой html, поэтому, если я использую ее с <p>{{example}}</p>, она вернет полную кодировку (введя метки привязки и html).
Итак, теперь я использую angular2 встроенную привязку html:
Это дает мне решение
Вы должны проверить angular -linky https://github.com/dzonatan/angular-linky
<span [innerHTML]="yourText | linky"></span>
Я искал решение, но безрезультатно. Мне нужно было выполнить требование обработки Angular маршрутизации [routerLink] и внешних ссылок с помощью [innerHTML] без необходимости использования сторонних библиотек.
Мое решение (сводка):
Angular 2, Angular 5 - Пользовательский клик по событиям/обработке событий для динамического [innerHTML] сгенерированного контента с использованием pipe и директивы для генерации и преобразования обычного текста для URL-адресов кликов, например: #hashtags, @Handle, @Mention, #routerLink #href и #mailto и т.д.
Демо-версия Plunker: https://embed.plnkr.co/68lZFY/
AppComponent
import { Component, NgModule, VERSION} from '@angular/core';
import { BrowserModule} from '@angular/platform-browser';
@Component({
selector: 'my-app',
template: `<h1>Angular - Dynamic content click event</h1>
<p>Angular 2, Angular 5, Typescript - User click events/event handling for dynamic [innerHTML] generated content using pipe and directive to generate and converting plain text to click urls e.g #hashtags, @Handle, @Mention, #routerLink #href and #mailto etc</p>
<ul>
<li *ngFor="let item of theList; let $index=index;" [innerHTML]="item | parseUrl" [dynamicContent]="currentView"></li>
<ul>`
})
export class AppComponent {
theList:Array;
constructor() {
this.theList = [
'Lorem ipsum dolor sit amet, consectetur @adet dolore magna aliqua. Ut enim ad minim veniam',
'Lorem ipsum dolor sit amet, consectetur adipiscing http://google.com sed do eiusmod tempor #incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam',
'Lorem http://google.com ipsum dolor #sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt gna aliqua. Ut enim ad minim veniam',
'Lorem ipsum @dolor sit amet, consectetur @adipiscing elit, sed do eiusmod @tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam',
'Lorem ipsum dolor sit amet, smod tempor incididunt #ut labore et dolore @magna #aliqua. Ut enim ad minim veniam',
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam',
'Lorem ipsum @dolor sit amet, #consectetur adipiscing elit, sed do eiusmod tempor http://google.com enim ad minim veniam'
];
}
}
Директива
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[dynamicContent]'
})
export class DynamicContent {
constructor(private el: ElementRef) { }
@Input('dynamicContent') dynamicContent: string;
@HostListener('click', ['$event']) onClick(e) {
if (e.target.classList.contains('handle-link')) {
let link: string = e.target.innerHTML;
event.preventDefault();
event.stopPropagation();
alert("/search/handle/" + link.trim());
//this.router.navigateByUrl("/search/handle/" + link.trim(), { skipLocationChange: false });
} else if (e.target.classList.contains('hashtag-link')) {
let link: string = e.target.innerHTML;
event.preventDefault();
event.stopPropagation();
alert("/search/hashtag/" + link.trim());
//this.router.navigateByUrl("/search/hashtag/" + link.trim(), { skipLocationChange: false });
}
}
}
Труба
export class ParseUrl implements PipeTransform {
urls: any = /(\b(https?|http|ftp|ftps|Https|rtsp|Rtsp):\/\/[A-Z0-9+&@#\/%?=~_|!:,.;-]*[-A-Z0-9+&@#\/%=~_|])/gim; // Find/Replace URL in text
hashtags: any = /(^|\s)(#[a-z\d][\w-]*)/ig; // Find/Replace #hashtags in text
mentions: any = /(^|\s)(@[a-z\d][\w-]*)/ig; // Find/Replace @Handle/Mentions in text
emails: any = /(\[email protected]\S+\.\S+)/gim; // Find/Replace email addresses in text
transform(text: string) {
return this.parseUrl(text);
}
private parseUrl(text: string) {
// Find/Replace URL in text
if (text.match(this.urls)) {
text = text.replace(this.urls, function replacer($1, $2, $3) {
let url: any = $1;
let urlClean: any = url.replace("" + $3 + "://", "");
return "<a href=\"" + url + "\" target=\"_blank\">" + urlClean + "</a>";
});
}
// Find/Replace @Handle/Mentions in text
if (text.match(this.hashtags)) {
text = text.replace(this.hashtags, "<a href=\"/search/hashtag/$2\" class=\"hashtag-link\">$1$2</a>");
}
// Find/Replace #hashtags in text
if (text.match(this.mentions)) {
text = text.replace(this.mentions, "<a href=\"/search/handle/$2\" class=\"handle-link\">$1$2</a>");
}
// Find/Replace email addresses in text
if (text.match(this.emails)) {
text = text.replace(this.emails, "<a href=\"mailto:$1\">$1</a>");
}
return text;
}
}