كيفية إنشاء نص البحث المرجعية مع جافا سكريبت

أوامر المفضلة هي تطبيقات جافا سكريبت التي يمكن الوصول إليها على النحو علامات المتصفح. يتم استخدامها لتمكين المستخدمين من أداء إجراءات مختلفة على صفحات الويب. على سبيل المثال ، هذه الإشارة المرجعية من FontShop هي لمعاينة خطوط الويب FontShop على أي صفحة ويب.

في هذه المقالة ، سنرى مدى سرعة وسهولة ذلك طهو مرجعية عن طريق إنشاء واحد ذلك ينفذ ويكيواند (ويكيبيديا ذات المظهر الأفضل) بحث للحصول على نص محدد في أي صفحة ويب.

كيف تعمل bookmarklets

URI من bookmarklet يستخدم جافا سكريبت: بروتوكول هذا يشير إلى أنه يتكون من شفرة جافا سكريبت. عند النقر فوق إشارة مرجعية ، يمكنك ذلك تشغيل جافا سكريبت على صفحة ويب ، وتنفيذ المهام ، مثل تغيير مظهر الصفحة ، أو إعادة التوجيه إلى صفحة أخرى ، أو إظهار معلومات جديدة عليها.

منذ العلامات هي في الأساس مجموعات من شفرة جافا سكريبت, يسهل إنشاؤها باستخدام القليل من معرفة JavaScript ، إما للاستخدام الشخصي أو لتقديمها إلى المستخدمين لديك ، مثل WordPress مع Press this bookmarklet.

ابدأ برمز JavaScript

ال هيكل URL يستخدم Wikiwand لمقال باللغة الإنجليزية هو https://www.wikiwand.com/en/articleTitle. نحتاج إلى كتابة برنامج نصي ينتقل إلى صفحة Wikiwand التي تحتوي على عنوان URL ينتهي بالسلسلة التي اختارها المستخدم للتو - النص المحدد سيحتاج إلى وضعت في مكان عنوان المقال.

اولا نحن الحصول على عقد النص اختار المستخدم في الصفحة الكود التالي:

 getSelection (). toString () 

نحتاج إلى المصبوب الكائن عاد بواسطة getSelection () كسلسلة باستخدام إلى سلسلة() الطريقة ، من أجل جعله إخراج النص المحدد.

بعد ذلك ، نحن بحاجة إلى القيام بزيارة إلى صفحة مقالة Wikiwand. سنحقق ذلك باستخدام المنطق التالي ، حيث NEWURL سيكون ال عنوان URL لصفحة مقالة Wikiwand (التي سوف تحتوي على السلسلة المحددة في النهاية):

 location.href = newURL 

عندما نجمع هاتين المقتطفين من الشفرات معًا ، ينتهي بنا المطاف بالبرنامج النصي التالي:

 location.href = 'https://www.wikiwand.com/en/'+getSelection () .toString () 

الآن لدينا فقط لإضافة جافا سكريبت: بروتوكول إلى الأمام ، ونحن لدينا الرمز النهائي سوف نستخدم في bookmarklet لدينا:

 // أضف سطرًا واحدًا بدون فواصل الأسطر javascript: location.href = 'https://www.wikiwand.com/en/' + getSelection (). toString (). استبدل (/ \ n / g ، '٪ 20' ) 

اختياري استبدال (/ \ ن / ز، '٪ 20') في نهايةالمطاف يستبدل أي حرف سطر جديد (\ ن) في النص مع شخصية مساحة واحدة (٪ 20).

كود JavaScript جاهز. لاحظ أنه يجب وضع الكود في سطر واحد مع عدم وجود فواصل الأسطر, منذ وقت لاحق سيكون إضافة إلى حقل إدخال النص.

إنشاء إشارة مرجعية

افتح نافذة إشارة مرجعية في المتصفح الخاص بك ، ثم إضافة إشارة مرجعية جديدة:

• ثعلب النار: اضغط على ctrl + shift + B / cmd + shift + B ، انقر بزر الماوس الأيمن على "شريط أدوات الإشارات المرجعية" ، وحدد "إشارة مرجعية جديدة".
• كروم: اضغط على ctrl + shift + O / cmd + alt + B ، وانقر بزر الماوس الأيمن فوق "شريط الإشارات المرجعية" ، وحدد "إضافة صفحة ...".

في مجال URL انسخ شفرة JavaScript من قبل. بمجرد إنشاء الإشارة المرجعية ، تصبح جاهزة للاستخدام ؛ انتقل إلى أي صفحة ويب, اختر كلمة تريد البحث عنه في Wikiwand ، و انقر فوق الإشارة المرجعية - سيتم فتح صفحة مقالة Wikiwand مرة واحدة.

الوصول السريع

بدلاً من الوصول إلى قائمة الإشارات المرجعية في كل مرة تحتاج فيها إلى bookmarklet ، يمكنك اختيار عرضه مباشرة في متصفحك للوصول السريع.

• ثعلب النار: انقر فوق "عرض> أشرطة الأدوات" في شريط القائمة العلوي ، وحدد "شريط أدوات الإشارات المرجعية".
• كروم: اضغط على ctrl + shift + B / cmd + shift + B.

إنشاء رابط المرجعية

يمكنك إضافة إشارة مرجعية إلى موقع ويب كارتباط تشعبي كذلك ، أي زائر يمكن المرجعية إما بسحب وإسقاط الرابط إلى شريط أدوات الإشارات المرجعية ، أو النقر بزر الماوس الأيمن على الرابط وتحديد خيار وضع إشارة مرجعية عليه.

لتحويل إشارة مرجعية إلى ارتباط تشعبي ، قم بإنشاء علامة HTML مع البرنامج النصي bookmarklet كقيمة لها أ href صفة، عزا:

   ويكيواند البحث المرجعية  

كيفية تخزين bookmarklets بشكل منفصل

بامكانك ايضا استخدام ملف جافا سكريبت منفصل لتخزين رمز bookmarklet ، والذي قد لا يكون ضروريًا إذا كان لديك برنامج نصي قصير - مثل النص الذي رأيناه للتو في هذا البرنامج التعليمي - ولكن يمكن أن يكون مفيدًا عندما يكون رمز JavaScript أطول من اللازم لنسخه إلى شريط الإشارات من المتصفح الخاص بك.

الملف myscript.js سوف منزل رمز جافا سكريبت الرئيسي لل bookmarklet ، وتحتاج إلى إضافة التعليمات البرمجية التالية كعنوان URL المرجعية (إما إلى شريط الإشارات المرجعية في المتصفح ، أو كقيمة أ href السمة في ملف HTML):

 // add في سطر واحد بدون فواصل الأسطر javascript: (() => with (document) let s = createElement ('script')؛ s.src = 'myscript.js'؛ head.appendChild (s) ) ()؛ 

مقتطف الشفرة أعلاه هو ملفوفة في وظيفة السهم الاحتجاج الذاتي, ويستخدم ميزات ECMAScript 6 ، مثل سمح الكلمة ، من أجل تقليل طول الرمز. ويضيف > علامة تشير إلى myscript.js ملف ل قسم من المستند عندما ينقر المستخدم على bookmarklet (لاحظ أنك قد تحتاج إلى استخدام المسار المطلق ل myscript.js ملف).