регулярное выражение javascript не совпадает с электронными письмами, когда URL-адрес соответствует

Question

Я пытаюсь сопоставить email,phone,email,hashtags and mention tag в сообщении и вставить их в гиперссылку.Но у меня проблема с моим регулярным выражением, так как оно не соответствует электронной почте как почте, вместо этого оно соответствует ссылке.

Ниже приведен рабочий пример.

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>

Использование .replace( /((http|ftp|scp)(s)?:\/\/[a-zA-Z0-9.?=\-&_/]+)/g, "<a href=\"$1\" target=\"_blank\">$1</a>" ) для сопоставления URL-адресов позволит обнаруживать электронные письма, но не будет совпадать с URL-адресами HTTP?S://example.com, example.com and www.example.com

Answer 1

Я думаю, что проблема в том, что поиск по "chat-message-link" "съедает" домен в email-адресе. Я не знаю, применимо ли это вообще, но я изменил поиск так, чтобы он начинался с начала строки ...

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>