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

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

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>

通过URL匹配时，javascript正则表达式与电子邮件不匹配

1 个答案: