Adding new recognition patterns.

[willysoriaguzman]

I was reading this library uses linkify-it: (https://github.com/markdown-it/linkify-it), so I was wondering where should I add a new pattern to recognize for example phone numbers using react typescipt.

Is there any example to achieve this or similar behaviour?

[AlexandrDobrovolskiy]

the same issue, need to recognize telegram contacts

[ro1414]

Any thoughts here? @willysoriaguzman did you find a solution?

[ranihorev]

You can do that by overriding the matchDecorator. For example, this decorator detects arxiv IDs:

<Linkify
  matchDecorator={value => {
    const matches = value.matchAll(/\d{4}\.\d{4,5}/g);
    return [...matches].map(match => {
      return {
        schema: '',
        index: match.index || 0,
        lastIndex: (match.index || 0) + match[0].length,
        text: match[0],
        url: `<your URL>`,
      };
    });
  }}
>{text}</Linkify

[hmittal1]

Able to linkify phone numbers but urls stop getting linkify after this change. can you tell me how can show both urls and phone numbers

[iShaVas]

@hmittal1 Was you able to archive that?

[dodoto]

Maybe too late, I solved by nested Linkify component

[hmittal1]

@iShaVas sorry i missed your comment. yes, i have modified the regex to cover aaaall valid scenarios.

export const linkifyRegex = /(+?\d[\s\-\d]{6,17}\d)|((https?://(?:www.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9].[^\s]{2,}|www.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9].[^\s]{2,}|https?://(?:www.|(?!www))[a-zA-Z0-9]+.[^\s]{2,}|www.[a-zA-Z0-9]+.[^\s]{2,}|[a-zA-Z]+.com[^\s]{0,}|[a-zA-Z]+.[a-zA-Z]{2,4}/[^\s]{2,}))/g;
export const phoneNumberRegex = /^+?\d[\s\-\d]{6,17}\d/;

matchDecorator={value => {
const matches = value.matchAll(linkifyRegex);
return [...matches].map(match => {
let url = match[0];
// Prepend 'tel:' string on open phone
// number linkify url into dailer app.
if (phoneNumberRegex.test(url)) {
url = tel: ${url};
}
return {
schema: '',
index: match.index || 0,
lastIndex: (match.index || 0) + match[0].length,
text: match[0],
url: ${url},
};
});
}}