از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
تجزیه و تحلیل آسان URL ها در جاوا اسکریپت با تجزیه urlParsing URL ها یک کار معمولی است که در طول توسعه وب انجام می شود، و همچنین به نظر می رسد ساده است اما می تواند پیچیده باشد. خیلی وقت‌ها پیش نمی‌آید که با ماژولی مواجه می‌شوید که تجزیه و تحلیل را آنقدر آسان می‌کند که لازم نیست خودتان زیاد فکر کنید. با وجود جوان بودن نسبتا …
سرفصلهای مطلب
معرفی
تجزیه URL ها یک کار معمولی است که در طول توسعه وب انجام می شود، و همچنین کاری است که به نظر ساده است اما می تواند پیچیده شود. خیلی وقت‌ها پیش نمی‌آید که با ماژولی مواجه می‌شوید که تجزیه و تحلیل را آنقدر آسان می‌کند که لازم نیست خودتان زیاد فکر کنید.
علیرغم اینکه نسبتاً جوان است (منتشر شده در ژوئن 2021)، با تقریباً 3 میلیون بارگیری در هفته، تجزیه آدرس یکی از ماژول های برتر برای تجزیه URL ها در جاوا اسکریپت است.
در این مقاله، نگاهی خواهیم داشت به تمام امکانات آن و اینکه چگونه زندگی ما را آسان می کند.
بخش هایی از URL
URL دارای بخش‌های زیادی است، بنابراین تقسیم آن به صورت تکه‌تکه بدون تجزیه رشته‌های خالص ابزار قدرتمندی است. هر URL دارای قسمت های اصلی یکسانی است که بسته به سایر قسمت ها اختیاری است روی پرس و جو یا اقدام
عناصر تشکیل دهنده یک URL عبارتند از:
- طرح – برای شناسایی پروتکل مورد استفاده برای واکشی منبع استفاده می شود روی اینترنت
- برخی از پروتکل های محبوب تر عبارتند از: HTTP، HTTPS، IP، ICMP، TCP، UDP، و غیره.
- میزبان – نام host که منبعی را دارد که ما به دست می آوریم (
www.somehost.com) - مسیر – مسیر منبع واقع شده روی را host (
www.somehost.com/path/to/index.html) - رشته پرس و جو – رشته حاوی ارزش کلیدی جفت (
www.somehost.com/index؟key=value&key2=value2)
اینها تکه‌های اصلی URL هستند، اما خواهیم دید که می‌توانیم حتی بیشتر را با آن بازیابی کنیم تجزیه آدرس، در بسیار خواندنی و از نو، قالب قابل تجزیه.
نصب و راه اندازی ماژول parse-url
ما با ایجاد یک پوشه برای پروژه کوچک خود به نام شروع می کنیم parse_url. در پوشه، می توانیم ماژول را با استفاده از آن نصب کنیم npm:
$ npm i parse-url
برای استفاده از ماژول در کد ما (در index.js فایل)، ما باید require آی تی:
const parseUrl = require('parse-url');
همین است، ما خوب هستیم! بیایید ببینیم این ماژول چه چیزی را ارائه می دهد.
تجزیه URL
برای شروع، بیایید یک URL ساده در نظر بگیریم: https://www.rasanegar.com. سازنده برای parseUrl در دو پارامتر می گیرد، string_url و normalize، با normalize اختیاری بودن
به طور پیش فرض روی آن تنظیم شده است false و فرض بر این است که URL های ارائه شده در حال حاضر عادی شده اند. چه زمانی true، یک URL غیر عادی را به یک URL عادی تبدیل می کند. مثلا:
someRandomUrl.com:80 --> http://someRandomUrl.com
به این می گویند عادی سازی URL. را parse-url ماژول نرمال سازی خود را پایه گذاری می کند روی را normalize-url ماژول و normalize-url ماژول دقیقاً همانطور که در بالا نشان داده شده است کار می کند.
بیایید یک URL را تجزیه کنیم:
const url = 'https://www.rasanegar.com/';
const parsedUrl = parseUrl(url);
console.log(parsedUrl)
خروجی کد به فرمت JSON خواهد بود که از عناصر آن URL تشکیل شده است:
{
protocols: ( 'https' ),
protocol: 'https',
port: null,
resource: 'www.rasanegar.com',
user: '',
pathname: '',
hash: '',
search: '',
href: 'https://www.rasanegar.com',
query: (Object: null prototype) {}
}
همانطور که می بینید موارد زیادی استخراج شده اند، اگرچه برخی از آنها خالی هستند زیرا URL ارائه شده کاملاً خالی است. بیایید نگاهی به عناصر موجود در این JSON بیندازیم:
protocols– لیست پروتکل های مورد استفاده در URL (می تواند بیشتر باشد)protocol– اول ازprotocolsport– یک پورت (در صورت ارائه)resource– hostuser– کاربر در hostسرور (کاربر@host)pathname– مسیر رسیدن به منبعhash– در صورت ارائه، اطلاعات پس از#(هش) – معمولاً لنگرها روی یک وب pagesearch– یک رشته پرس و جوhref– URL کامل
یک مثال جالب با استفاده از پیوندهای GitHub یافت می شود که یکی از دلایل ایجاد این ماژول در وهله اول بود. پیوندهای GitHub در مقایسه با سایر URL هایی که مشاهده می کنید می توانند بسیار پیچیده و پیچیده باشند روی به صورت روزانه، و می تواند شامل چندین پروتکل و کاربران باشد:
const url = 'git+ssh://(email protected)/path/to/resource.git';
const parsedUrl = parseUrl(url);
console.log(parsedUrl)
این نتیجه در:
{
protocols: ( 'git', 'ssh' ),
protocol: 'git',
port: null,
resource: 'somehost.com',
user: 'git',
pathname: '/path/to/resource.git',
hash: '',
search: '',
href: 'git+ssh://(email protected)/path/to/resource.git',
query: (Object: null prototype) {}
}
پروتکل لیست در اینجا تغییر کرده است، زیرا چندین پروتکل در حال استفاده هستند. با این حال، هنگام چاپ اطلاعات URL به اولین مورد اشاره می شود. ما نیز می توانیم ببینیم pathname اکنون با مسیر منبع پر شده است.
یکی از نقاط فروش parse-url این واقعیت است که با URL های Git بسیار خوب کار می کند.
بیایید واقعاً URL را بالا ببریم و یک هش و چند عبارت کلیدی-مقدار را شامل کنیم:
const url = 'git+ssh://(email protected):30/path/to/resource.git؟key1=value1&key2=value2#anchor';
const parsedUrl = parseUrl(url);
console.log(parsedUrl)
این مثال با مثال قبلی فقط کمی متفاوت است، فقط کافی است مقادیر خالی در مثال قبلی را پر کنید. خروجی خواهد بود:
{
protocols: ( 'git', 'ssh' ),
protocol: 'git',
port: 30,
resource: 'somehost.com',
user: 'git',
pathname: '/path/to/resource.git',
hash: 'anchor',
search: 'key1=value1&key2=value2',
href: 'git+ssh://(email protected):30/path/to/resource.git؟key1=value1&key2=value2#anchor',
query: (Object: null prototype) { key1: 'value1', key2: 'value2' }
}
پورت، هش و پرس و جو در حال حاضر وجود دارد – و ما حتی کلیدها و مقادیر پرس و جو را داریم! ساختار داده‌های تجزیه‌شده در قالبی قابل خواندن برای انسان، که در سراسر جهان پذیرفته شده است و به راحتی قابل تجزیه است، در تجزیه URL ها واقعاً کمک کننده است.
اگرچه، این تنها خروجی زیبای چاپ شده شیء برگشتی است. آنچه به ما اجازه می دهد واقعا کار با این عناصر تجزیه شده این واقعیت است که همه آنها فیلدهای شیء برگشتی هستند که به راحتی می توانیم به آنها دسترسی داشته باشیم:
console.log("The protocols used in the URL are " + parsedUrl.protocols);
console.log("The port used in the URL is " + parsedUrl.port);
console.log("The resource in the URL is " + parsedUrl.resource);
console.log("The user in the URL is " + parsedUrl.user);
console.log("The pathname in the URL is " + parsedUrl.pathname);
console.log("The hash in the URL is " + parsedUrl.hash);
console.log("The search part in the URL is " + parsedUrl.search);
console.log("Full URL is " + parsedUrl.href);
اجرای این کد نتیجه می دهد:
The protocols used in the URL are git,ssh
The port used in the URL is 30
The resource in the URL is somehost.com
The user in the URL is git
The pathname in the URL is /path/to/resource.git
The hash in the URL is anchor
The search part in the URL is key1=value1&key2=value2
Full URL is git+ssh://(email protected):30/path/to/resource.git؟key1=value1&key2=value2#anchor
در نهایت، بیایید نتایج عادی سازی URL را ببینیم. اگر یک URL غیر عادی ارسال کنیم، مانند rasanegar.com:3000/path/to/index.html#anchor، به عنوان یک رشته URL:
const url = 'rasanegar.com:3000/path/to/index.html#anchor';
const parsedUrl = parseUrl(url, true);
console.log(parsedUrl);
این نتیجه در:
{
protocols: ( 'http' ),
protocol: 'http',
port: 3000,
resource: 'rasanegar.com',
user: '',
pathname: '/path/to/index.html',
hash: 'anchor',
search: '',
href: 'http://rasanegar.com:3000/path/to/index.html#anchor',
query: (Object: null prototype) {}
}
می بینیم که تجزیه کننده به طور خودکار اختصاص داده می شود http به عنوان پروتکل و پر شد href دارایی به درستی قسمت‌های از دست رفته پر نمی‌شوند، زیرا در ابتدا ارائه نشده‌اند.
اگر بخواهیم ویژگی عادی سازی را غیرفعال کنیم، در حالی که یک URL غیر عادی ارائه می دهیم، نتایج خاموش می شوند:
{
protocols: (),
protocol: 'file',
port: null,
resource: '',
user: '',
pathname: 'rasanegar.com:3000/path/to/index.html',
hash: 'anchor',
search: '',
href: 'rasanegar.com:3000/path/to/index.html#anchor',
query: (Object: null prototype) {}
}
توجه داشته باشید: اگر تنظیم کنید normalize به true و یک URL از قبل نرمال شده ارائه دهید، هیچ اتفاقی نمی افتد و به درستی تجزیه می شود. با توجه به این – شما معمولاً می خواهید پارامتر را روی true تنظیم کنید.
از آنجا که parsedUrl یک شی است، ویژگی های آن قابل تغییر است. ما به سادگی می توانیم به هر ویژگی دسترسی داشته باشیم و آن را تغییر دهیم:
console.log(parsedUrl.port) // 3000
parsedUrl.port = 4000
console.log(parsedUrl.port) // 4000
با این حال، این رفتار مطلوب نیست و نباید انجام شود، زیرا این ماژول صرفا برای تجزیه URL ها استفاده می شود. تنها زمانی که باید آن را تغییر دهید parsedUrl مانند این زمانی است که شما به ارزش برخی از اموال اطمینان دارید، در غیر این صورت ممکن است به پای خود شلیک کنید.
نتیجه
ما دیده ایم parse-url به ما این امکان را می دهد که به راحتی URL ها را بدون هیچ گونه پردازش اضافی تجزیه و تحلیل کنیم و آن را ایجاد کنیم process تجزیه URL ها بسیار ساده و قابل خواندن است.
همه چیز را به دلخواه تقسیم می کند و ایجاد می کند parsedUrl شیئی که مانند هر شیء دیگری قابل دسترسی و همچنین تغییر است. این ماژول به همان اندازه ساده است، با خروجی و نحو منظم و تا حد امکان ساده است که نتایج سریع و دقیقی را به همراه دارد.
(برچسب‌ها برای ترجمه)# جاوا اسکریپت
منتشر شده در 1403-01-14 15:39:02
