传递网址匹配时，javascript正则表达式与电子邮件不匹配

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
[email protected]</textarea>
<button id="send">send</button>

使用.replace( /((http|ftp|scp)(s)?:\/\/[a-zA-Z0-9.?=\-&_/]+)/g, "<a href=\"$1\" target=\"_blank\">$1</a>" )，匹配网址将允许它检测电子邮件但不匹配网址HTTP?S://example.com, example.com and www.example.com

Answer 1

我认为问题是搜索“聊天消息链接”正在“吃掉”电子邮件地址中的域名。我不知道这是否普遍适用，但我更改了搜索，以便如果从行的开头开始......

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
[email protected]</textarea>
<button id="send">send</button>