Skip to content
Permalink
Browse files
fix(value): fix linkify pipe (DEV-270) (#602)
* fix(value): fix linkify pipe (DEV-270)

* test(value): fix linkify tests
  • Loading branch information
kilchenmann committed Dec 8, 2021
1 parent 9bb63d7 commit f2c8d7a57811c8eb7b1989a534d6e27f2955f984
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 43 deletions.
@@ -13,10 +13,10 @@ describe('LinkifyPipe', () => {
expect(pipe).toBeTruthy();
});

it('should recognize the url without protocol but with hashtag at the end', () => {
it('should not recognize the url if protocol does not exist', () => {
const text = 'You can visit the app on app.dasch.swiss/#';
const linkifiedSnippet = pipe.transform(text);
expect(linkifiedSnippet).toEqual('You can visit the app on <a href="http://app.dasch.swiss/#" target="_blank">app.dasch.swiss/#</a>');
expect(linkifiedSnippet).toEqual('You can visit the app on app.dasch.swiss/#');
});

it('should recognize the url with protocol followed by full stop', () => {
@@ -26,14 +26,14 @@ describe('LinkifyPipe', () => {
});

it('should recognize both urls in the example text', () => {
const text = 'You can visit the app on https://app.dasch.swiss and the documentation on docs.dasch.swiss.';
const text = 'You can visit the app on https://app.dasch.swiss and the documentation on https://docs.dasch.swiss.';
const linkifiedSnippet = pipe.transform(text);
expect(linkifiedSnippet).toEqual('You can visit the app on <a href="https://app.dasch.swiss" target="_blank">https://app.dasch.swiss</a> and the documentation on <a href="http://docs.dasch.swiss" target="_blank">docs.dasch.swiss</a>.');
expect(linkifiedSnippet).toEqual('You can visit the app on <a href="https://app.dasch.swiss" target="_blank">https://app.dasch.swiss</a> and the documentation on <a href="https://docs.dasch.swiss" target="_blank">https://docs.dasch.swiss</a>.');
});

it('should keep the spaces after a full stop or after a comma', () => {
const text = 'This is just a title. And it could have an URL, but it doesn\'t have one. ';
const linkifiedSnippet = pipe.transform(text);
expect(linkifiedSnippet).toEqual('This is just a title. And it could have an URL, but it doesn\'t have one.');
expect(linkifiedSnippet).toEqual('This is just a title. And it could have an URL, but it doesn\'t have one. ');
});
});
@@ -1,5 +1,5 @@
import { Pipe, PipeTransform } from '@angular/core';

import { CustomRegex } from 'src/app/workspace/resource/values/custom-regex';
/**
* this pipe analyses a string and converts any url into a href tag
*
@@ -10,48 +10,18 @@ import { Pipe, PipeTransform } from '@angular/core';
export class LinkifyPipe implements PipeTransform {

transform(value: string): string {
let stylizedText = '';
if (value && value.length > 0) {
for (let str of value.split(' ')) {
// if string/url ends with a full stop '.' or colon ':' or comma ',' or semicolon ';' the pipe will not recognize the url
const lastChar = str.substring(str.length - 1);
const endsWithFullStop = (lastChar === '.' || lastChar === ':' || lastChar === ',' || lastChar === ';');
let end = ' ';
if (endsWithFullStop) {
str = str.slice(0, -1);
end = lastChar + ' ';
}
if (this._recognizeUrl(str)) {
const url = this._setProtocol(str);
stylizedText += `<a href="${url}" target="_blank">${str}</a>${end}`;
} else {
stylizedText += str + end;
}
const match = value.match(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig);
let final = value;
if (match) {
match.map(url=>{
final = final.replace(url,`<a href="${url}" target="_blank">${url}</a>`);
});
}
return stylizedText.trim();
return final;
} else {
return value;
}
}

private _recognizeUrl(str: string): boolean {
const pattern = new RegExp(
'^(https?:\\/\\/)?' + // protocol
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
'((\\d{1,3}\\.){3}\\d{1,3}))' + // oR ip (v4) address
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
'(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
'(\\#[-a-z\\d_]*)?$',
'i'
); // fragment locator
return pattern.test(str);
}

private _setProtocol(url: string): string {
if (!/^(?:f|ht)tps?\:\/\//.test(url)) {
url = 'http://' + url;
}
return url;
}

}

0 comments on commit f2c8d7a

Please sign in to comment.