پیاده‌سازی سیستم انتخاب متن هوشمند با جاوا اسکریپت: راهنمای جامع

در این مقاله، نحوه ساخت سیستم انتخاب متن هوشمند را با استفاده از جاوا اسکریپت به شما آموزش خواهیم داد. این سیستم شامل قابلیت‌های کپی به کلیپ‌بورد، برجسته‌سازی متن و اشتراک‌گذاری آن است که تجربه کاربری وب‌سایت شما را بهبود می‌بخشد و می‌تواند تعاملات کاربران را افزایش دهد.

چرا باید سیستم انتخاب متن هوشمند را بسازید؟

سیستم انتخاب متن هوشمند به شما کمک می‌کند تا تعامل کاربران با محتوای سایت خود را بهبود دهید. این ویژگی‌ها نه تنها تجربه کاربری را ارتقا می‌دهند، بلکه برای سئو و رتبه‌بندی سایت شما در موتورهای جستجو نیز مفید هستند. برخی از مزایای اصلی این سیستم عبارتند از:

افزایش تعامل کاربران با سایت
بهبود دسترسی برای افراد با نیازهای ویژه
ارتقاء تجربه کاربری و بهبود رتبه در موتورهای جستجو
ایجاد تجربه کاربری راحت و بهینه برای کاربران در موبایل و دسکتاپ

مراحل پیاده‌سازی سیستم انتخاب متن هوشمند

مرحله 1: تنظیمات اولیه HTML و CSS

ابتدا باید یک ساختار ساده HTML برای نمایش متن و افزودن استایل‌های پایه ایجاد کنیم. این ساختار شامل یک بخش برای نمایش متن و یک منوی مخفی برای قابلیت‌های هوشمند است. منو تنها زمانی ظاهر می‌شود که کاربر متنی را انتخاب کند.


<div id="text-container">
   <p>این یک متن نمونه است که می‌توانید برای آزمایش سیستم هوشمند انتخاب کنید.</p>
</div>
<div id="custom-menu" style="display: none;">
    <button id="copy-button">کپی</button>
    <button id="highlight-button">برجسته‌سازی</button>
    <button id="share-button">اشتراک‌گذاری</button>
</div>

در فایل CSS، استایل‌های پایه را به این عناصر اضافه می‌کنیم. این استایل‌ها باعث می‌شوند که منو به طور درست نمایش داده شود و کاربر تجربه بهتری از تعامل با صفحه داشته باشد:


#text-container {
    padding: 20px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    font-family: Arial, sans-serif;
    line-height: 1.6;
}
#custom-menu {
    position: absolute;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    padding: 5px;
    border-radius: 5px;
    z-index: 1000;
    display: none;
}
#custom-menu button {
    margin: 5px;
    padding: 5px 10px;
    border: none;
    background-color: #007bff;
    color: white;
    border-radius: 3px;
    cursor: pointer;
}

مرحله 2: افزودن رویداد انتخاب متن

برای شناسایی زمانی که کاربر متنی را انتخاب می‌کند، از رویداد mouseup استفاده می‌کنیم. هنگامی که کاربر متنی را انتخاب کند، منوی سفارشی ظاهر می‌شود و می‌تواند گزینه‌هایی برای کپی، برجسته‌سازی یا اشتراک‌گذاری متن را مشاهده کند.


const textContainer = document.getElementById('text-container');
const customMenu = document.getElementById('custom-menu');

textContainer.addEventListener('mouseup', (event) => {
    const selectedText = window.getSelection().toString();
    if (selectedText) {
        const { clientX: x, clientY: y } = event;
        customMenu.style.display = 'block';
        customMenu.style.top = `${y}px`;
        customMenu.style.left = `${x}px`;
    } else {
        customMenu.style.display = 'none';
    }
});

مرحله 3: افزودن قابلیت کپی به کلیپ‌بورد

برای کپی متن به کلیپ‌بورد، از متد navigator.clipboard.writeText استفاده می‌کنیم. این متد به طور خودکار متن انتخابی را به حافظه کلیپ‌بورد منتقل می‌کند. در این مرحله، دکمه «کپی» در منوی سفارشی نمایش داده می‌شود که به کاربر این امکان را می‌دهد تا متن را کپی کند.


const copyButton = document.getElementById('copy-button');

copyButton.addEventListener('click', () => {
    const selectedText = window.getSelection().toString();
     navigator.clipboard.writeText(selectedText).then(() => {
    alert('متن به کلیپ‌بورد کپی شد!');
});
    customMenu.style.display = 'none';
});

مرحله 4: برجسته‌سازی متن

در این مرحله، به کاربر این امکان داده می‌شود که متن انتخابی را با رنگ پس‌زمینه برجسته کند. برای این کار از متد document.execCommand استفاده می‌کنیم یا می‌توان از روش‌های مدرن‌تر مانند استفاده از رنج (range) در جاوا اسکریپت بهره برد.


const highlightButton = document.getElementById('highlight-button');

