[英]How can I split a string into an array of elements that are and aren't links?
I can't find a good solution for my problem.我找不到解决问题的好方法。 So I have to create a view that is wrapped by clickable div.
所以我必须创建一个由可点击 div 包裹的视图。 My content will be just plain text mixed with URLs that are clickable - the problem is that click on link also triggers method of wrapping div - this is unwanted behaviour so I have to add
event.stopPropagation()
on <a>
element.我的内容将只是纯文本与可点击的 URL 混合 - 问题是点击链接也会触发包装 div 的方法 - 这是不需要的行为,所以我必须在
<a>
元素上添加event.stopPropagation()
。
This solution doesn't work (there is no way to handle click in the component, it just doesn't work - it takes everything I pass for (click)=....
as string even when I use ${ }
):该解决方案不起作用(无法处理组件中的点击,它只是不起作用 - 即使我使用
${ }
,它也会将我传递给(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>';
});
}
}
So my idea is to create component with text input.所以我的想法是创建带有文本输入的组件。 On init I want to split text like this:
在初始化时,我想像这样拆分文本:
Example text: 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.
Wanted array:想要的数组:
[
"Lorem Ipsum is simply dummy text ",
"www.wykop.pl ",
"of the printing and typesetting industry "
"https://sadistic.pl"
"."
]
And then in the html I want to use ngFor
and ngCase
to create proper element and then I could easily add stopPropagation for <a>
element.然后在 html 中,我想使用
ngFor
和ngCase
创建适当的元素,然后我可以轻松地为<a>
元素添加 stopPropagation。 Can someone help me how to split text in this way?有人可以帮助我如何以这种方式拆分文本吗? Or maybe you have other ideas for my problem?
或者,也许您对我的问题有其他想法?
I think you might use split method with regexp and keep delimiter:我认为您可能会使用带有正则表达式的拆分方法并保留分隔符:
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 little bit modified you regexp PS稍微修改了你的正则表达式
You can use onclick
directly on element <a>
to prevent propagation:您可以直接在元素
<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);
}
}
example: StackBlitz示例: 堆栈闪电战
or you can implement witch structural directives something like this:或者你可以实现类似这样的女巫结构指令:
<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, like this?) (@Yan Koshelev,像这样吗?)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.