Іноді виникає необхідність показати номер телефону не повністю, а приховати деяку частину номера телефону під "зірочками". Також можна приховати цілий номер телефону і при кліку на показати - показати номер.
Це може бути щоб користувач вказав свій номер для відновлення паролю, приховати номер телефону від програм які збирають в інтернеті номери телефонів для спаму і т.п.
Функція hidenPhone приховує декілька цифр номера телефону.
- Функція hidenPhone приймає параметри:
- tel - номер телефону, це може бути String або Number.
- options - не обов'язково вказувати. Об'єкт з параметрами.
- mask - символ маски який приховує номер. По замовчуванню '*'.
- count - кількість цифр які необхідно приховати. По замовчуванню 5.
- end - скільки символів показувати в кінці. По замовчуванню 0.
- href - логічне значення true або false. Чи повертати HTML код з посиланням на номер телефону. Приклад:
<a href="tel:+380961234567">+3809612*****</a>
.
function hidenPhone(tel, options){
tel=tel.toString();
if(options==undefined)options={};
const DEF_OPTIONS={mask:'*', count:5, end:0, href:false};
for(var a in DEF_OPTIONS)options[a]=(a in options?options[a]:DEF_OPTIONS[a]);
var tel_hide='', c=0;
for(var i=tel.length-1; i>-1;i--){
if(c<options.count && '0123456789'.indexOf(tel[i])>-1 && (tel.length-i>options.end)){
tel_hide=options.mask+tel_hide;
c++;
}
else
tel_hide=tel[i]+tel_hide;
}
if(options.href==true)
return '<a href="tel:'+tel+'">'+tel_hide+'</a>';
else
return tel_hide;
}
alert( hidenPhone('+38(096) 1234567') );
document.getElementById('test').innerHTML=hidenPhone('+38(096) 1234567', {count:3, end:1, href:true});
Функці TextHidenPhone замінює номера телефонів у тексті за допомогою регулярного виразу.
function TextHidenPhone(text, options){
return text.replace(/(\(?\+?\d{1,3}\)? ?\(?\d{1,3}\)? ?\d\-? ?\d+\-? ?\d+)/g, function(tel){
if(options==undefined)options={};
const DEF_OPTIONS={mask:'*', count:5, end:0, href:false};
for(var a in DEF_OPTIONS)options[a]=(a in options?options[a]:DEF_OPTIONS[a]);
var tel_hide='', c=0;
for(var i=tel.length-1; i>-1;i--){
if(c<options.count && '0123456789'.indexOf(tel[i])>-1 && (tel.length-i>options.end)){
tel_hide=options.mask+tel_hide;
c++;
}
else
tel_hide=tel[i]+tel_hide;
}
if(options.href==true)
return '<a href="tel:'+tel+'">'+tel_hide+'</a>';
else
return tel_hide;
});
}
document.getElementById('text2').value=TextHidenPhone(document.getElementById('text1').value, {end:1});
Розробимо дві функції одна для заміни номеру на надпис "Показати", друга для відображення номеру при кліку.
Зберігати прихований номер можна у атрибуті елемента dataset.
//функція яка повертає HTML код з написом "показати"
function hidenPhone(tel){
return '<a onclick="this.showPhone();" data-tel="'+tel+'">✆ показати</a>'; //тут також можна вказати class щоб задати CSS стилі
}
Element.prototype.showPhone=function(){
this.innerText=this.dataset.tel;
}
document.getElementById('test2').innerHTML=hidenPhone('+380931234567');
Cам номер можна зашифрувати щоб програми для збору номерів на сайтах не зібрали номери наприклад за допомогою btoa(), а також додати у href "tel:номер".
function hidenPhones(tel){
return '<a onclick="this.showPhones();" data-tel="'+btoa(tel)+'">✆ показати</a>';
}
Element.prototype.showPhones=function(){
this.innerText=atob(this.dataset.tel);
this.href="tel:"+atob(this.dataset.tel);
}
document.getElementById('test3').innerHTML=hidenPhones('+380931234567');