Question

我正在尝试将纯文本电子邮件地址转换为可点击的mailto到表格内的链接。

我有以下功能将找到的链接转换为mailto链接，但它似乎只适用于第一个找到的链接。任何后续链接（第2次，第3次出现等）仍保留为纯文本链接。我似乎无法弄清楚我可能做错了什么。任何帮助将不胜感激！

代码：

HTML 的

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
   <div class='filter-email-box'>
   <div>This is a sample text which contains john@gmail.com </div>
   <div>This text contains two emails adam@example.com and paul@example.com </div>
</div>

的Javascript

$(".filter-email-box div").filter(function(){
   var html = $(this).html();
   var emailPattern = /[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}/;  

   var matched_str = $(this).html().match(emailPattern);
   if(matched_str){
       $(this).html(html.replace(emailPattern,"<a href='mailto:"+matched_str+"'>"+matched_str+"</a>"));
       return $(this)
   }    
})

这是我设置的小提琴： http://jsfiddle.net/z6LF5/

Answer 1

当有多个电子邮件地址时，JQuery方法match会返回一个数组（当设置全局搜索标志g时），所以我们＆＃ 39;重新循环遍历该数组（在本例中称为matched_str）并替换匹配的电子邮件。

$(".filter-email-box div").filter(function () {
    var html = $(this).html();
    var emailPattern = /[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}/g;  

    var matched_str = $(this).html().match(emailPattern);
    if ( matched_str ) {
      var text = $(this).html();
      $.each(matched_str, function (index, value) {
          text = text.replace(value,"<a href='mailto:"+value+"'>"+value+"</a>");
      });
      $(this).html(text);
      return $(this)
    }    
})

JSFiddle

Answer 2

使用g（全局）修饰符（找到所有匹配项，而不是在第一次匹配后停止）。

您可以实施以下内容：

$('.filter-email-box div').ready(function() {
  $('.filter-email-box div').each(function() {
     var html  = $(this).html();
     var regex = /([a-z0-9._-]+@[a-z0-9.-]+\.[a-z]{2,4})/ig
     var text  = html.replace(regex, "<a href='mailto:$1'>$1</a>");
     $(this).html(text);
  });
});

Fiddle

Answer 3

如果有人感兴趣，我将jquery代码翻译为香草JS代码

var elem = document.querySelector('.filter-email-box');
var html = elem.innerHTML;
if (html) {
  elem.innerHTML = html.replace(/([a-z0-9._-]+@[a-z0-9.-]+\.[a-z]{2,4})/ig, '<a href="mailto:$1">$1</a>');
}

演示链接：http://jsfiddle.net/eliz82/q0x4tjr3/

将纯文本电子邮件转换为可点击链接 - REGEX / jQuery

3 个答案: