simplifying url pattern regex

net/web/src/session/conversation/useConversation.hook.js

@@ -138,18 +138,15 @@ export function useConversation(cardId, channelId) {
   }, [state.contentKey]);
 
   const clickableText = (text) => {
-      const urlPattern = 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
 
+      const urlPattern = new RegExp('(https?:\\/\\/)?(www\\.)?[-a-zA-Z0-9@:%._\\+~#=]{2,256}\\.[a-z]{2,4}\\b([-a-zA-Z0-9@:%_\\+.~#?&//=]*)');
       const hostPattern = new RegExp('^https?:\\/\\/', 'i');
 
       let group = '';
       let clickable = [];
+
       const words = text === [] ? '' : DOMPurify.sanitize(text).split(' ');
+
       words.forEach((word, index) => {
         if (!!urlPattern.test(word)) {
           clickable.push(<span key={index}>{ group }</span>);
@@ -161,6 +158,7 @@ export function useConversation(cardId, channelId) {
           group += `${word} `;
         }
       })
+
       clickable.push(<span key={words.length}>{ group }</span>);
       return <p>{ clickable }</p>;
   };