JQuery - оберните номера телефонов в привязную метку

Question

Я хочу обернуть все телефонные номера на веб-странице в привязную метку, используя JQuery. Содержимое на веб-странице генерируется динамически. Вот почему я не могу сделать это непосредственно в html-контенте. Поэтому я хочу обернуть весь текст номера телефона в тег привязки.

Пример:

Предположим, у меня есть следующее содержание в HTML:

<div> 
    <span> 
     47582 25541 
    </span> 
</div> 

Я хочу, чтобы преобразовать его в:

<div> 
    <span> 
     <a href="tel:47582 25541">47582 25541</a> 
    </span> 
</div> 

Как я могу это сделать, пожалуйста, помогите мне

Answer 1

Зациклируйте каждый элемент, возьмите его и преобразуйте в тег привязки.

$('.phone_text').each(function(){ 
    var value = $(this).text(); 
    $(this).html('<a href="tel:' + value + '">' + value + '</a>'); 
}); 

Answer 2

Использование следующим образом

$('.phone_text').each(function(){ 
    $(this).wrapInner('<a href="tel:' + $(this).html() + '" />'); 
}); 

или с помощью службы.

Примечание: Но это будет влиять на весь диапазон. Не предлагайте следующее.

$('span').each(function(){ 
    $(this).wrapInner('<a href="tel:' + $(this).html() + '" />'); 
}); 

См link

Проверить Fiddle

Answer 3

Попробуйте как этот

$('.phone_text').each(function(){ 
     var ph = $(this).text(); 
     $(this).html($('<a>').text(ph).attr('href',"tel:"+ph)); 
}); 

Answer 4

$(document).ready(function() { 
    $('.phone_text').html('<a href="tel: ' + $.trim($('.phone_text').text()) + '"> ' + $('.phone_text').text() + '</a>'); 
}); 

Demo: https://jsfiddle.net/3vdwowre/

Answer 5

Ключевые моменты

• содержимого в веб-страницы генерируются динамически
• нет идентификатора для текста номера телефона

JQuery плагин

я использовал JQuery плагин livequery от here

Какой будет конвертировать все существующие и динамический<span> на якорь тег

Успенская

phone number заворачивают в <span> с номерами и пространстве

Код

jQuery(function($) { 
 
    $("span").livequery(function() { 
 
    var self = $(this), 
 
     text = self.text(); 
 

 
    // numbers & space 
 
    if (/[\d ]/.test(text)) { 
 
     self.wrapInner($("<a>", { 
 
     href: "tel:" + text 
 
     })); 
 
    } 
 
    }); 
 

 
    // demo purpose only 
 
    $("a").click(function() { 
 
    $(".container").append($("<span>", { 
 
     text: "1234 5678" 
 
    })); 
 
    }); 
 
});

span { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://cdn.rawgit.com/hazzik/livequery/master/dist/jquery.livequery.min.js"></script> 
 

 

 
<a href="#">Generate phone number</a> 
 

 
<div class="container"> 
 
    <span>2345 6789</span> 
 
</div>

Answer 6

В случае, если у вас есть несколько элементов с номерами телефонов:

/* All phone numbers to href */ 
var regex = /\(?([0-9]{3})\)?([ .-]?)([0-9]{3})\2([0-9]{4})/; 
$('div span').each(function() { 
    var text = $(this).html(); 
    text = text.replace(regex, "<a href=\"tel:$&\">$&</a>"); 
    $(this).html(text); 
});