Приховуємо частина номера телефону або цілий номер

Публікації
Приховуємо частина номера телефону або цілий номер

Як скрити номер телефону за допомогою JavaScript

Скриваємо / приховуємо номера телефону на сайті

Іноді виникає необхідність показати номер телефону не повністю, а приховати деяку частину номера телефону під "зірочками". Також можна приховати цілий номер телефону і при кліку на показати - показати номер.

Це може бути щоб користувач вказав свій номер для відновлення паролю, приховати номер телефону від програм які збирають в інтернеті номери телефонів для спаму і т.п.

Функція 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+'">&#9990; показати</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)+'">&#9990; показати</a>'; } Element.prototype.showPhones=function(){ this.innerText=atob(this.dataset.tel); this.href="tel:"+atob(this.dataset.tel); } document.getElementById('test3').innerHTML=hidenPhones('+380931234567');
Адмін 2020-03-28 20:55:54

Тільки зареєстровані користувачі можуть писати коментарі.