نحوه تجزیه یک URL در جاوا اسکریپت (راهنمای کامل)

هنگام کار با URL ها در کد خود، به مکانیزمی نیاز دارید که به شما امکان می دهد به راحتی به بخش های مختلف URL ها دسترسی داشته باشید.

این یک راهنمای کامل برای تجزیه URL ها در جاوا اسکریپت است. شما یاد خواهید گرفت که چگونه به بخش های خاصی از URL های خود مانند نام میزبان، مسیر فایلیا پارامترهای پرس و جو.

این راهنما از بومی استفاده می کند url() سازنده و اجزای اصلی آن

در اینجا یک راه حل مرجع سریع برای دسترسی به هر جزء اصلی URL با جاوا اسکریپت وجود دارد:

// Example URL
const exampleURL = "https://app.example.com:80/favorites/?ref=codingem.com#intro"
let URLObject = new URL(exampleURL)

// 1: Protocol
URLObject.protocol

// 2: Subdomain
URLObject.hostname.split(".")[0]

// 3: Hostname
URLObject.hostname

// 4: Port
URLObject.port

// 5: Path
URLObject.pathname

// 6: Query parameters
URLObject.search

// 7: Fragment
URLObject.hash

ساختار URL

در اینجا تصویری از URL سنتی و بخش های اصلی آن آورده شده است.

یک URL معمولی ممکن است از بخش های زیر تشکیل شده باشد:

1. پروتکل
2. زیر دامنه.
3. نام دامنه.
4. بندر.
5. مسیر فایل.
6. پارامترهای پرس و جو
7. قطعه.

توجه داشته باشید که همه قسمت ها در همه URL ها فهرست نشده اند. به عنوان مثال، پورت و قطعه معمولا وجود ندارد.

حتما راهنمای کامل من در مورد URL ها را بخوانید تا در مورد ساختار URL بیشتر بدانید.

سازنده URL() جاوا اسکریپت

در جاوا اسکریپت می توانید از inline استفاده کنید url() سازنده برای مدیریت URL ها در کد شما.

در این راهنما، من عمدتا از URL نمونه زیر استفاده خواهم کرد:

https://app.example.com:80/favorites/?ref=codingem.com#intro

به عنوان مثال، در اینجا یک URL نمونه است:

توجه کنید که چگونه url() شی قسمت های مختلف url را از url ورودی که به آن دادم می گیرد. در سمت راست می توانید نمایش متنی شی URL را ببینید.

برای دسترسی به بخش خاصی از شی URL، می توانید به سادگی از علامت نقطه برای دسترسی به هر یک از بخش های URL بالا استفاده کنید. به عنوان مثال، برای دریافت پروتکل URL، تماس بگیرید sampleURL.protocol.

تجزیه قطعات URL

بیایید به تجزیه اجزای جداگانه یک URL به صورت جداگانه نگاه کنیم.

1. پروتکل

💡 پروتکل “بخش اول” URL است که به آن نیز معروف است طرح. پروتکل مجموعه ای از قوانین را برای انتقال، قالب بندی و نمایش منابع تعریف می کند.

برای دسترسی به پروتکل URL با جاوا اسکریپت، ادامه مطلب را بخوانید پروتکل دارایی a آدرس URL هدف – شی.

به عنوان مثال، اجازه دهید پروتکل URL مثال را در نظر بگیریم:

const exampleURL = "https://app.example.com:80/favorites/?ref=codingem.com#intro"
let URLObject = new URL(exampleURL)

const protocol = URLObject.protocol

console.log(protocol)

خروجی:

https:

2. ساب دامنه

💡 زیر دامنه قسمت قبل از نام دامنه است. رایج ترین ساب دامنه است www.

زیر دامنه ها وب سایت را به بخش های منطقی تقسیم می کنند، مانند فروشگاه، وبلاگیا برنامه (blog.example.com)

در پشت صحنه، یک زیر دامنه یک زیر پوشه در فهرست اصلی یک وب سایت است.

این تنها بخش مشکل از کل آموزش است.

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

مثلا:

const exampleURL = "https://app.example.com:80/favorites/?ref=codingem.com#intro"
let URLObject = new URL(exampleURL)

const subdomain = URLObject.hostname.split(".")[0]

console.log(subdomain)

خروجی:

app

3. نام دامنه (نام میزبان)

💡 نام دامنه بخش “به یاد ماندنی” URL است. این نام وب سایتی است که کاربران از طریق آن می توانند به آن دسترسی داشته باشند.

مثلا، example.com یک نام دامنه (یا نام میزبان) است.

این .com بخشی برای دامنه سطح بالا TLD نامیده می شود.

برای دسترسی به نام دامنه یک URL با جاوا اسکریپت، ادامه مطلب را بخوانید نام میزبان دارایی a آدرس URL هدف – شی.

به عنوان مثال، اجازه دهید نام میزبان URL مثال را در نظر بگیریم:

const exampleURL = "https://app.example.com:80/favorites/?ref=codingem.com#intro"
let URLObject = new URL(exampleURL)

const domain = URLObject.hostname

console.log(domain)

خروجی:

