Как скрыть часть номера телефона?

203

01 сентября 2018, 13:00

Как можно скрыть часть номера телефона (например, последние четыре цифры заменить на X), а при нажатии показать?

<span class="phone_number">+74951182647<span class="phone_number_active"> Показать</span></span>

Answer 1

Вот максимально настраиваемое решение, можете экспериментировать с настройками как угодно:

$(function(){ 
let holder=$('.phone_number'), 
button=$('.phone_number_active'), 
number=holder.text(), 
symbolsForHide=4, 
show=()=>{ 
  holder.text(number) 
  button.removeClass('show').text('Скрыть') 
}, 
hide=()=>{ 
  holder.text(number.replace(new RegExp('(.+).{'+symbolsForHide+'}$'),"$1"+'x'.repeat(symbolsForHide))) 
  button.addClass('show').text('Вскрыть') 
} 
button.click(function(){ 
  if($(this).hasClass('show')) show() 
  else hide() 
}) 
hide() 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<span class="phone_number">+74951182647</span> <span class="phone_number_active show">Показать</span>

Answer 2

$(".phone_number .show").click(function(){ 
  var $parent = $(this).closest(".phone_number"); 
  $parent.find(".value").text($parent.data("phone")); 
  $(this).hide(); 
  $parent.find(".hide").show(); 
}); 
 
$(".phone_number .hide").click(function(){ 
  var $parent = $(this).closest(".phone_number"); 
  var phone = $parent.data("phone"); 
  phone = phone.substring(0, phone.length - 4) + "xxxx"; 
  $parent.find(".value").text(phone); 
 
  $(this).hide(); 
  $parent.find(".show").show(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<span class="phone_number" data-phone="+74951182647"> 
  <span class="value">+7495118xxxx</span> 
  <span class="show">Показать</span> 
  <span class="hide" style="display:none;">Не показать</span> 
</span>