Q: javascript regex doesn't match emails when url matching is passed Am trying to match email,phone,email,hashtags and mention tag in a message and insert them inside a hyper link. But am having problem with my regex as it doesn't match emails as mail instead it match as a link.
Below is a working example. 


function replaceTags(message) {
  return message
    .replace(/([-a-zA-Z0-9:%_\/\/.]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9:%_\+.~#?&\/\/=]*)?)/gi, "<a class=\"chat-message-link url-tag\" href=\"$1\">$1</a>")
    .replace(/(^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4})$/g, "<a class=\"chat-message-link phone-tag\" href=\"tel:$1\">$1</a>")
    .replace(/\b([A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4})\b/gi, "<a class=\"chat-message-link email-tag\" href=\"mailto:$1\">$1</a>")
    .replace(/(^|\s)(@[A-Za-z0-9_.\d-]+)/g, "<a class=\"chat-message-link mentioned-tag hashtag\" data-reference=\"$2\" href=\"http://example.com/$2\">$2</a>")
    .replace(/(^|\s)(#[a-z\d-]+)/g, "<a class=\"chat-message-link mentioned-tag hashtag\" data-reference=\"$2\" href=\"http://example.com/$2\">$2</a>")
    .replace(/&lt;br\/&gt;/g, "<br/>")
    .replace(/\n/g, "<br/>");
}

function sendMessage(_this) {
  const chatUI = replaceTags($(_this).val().trim());

  $("#MessageView").append('<br/><span>' + chatUI + '</span>');
  $(_this).val("");
}

$(function(event) {
  $(document).on("click", "#send", function(event) {
    sendMessage("textarea#message");
  }).on("keypress", "textarea#message", function(event) {
    if (event.which == 13 && !event.shiftKey) {
      sendMessage(this);
      return false;
    }
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="MessageView"></div>
<textarea id="message">example.com
www.example.com
https://example.com
http://example.com/foo.php
http://www.example.com
example@gmail.com</textarea>
<button id="send">send</button>


Using .replace( /((http|ftp|scp)(s)?:\/\/[a-zA-Z0-9.?=\-&_/]+)/g, "<a href=\"$1\" target=\"_blank\">$1</a>" ), to match urls will allow it to detect emails but won't match urls HTTP?S://example.com, example.com and www.example.com

A: I think the problem is that search for the "chat-message-link" is "eating" the domain in the email-address. I don't know if that's generally applicable, but I changed the search so that if would start at the beginning of the line...  


function replaceTags(message) {
  return message
    .replace(/^([-a-zA-Z0-9:%_\/\/.]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9:%_\+.~#?&\/\/=]*)?)/gim, "<a class=\"chat-message-link url-tag\" href=\"$1\">$1</a>")    .replace(/^(^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4})$/gmi, "<a class=\"chat-message-link phone-tag\" href=\"tel:$1\">$1</a>")
    .replace(/\b([A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4})\b/gi, "<a class=\"chat-message-link email-tag\" href=\"mailto:$1\">$1</a>")
    .replace(/(^|\s)(@[A-Za-z0-9_.\d-]+)/g, "<a class=\"chat-message-link mentioned-tag hashtag\" data-reference=\"$2\" href=\"http://example.com/$2\">$2</a>")
    .replace(/(^|\s)(#[a-z\d-]+)/g, "<a class=\"chat-message-link mentioned-tag hashtag\" data-reference=\"$2\" href=\"http://example.com/$2\">$2</a>")

    .replace(/&lt;br\/&gt;/g, "<br/>")
    .replace(/\n/g, "<br/>");
}

function sendMessage(_this) {
  const chatUI = replaceTags($(_this).val().trim());
console.log(chatUI); // show result!
  $("#MessageView").append('<br/><span>' + chatUI + '</span>');
  $(_this).val("");
}

$(function(event) {
  $(document).on("click", "#send", function(event) {
    sendMessage("textarea#message");
  }).on("keypress", "textarea#message", function(event) {
    if (event.which == 13 && !event.shiftKey) {
      sendMessage(this);
      return false;
    }
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="MessageView"></div>
<textarea id="message">example.com
www.example.com
https://example.com
http://example.com/foo.php
http://www.example.com
example@gmail.com</textarea>
<button id="send">send</button>


