🌏 🦁 ⚾️ كيف يمكنني تحليل عنوان URL في JavaScript؟ 👷🏻 🤚🏾 🤳🏽

يوم جيد ، أيها الأصدقاء!

أقدم انتباهكم إلى ترجمة مقال "كيفية تحليل عنوان URL في JavaScript: اسم المضيف ، اسم المسار ، الاستعلام ، التجزئة" بقلم ديمتري بافلوتين.

محدد موقع المعلومات أو عنوان URL المختصر هو رابط لمورد ويب (صفحة ويب ، صورة ، ملف). يحدد عنوان URL موقع المورد وكيفية استلامه - البروتوكول (http ، ftp ، mailto).

على سبيل المثال ، إليك عنوان URL لهذه المقالة:

https://dmitripavlutin.com/parse-url-javascript

غالبًا ما يكون من الضروري الحصول على عناصر معينة من عنوان URL. يمكن أن يكون هذا اسم مضيف (اسم مضيف ، dmitripavlutin.com) أو اسم مسار (اسم مسار ، /parse-url-javascript).

من الطرق الملائمة للحصول على المكونات الفردية لعنوان URL هو المُنشئ URL().

في هذه المقالة ، سنتحدث عن البنية والمكونات الرئيسية لعنوان URL.

1. بنية عنوان URL

صورة تساوي ألف كلمة. في الصورة أعلاه ، يمكنك رؤية المكونات الرئيسية لعنوان URL:

2. مُنشئ URL ()

المُنشئ URL()هو وظيفة تسمح لك بتحليل (تحليل) مكونات عنوان URL:

const url = new URL(relativeOrAbsolute [, absoluteBase])

relativeOrAbsoluteيمكن أن تكون الوسيطة عنوان URL مطلق أو نسبي. إذا كانت الوسيطة الأولى عبارة عن ارتباط نسبي ، فستكون الوسيطة الثانية ، absoluteBaseمطلوبة ، وهي عنوان URL المطلق الذي يمثل أساس الوسيطة الأولى.

على سبيل المثال ، لنبدأ URL()باستخدام عنوان URL مطلق:

const url = new URL('http://example.com/path/index.html')

url.href // 'http://example.com/path/index.html'

لنجمع الآن عناوين URL النسبية والمطلقة:

const url = new URL('/path/index.html', 'http://example.com')

url.href // 'http://example.com/path/index.html'

تقوم خاصية hrefالمثيل URL()بإرجاع سلسلة URL التي تم تمريرها.

بعد إنشاء مثيل URL()، يمكنك الوصول إلى مكونات URL. كمرجع ، إليك واجهة المثيل URL():

interface URL {
  href:     USVString;
  protocol: USVString;
  username: USVString;
  password: USVString;
  host:     USVString;
  hostname: USVString;
  port:     USVString;
  pathname: USVString;
  search:   USVString;
  hash:     USVString;

  readonly origin: USVString;
  readonly searchParams: URLSearchParams;

  toJSON(): USVString;
}

هنا ، USVStringتعني الكتابة أن JavaScript يجب أن ترجع سلسلة.

3. سلسلة الاستعلام

url.searchتتيح لك الخاصية الحصول على سلسلة استعلام URL تبدأ ببادئة ?:

const url = new URL(
    'http://example.com/path/index.html?message=hello&who=world'
)

url.search // '?message=hello&who=world'

إذا لم تكن هناك سلسلة استعلام ، فإنها url.searchتُرجع سلسلة فارغة (""):

const url1 = new URL('http://example.com/path/index.html')
const url2 = new URL('http://example.com/path/index.html?')

url1.search // ''
url2.search // ''

3.1. تحليل (تحليل) سلسلة استعلام

بدلاً من الحصول على سلسلة الاستعلام الأصلية ، يمكننا الحصول على معلماتها.

يوفر مكان الإقامة طريقة سهلة للقيام بذلك url.searchParams. قيمة هذه الخاصية هي مثيل لواجهة URLSeachParams. يوفر

الكائن URLSearchParamsالعديد من الأساليب للعمل مع معلمات سلسلة الاستعلام ( get(param), has(param)وما إلى ذلك).

لنأخذ مثالا:

const url = new Url(
    'http://example.com/path/index.html?message=hello&who=world'
)

url.searchParams.get('message') // 'hello'
url.searchParams.get('missing') // null

url.searchParams.get('message')تُرجع قيمة معلمة messageسلسلة الاستعلام.

الوصول إلى معلمة غير موجودة url.searchParams.get('missing')يعود null.

4. اسم المضيف (اسم المضيف)

قيمة الخاصية url.hostnameهي اسم مضيف عنوان URL:

const url = new URL('http://example.com/path/index.html')

url.hostname // 'example.com'

5. المسار (اسم المسار)

url.pathnameتحتوي الخاصية على مسار URL:

const url = new URL('http://example.com/path/index.html?param=value')

url.pathname // '/path/index.html'

إذا كان عنوان URL لا يحتوي على مسار ، فإنه يقوم url.pathnameبإرجاع الحرف /:

const url = new URL('http://example.com/');

url.pathname; // '/'

6. تجزئة

أخيرًا ، يمكن الحصول على التجزئة عبر خاصية url.hash:

const url = new URL('http://example.com/path/index.html#bottom')

url.hash // '#bottom'

إذا لم يكن هناك تجزئة ، فإنها url.hashتُرجع سلسلة فارغة (""):

const url = new URL('http://example.com/path/index.html')

url.hash // ''

7. التحقق من صحة عنوان URL

new URL()لا يؤدي استدعاء المُنشئ إلى إنشاء مثيل فحسب ، بل يتحقق أيضًا من صحة عنوان URL الذي تم تمريره. إذا كان عنوان URL غير صالح ، فسيتم التخلص منه TypeError.

على سبيل المثال ، http ://example.comعنوان URL غير صالح نظرًا httpلوجود مسافة بعده .

لنجرب استخدام عنوان URL هذا:

try {
    const url = new URL('http ://example.com')
} catch (error) {
    error // TypeError, "Failed to construct URL: Invalid URL"
}

نظرًا لأن 'http ://example.com'عنوان url الخطأ يتم new URL('http ://example.com')طرحه كما هو متوقع TypeError.

8. العمل مع URL

خصائص مثل search, hostname, pathname, hashقابلة للكتابة.

على سبيل المثال ، دعنا نغير اسم المضيف لعنوان URL موجود من red.comإلى blue.io:

const url = new URL('http://red.com/path/index.html')

url.href // 'http://red.com/path/index.html'

url.hostname = 'blue.io'

url.href // 'http://blue.io/path/index.html'

الخصائص origin, searchParamsللقراءة فقط.

9. الخلاصة

المُنشئ URL()طريقة مناسبة جدًا للتحليل (التحليل) والتحقق من صحة عنوان URL في JavaScript.

new URL(relativeOrAbsolute, [, absoluteBase]يأخذ عنوان URL المطلق أو النسبي باعتباره المعلمة الأولى. إذا كانت المعلمة الأولى عبارة عن عنوان URL نسبي ، فيجب أن تكون المعلمة الثانية عنوان URL مطلق - أساس الوسيطة الأولى.

بمجرد إنشاء مثيل URL()، يمكنك الوصول إلى المكونات الرئيسية لعنوان URL:

url.search - سلسلة الاستعلام الأصلية
url.searchParams- مثال URLSearchParamsللحصول على معلمات سلسلة الاستعلام
url.hostname - اسم المضيف
url.pathname - طريقة
url.hash - قيمة التجزئة

كيف يمكنني تحليل عنوان URL في JavaScript؟