2014-09-26 2 views
0

У меня есть несколько страниц, содержащих номер телефона в этом формате xxx-xxx-xxxx. Эти номера телефонов не являются ссылками, что мне нужно для написания сценария, который первым находит эти номера телефонов. Это то, что я получил за это:jQuery/JavaScript найти и заменить RegEx

$(document).ready(function(){ 

var content = $(".main").text(); 
var phoneNumber = content.match(/\d{3}-\d{3}-\d{4}/) 

alert(phoneNumber); 
}); 

Это работает так много, то есть фиксирует число, то, что мне нужно сделать теперь заменить этот номер телефона на странице с

'<a href=" onclick=" ... "' + 'tel:' + phoneNumber + '">' + 'originalPhoneNumber' + '</a>' 

Однако В этот момент я полностью потерялся. Могу ли я использовать .replaceWith() в jQuery?

EDIT:

Хорошо, я попытался изменить код, чтобы включить второй атрибут я хотел:

$(document).ready(function() { 
    var content = $(".main").html(); 
    content = content.replace(/\d{3}-\d{3}-\d{4}/g, function(v){ 
     return $('<a>').attr({ 
      href: "tel:"+v, 
      onclick: "ga('send', 'event', 'lead', 'phone call', 'call');" 
     }).html(v)[0].outerHTML; 
    }); 

    $('.main').html(content); 
}); 

Это еще добавление в HREF, но игнорирует OnClick.

+2

* "Могу ли я использовать' .replaceWith() 'в JQuery ? "*. .replaceWith()' работает с элементами DOM, а не с строками. –

+0

@FelixKling OP хотел использовать метод замены regex ... –

+0

Вы должны выполнить это задание на стороне сервера раз и навсегда, а затем сохранить страницу с изменениями, в противном случае замены будут выполняться каждый раз при загрузке страницы , –

ответ

0

Это заменит все совпадающие строки в элементе с тел: ссылка

<div class = "main">333-333-3333 444-444-4444</div> 

<script type="text/javascript"> 

    var content = $(".main").text(); 

    content = content.replace(/\d{3}-\d{3}-\d{4}/g, function(v){ 
     return $('<a>').attr('class', set.classname).attr('href', 'tel:'+v).html(v).wrap('<a>').parent().html(); 
    }); 

    $('.main').html(content); 

</script> 

Или более аккуратно реализован как:

$.fn.extend({ 
     tel : function(def) { 

      var set = { 
       regex : /\d{3}-\d{3}-\d{4}/g, 
       classname : "" 
      } 

      $.extend(true, set, def); 

      var c = $(this).html(); 

      c = c.replace(set.regex, function(v){ 
       return $('<a>').attr('class', set.classname).attr('href', 'tel:'+v).html(v).wrap('<a>').parent().html(); 
      }); 

      $(this).html(c); 
      return this; 
     } 
    }); 

    // default regex: 000-000-0000 
    $('.main').tel();  

    // default regex: 000-000-0000 <a> class of tel-link applied 
    $('.main').tel({ classname : "tel-link" });    

    // override regex: 0000-0000-000  
    $('.main').tel({ regex: /\d{4}-\d{4}-\d{3}/g }); 
+0

Спасибо, что это действительно работает, я также обновил свой оригинальный вопрос обо втором атрибуте. – scabbyjoe

Смежные вопросы