Секретность и безопасность информации, особенно если речь идет о персональных данных, является очень важным вопросом в веб-разработке. Одной из часто задаваемых вопросов является “как скрыть номер телефона на сайте, чтобы поисковые и другие роботы не смогли его прочитать, а пользователь мог навестить курсором на номер или нажать на видимую часть номера и увидеть его”. В этой статье мы рассмотрим примеры для HTML, JS, React, Vue и PHP, которые помогут защитить номер телефона на сайте.
Пример для HTML
В HTML можно использовать атрибуты “data-” и JavaScript, чтобы защитить номер телефона на сайте. Вот пример кода:
<a href="#" data-phone-number="1234567890" onclick="window.location.href = 'tel:' + this.dataset.phoneNumber;">Позвоните нам</a>
Здесь мы использовали атрибут “data-” для хранения номера телефона, а также JavaScript для обработки клика по ссылке. При нажатии на ссылку происходит переход на приложение телефона с номером телефона в качестве параметра.
Пример для JS
В JavaScript можно использовать функцию replace и регулярные выражения, чтобы скрыть номер телефона на сайте. Вот пример кода:
const phoneNumber = ‘+1 555-123-4567’;
const maskedPhoneNumber = phoneNumber.replace(/(\d{3})(\d{3})(\d{4})/, ‘***-***-$3’);
Здесь мы использовали регулярное выражение, чтобы разбить номер телефона на три группы цифр, а затем заменить первые две группы на звездочки.
Пример для React
В React можно использовать состояние компонента и условную отрисовку, чтобы скрыть номер телефона на сайте. Вот пример кода:
import React, { useState } from 'react';
function PhoneNumber() {
const [showNumber, setShowNumber] = useState(false);
const phoneNumber = '+1 555-123-4567';
function handleClick() {
setShowNumber(true);
}
return (
<div onClick={handleClick}>
{showNumber ? phoneNumber : 'Show Phone Number'}
</div>
);
} Здесь мы использовали состояние компонента, чтобы отслеживать, был ли клик на элементе. Если клик был, то отображается номер телефона, в противном случае – кнопка “Show Phone Number”.
Пример для Vue
В Vue можно использовать директиву v-if и методы компонента, чтобы скрыть номер телефона на сайте. Вот пример кода:
<template>
<div @click="showNumber = true">
<span v-if="showNumber">{{ phoneNumber }}</span>
<button v-else>Show Phone Number</button>
</div>
</template>
<script>
export default {
data() {
return {
showNumber: false,
phoneNumber: '+1 555-123-4567',
}
},
}
</script>
Здесь мы использовали директиву v-if, чтобы условно отображать номер телефона или кнопку “Show Phone Number”. Метод компонента handleClick используется для отображения номера телефона при клике на элемент.
Пример для PHP
В PHP можно использовать функцию str_replace и регулярные выражения, чтобы скрыть номер телефона на сайте. Вот пример кода:
$phoneNumber = '+1 555-123-4567';
$maskedPhoneNumber = preg_replace('/(\d{3})(\d{3})(\d{4})/', '***-***-$3', $phoneNumber);
Здесь мы использовали функцию preg_replace для замены первых двух групп цифр номера телефона на звездочки.
В заключение, существует множество способов скрыть номер телефона на сайте для защиты персональных данных. Мы рассмотрели примеры для HTML, JS, React, Vue и PHP, которые помогут вам защитить номер телефона на вашем сайте. При разработке своего сайта необходимо учитывать безопасность и конфиденциальность информации, особенно если речь идет о персональных данных клиентов.