highlightButton.addEventListener('click', () => {
    const range = window.getSelection().getRangeAt(0);
    const span = document.createElement('span');
span.style.backgroundColor = 'yellow';
    range.surroundContents(span);
    customMenu.style.display = 'none';
});

مرحله 5: اشتراک‌گذاری متن

در نهایت، این امکان را فراهم می‌کنیم که کاربران بتوانند متن انتخابی خود را با دیگران به اشتراک بگذارند. برای این کار از API navigator.share استفاده می‌شود که به کاربر اجازه می‌دهد متن را از طریق شبکه‌های اجتماعی یا دیگر اپلیکیشن‌ها به اشتراک بگذارد.


const shareButton = document.getElementById('share-button');

shareButton.addEventListener('click', () => {
    const selectedText = window.getSelection().toString();
    if (navigator.share) {
        navigator.share({
        text: selectedText,
        title: 'متن انتخاب‌شده',
        url: window.location.href,
        }).catch((error) => console.error('Error sharing:', error));
    } else {
        alert('امکان اشتراک‌گذاری در این مرورگر وجود ندارد.');
}
    customMenu.style.display = 'none';
});

کد کامل


<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>سیستم انتخاب متن هوشمند</title>
    <style>
        #text-container {
            padding: 20px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }
        #custom-menu {
            position: absolute;
            background: #fff;
            border: 1px solid #ddd;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
            padding: 5px;
            border-radius: 5px;
            z-index: 1000;
            display: none;
        }
        #custom-menu button {
            margin: 5px;
            padding: 5px 10px;
            border: none;
            background-color: #007bff;
            color: white;
            border-radius: 3px;
            cursor: pointer;
        }
    </style>
</head>
<body>

<main>
    <section>
        <div id="text-container">
            <p>
                این یک متن نمونه است که می‌توانید برای آزمایش سیستم هوشمند انتخاب کنید.
                می‌توانید با انتخاب قسمتی از متن، امکاناتی مانند کپی، برجسته‌سازی یا اشتراک‌گذاری آن را مشاهده کنید.
            </p>
        </div>

        <div id="custom-menu">
            <button id="copy-button">کپی</button>
            <button id="highlight-button">برجسته‌سازی</button>
            <button id="share-button">اشتراک‌گذاری</button>
        </div>
    </section>
</main>

<script>
    const textContainer = document.getElementById('text-container');
    const customMenu = document.getElementById('custom-menu');
    const copyButton = document.getElementById('copy-button');
    const highlightButton = document.getElementById('highlight-button');
    const shareButton = document.getElementById('share-button');

    // هنگام انتخاب متن، منوی سفارشی را نمایش می‌دهیم
    textContainer.addEventListener('mouseup', (event) => {
        const selectedText = window.getSelection().toString();
        if (selectedText) {
            const { clientX: x, clientY: y } = event;
            customMenu.style.display = 'block';
            customMenu.style.top = `${y}px`;
            customMenu.style.left = `${x}px`;
        } else {
            customMenu.style.display = 'none';
        }
    });

    // کپی متن به کلیپ‌بورد
    copyButton.addEventListener('click', () => {
        const selectedText = window.getSelection().toString();
        navigator.clipboard.writeText(selectedText).then(() => {
            alert('متن به کلیپ‌بورد کپی شد!');
        });
        customMenu.style.display = 'none';
    });

    // برجسته‌سازی متن انتخابی
    highlightButton.addEventListener('click', () => {
        const range = window.getSelection().getRangeAt(0);
        const span = document.createElement('span');
        span.style.backgroundColor = 'yellow';
        range.surroundContents(span);
        customMenu.style.display = 'none';
    });

    // اشتراک‌گذاری متن انتخابی
    shareButton.addEventListener('click', () => {
        const selectedText = window.getSelection().toString();
        if (navigator.share) {
            navigator.share({
                text: selectedText,
                title: 'متن انتخاب‌شده',
                url: window.location.href,
            }).catch((error) => console.error('Error sharing:', error));
        } else {
            alert('امکان اشتراک‌گذاری در این مرورگر وجود ندارد.');
        }
        customMenu.style.display = 'none';
    });
</script>

</body>
</html>

نتیجه‌گیری

پیاده‌سازی سیستم انتخاب متن هوشمند با جاوا اسکریپت یک روش عالی برای بهبود تعامل کاربران با وب‌سایت شماست. در این آموزش، قابلیت‌های کپی، برجسته‌سازی و اشتراک‌گذاری را اضافه کردیم. حالا می‌توانید این پروژه را توسعه دهید و ویژگی‌های بیشتری به آن اضافه کنید. این سیستم به شما این امکان را می‌دهد تا تجربه کاربری را بهبود دهید و تعاملات کاربران را افزایش دهید. همچنین می‌توانید از این ویژگی‌ها در سایت‌های آموزشی، فروشگاهی و شبکه‌های اجتماعی برای جذب بیشتر مخاطب استفاده کنید.