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}, }; }); }}