[英]How can I split a string into an array of elements that are and aren't links?
我找不到解决问题的好方法。 所以我必须创建一个由可点击 div 包裹的视图。 我的内容将只是纯文本与可点击的 URL 混合 - 问题是点击链接也会触发包装 div 的方法 - 这是不需要的行为,所以我必须在<a>
元素上添加event.stopPropagation()
。
该解决方案不起作用(无法处理组件中的点击,它只是不起作用 - 即使我使用${ }
,它也会将我传递给(click)=....
的所有内容都作为字符串):
@Pipe({
name: 'urlify'
})
export class UrlifyPipe implements PipeTransform {
transform(text: any): any {
const urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z\d+&@#/%?=~_|!:,.;]*[-A-Z\d+&@#/%=~_|])/ig;
return text.replace(urlRegex, (url) => {
return '<a href="' + url + '">' + url + '</a>';
});
}
}
所以我的想法是创建带有文本输入的组件。 在初始化时,我想像这样拆分文本:
示例文本: Lorem Ipsum is simply dummy text www.wykop.pl of the printing and typesetting industry https://sadistic.pl.
想要的数组:
[
"Lorem Ipsum is simply dummy text ",
"www.wykop.pl ",
"of the printing and typesetting industry "
"https://sadistic.pl"
"."
]
然后在 html 中,我想使用ngFor
和ngCase
创建适当的元素,然后我可以轻松地为<a>
元素添加 stopPropagation。 有人可以帮助我如何以这种方式拆分文本吗? 或者,也许您对我的问题有其他想法?
我认为您可能会使用带有正则表达式的拆分方法并保留分隔符:
const text = 'Lorem Ipsum is simply dummy text www.wykop.pl of the printing and typesetting industry https://sadistic.pl.'; const urlRegex = /([https?|ftp|file|]+[:\/\/]+[-AZ\d+&@#/%?=~_|!:,.;]*[-AZ\d+&@#/%=~_|]|[www][-AZ\d+&@#/%?=~_|!:,.;]*[-AZ\d+&@#/%=~_|])/gi; const result = text.split(urlRegex); console.log(result);
PS稍微修改了你的正则表达式
您可以直接在元素<a>
上使用onclick
来防止传播:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `<div (click)="wrap()" [innerHtml]="text | urlify"></div>`,
styleUrls: ['./app.component.css'],
})
export class AppComponent {
text = 'Lorem Ipsum is simply dummy text www.wykop.pl of the printing and typesetting industry https://google.com';
wrap() {
console.log('wrap click');
}
}
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Pipe({
name: 'urlify',
})
export class UrlifyPipe implements PipeTransform {
constructor(private _sanitizer: DomSanitizer) {}
transform(value: any, args?: any): SafeHtml {
const urlRegex =
/(\b(https?|ftp|file):\/\/[-A-Z\d+&@#/%?=~_|!:,.;]*[-A-Z\d+&@#/%=~_|])/gi;
const html = value.replace(
urlRegex,
(url) => `<a href="#${url}" onclick="event.stopPropagation();">${url}</a>`
);
return this._sanitizer.bypassSecurityTrustHtml(html);
}
}
示例: 堆栈闪电战
或者你可以实现类似这样的女巫结构指令:
<app-text [text]="text">
<ng-template *appHref="let href">
<a [href]="href" (click)="$event.stopPropagation()">{{ href }}</a>
</ng-template>
<ng-template *appText="let text">
<span>{{ text }}</span>
</ng-template>
</app-text>
(@Yan Koshelev,像这样吗?)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.