app.example.com

4. بندر

💡 بندر دروازه ای است که مرورگر از طریق آن به منبع موجود در سرور دسترسی پیدا می کند. دلیل اینکه معمولاً پورتی را در URL نمی بینید این است که به طور پیش فرض در پشت صحنه تنظیم شده است 80 یا 443.

برای دسترسی به پورت URL با جاوا اسکریپت، ادامه مطلب را بخوانید بندر دارایی a آدرس URL هدف – شی.

به عنوان مثال، اجازه دهید پورت URL مثال را در نظر بگیریم:

const exampleURL = "https://app.example.com:80/favorites/?ref=codingem.com#intro"
let URLObject = new URL(exampleURL)

const port = URLObject.port

console.log(port)

خروجی:

80

5. مسیر

💡 مسیر دایرکتوری را که می خواهید به یک فایل دسترسی داشته باشید را مشخص می کند. به یاد داشته باشید که یک وب سایت چیزی نیست جز یک دایرکتوری با زیرپوشه ها و فایل هایی که روی یک سرور قرار دارند. برای دسترسی به آنها، باید مسیرهای آنها را بدانید!

برای دسترسی به نام مسیر URL، بخوانید مسیر دارایی a آدرس URL هدف – شی.

برای مثال، بیایید مسیر URL را به عنوان مثال در نظر بگیریم:

const exampleURL = "https://app.example.com:80/favorites/?ref=codingem.com#intro"
let URLObject = new URL(exampleURL)

const path = URLObject.pathname

console.log(path)

خروجی:

/favorites/

6. درخواست پارامترها

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

برای دسترسی به پارامترهای پرس و جو (یا رشته پرس و جو) یک URL، ادامه مطلب را بخوانید جستجو کردن دارایی a آدرس URL هدف – شی.

به عنوان مثال، بیایید عبارت جستجوی درج شده در URL نمونه را در نظر بگیریم:

const exampleURL = "https://app.example.com:80/favorites/?ref=codingem.com#intro"
let URLObject = new URL(exampleURL)

const queryParameters = URLObject.search

console.log(queryParameters)

خروجی:

?ref=codingem.com

7. قطعه قطعه

💡 قطعه (همچنین هش، لنگر) منجر به یک منبع ثانویه در پشت URL می شود. رایج ترین مورد استفاده برای اسنیپت ها بردن کاربر به قسمت خاصی از پست یا صفحه وبلاگ است.

برای دسترسی به قطعه URL با جاوا اسکریپت، ادامه مطلب را بخوانید هش دارایی a آدرس URL هدف – شی.

به عنوان مثال، بیایید هش URL مثال را در نظر بگیریم:

const exampleURL = "https://app.example.com:80/favorites/?ref=codingem.com#intro"
let URLObject = new URL(exampleURL)

const fragment = URLObject.hash

console.log(fragment)

خروجی:

#intro

اعتبار سنجی URL

یکی از مزیت های استفاده url() سازنده این است که شما اعتبار URL را همزمان دریافت می کنید.

اگر URL نامعتبر است، url() سازنده a TypeError.

بیایید به نمونه ای از اعتبارسنجی یک URL نادرست نگاه کنیم:

try {
  const url = new URL('http::://example.com')
} catch (err) {
  console.log(err)
}

خروجی:

{ TypeError [ERR_INVALID_URL]: Invalid URL: http::://example.com
    at onParseError (internal/url.js:241:17)
    at new URL (internal/url.js:319:5)
    at Object.<anonymous> (/tmp/YYhiRSgKGo.js:4:15)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
    at startup (internal/bootstrap/node.js:283:19) input: 'http::://example.com' }

همانطور که می بینید، خطا می گوید که URL نامعتبر است.

اعتبار سنجی URL یک اثر جانبی خوب استفاده از آن است url() سازنده

دستکاری URL

توجه داشته باشید که اکثر اجزای URL شیء URL قابل نوشتن هستند. (شما می توانید ویژگی های فقط خواندنی را اینجا ببینید.)

این بدان معناست که می توانید به راحتی بخش هایی از URL را با استفاده از جاوا اسکریپت تغییر دهید.

به عنوان مثال، اجازه دهید پروتکل را از HTTP به HTTPS تغییر دهیم:

const url = new URL('http://www.example.com')
url.protocol = "https"

console.log(url.protocol)

خروجی:

https:

جمعش کن

امروز یاد گرفتید که چگونه URL ها را در پروژه جاوا اسکریپت خود تجزیه کنید.

برای خانه، ساخته شده در url() سازنده می تواند به شما کمک کند تا با URL ها در کد خود مقابله کنید. اس url() سازنده، می‌توانید بخش‌های خاصی از URL، مانند نام میزبان، مسیر، یا رشته‌های پرس و جو را تجزیه کنید.

همچنین، url() سازنده قبل از ایجاد شی URL به طور خودکار اعتبار URL را برای شما انجام می دهد. همچنین می توانید برخی از قسمت های قابل نوشتن URL را با استفاده از شی URL تغییر دهید.

با تشکر برای خواندن. کد نویسی مبارک!

همچنین بخوانید