چه تکنولوژی می‌خواهید یاد بگیرید؟

نظرات و انتقادات خود را با ما در میان بگذارید

آپدیت روزانه

بیش از 1500 مطلب آموزشی

نیازهای روز

تبدیل آدرس ایمیل در صفحه به لینک ایمیل با استفاده از jQuery

 در ادامه این مقاله با استفاده از jQuery به تبدیل آدرس ایمیل در صفحه به لینک mailto می‌پردازیم البته تبدیل دستی یک آدرس ایمیل به لینک mailto کار سختی نمی‌باشد و تنها کافیست آدرس ایمیل را در پراپرتی href تگ a با تغییر http به mailto: این کار را انجام داد، اما تصور کنید محتوای یک صفحه به صورت داینامیک توسط کاربران ارسال شده است و حال نیاز است تمامی آدرس ایمیل‌ها به لینک ایمیل تبدیل شود و در صورتی که بخواهید تمامی آدرس ایمیل‌ها را بیابید و آن‌ها را به لینک ایمیل تبدیل کنید زمان گیر خواهد بود و شاید بعدا لازم باشد آدرس ایمیل‌ها از لینک ایمیل خارج شوند و به همان متن نوشتاری بازگردند که واقعا زمان گیر خواهد بود. در این مقاله به صورت داینامیک به تبدیل آدرس ایمیل به لینک ایمیل خواهیم پرداخت و این در حالتی است که هیچگونه تغییر را در ساختار اصلی فایل نخواهیم داشت.

مقدمه:

 در این مقاله می‌خواهیم شما رو با متدی با استفاده از jQuery آشنا کنیم که با استفاده از آن قادر خواهیم بود تمامی آدرس‌های ایمیل موجود در صفحه را به لینک ایمیل تبدیل کنید بدون اینکه در ساختار اصلی متن تغییر ایجاد شود.

ایجاد لینک برای آدرس ایمیل:

در صورتی که بخواهیم به صورت دستی آدرس ایمیلی را به لینک ایمیل تبدیل کنیم کافیست آدرس ایمیل را برای پراپرتی تگ "a" درج کنیم با این تفاوت مقدار //:http به :mailto تغییر خواهد کرد.

کد زیر یک نمونه از لینک ایمیل می‌باشد:

<a href="mailto:example@example.com">example@example.com</a>

برای تست کد بالا بر روی example@example.com کلیک کنید. در صورت کلیک بر روی لینک ایمیل، مرورگر پنجره جدید جهت ارسال ایمیل باز می‌کند که آدرس گیرنده همان آدرس ایمیلی می‌باشد که شما بر روی آن کلیک کردید. احتمال داره بخواهید مقدار  عنوان رو هم درج کنید کافیست بعد از آدرس ایمیل یک علامت سوال و تایپ subject و قرار دادن کاراکتر "=" در نهایت متنی که می‌خواهید به صورت پیشفرض قرار داده شود.

کد زیر یک نمونه از لینک به همراه مقدار پیشفرض عنوان هستش:

<a href="mailto:example@example.com?subject=www.omidnasri.com">example@example.com</a>

برای تست کد بالا بر روی example@example.com کلیک کنید.

outlook mailbox

تبدیل آدرس ایمیل در صفحه به لینک ایمیل:

جدول زیر را در نظر بگیرید که لیست از اطلاعات ایمیل ثبت شده می‌باشد:

جدول اعضا خبرنامه

 

اکنون با استفاده از jQuery می‌توان در سطرهای جدول جستجو نمود و با استفاده از Regular Experssion مقادیر که فرمت ایمیل را دارند گرفته و آدرس ایمیل را به لینک mailto تبدیل کرد.

کد:

$().ready(function() {
    var regEx = /(\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*)/;
    $("table td").filter(function() {
        return $(this).html().match(regEx);
    }).each(function() {
        $(this).html($(this).html().replace(regEx, "<a href=\"mailto:$1\">$1</a>"));
    });
});

در خط اول email regular expression تعریف شده است و در این مثال با استفاده از jQuery عنصر"table td" به عنوان selector انتخاب شده و با استفاده از متد match در جاوااسکریپت و با استفاده از regular experssion آدرس ایمیل‌ها جستجو خواهد شد و به ازای هر آدرس ایمیل یافت شده(each) توسط متد replace مقدار آن تغییر خواهد کرد به mailto لینک.

در پارامتر دوم متد replace از تک لینک استفاده کردم و مقدار پراپرتی و مقدار نمایش را 1$ قرار داده شده، 1$ به معنی آدرس ایمیلی است که به ازای هر each یافت می‌شود.

خروجی:

خروجی

 

برای تست آنلاین اینجا کلیک کنید.

امید نصری

0 نظر:

تعداد دیدگاه‌های کاربران : 0 دیدگاه
مهمان گرامی! برای ارسال نظر نیاز است وارد سایت شوید.


You must log on to comment.