Suppose there is an html layout where you need to make all phone numbers links and add a class to each link:
<div class="phones"> <ul> <li>+375007778899</li> <li>+375007778822</li> <li>+375007778811</li> </ul> </div>
Let’s run the js script using jQuery:
jQuery(document).ready(function($) {
$('.phones').html( $('.phones').html().replace(/(\+\d+)/g,'<a class="phone" href="tel:$1">$1</a>') );
});
After executing the script, the layout will look like:
<div class="phones"> <ul> <li><a class="phone" href="tel:+375007778899">+375007778899</a></li> <li><a class="phone" href="tel:+375007778822">+375007778822</a></li> <li><a class="phone" href="tel:+375007778811">+375007778811</a></li> </ul> </div>
This method of highlighting phone numbers with links is suitable if these phone numbers are in the description among other text. For example, in information pages previously filled out by the content manager.
