জাভাস্ক্রিপ্ট - ইউআরএল পথের অংশটি পান


179

জাভাস্ক্রিপ্ট ব্যবহার করে কোনও ইউআরএল থেকে কেবল পথটি বের করার সঠিক উপায় কী?

উদাহরণ:
আমার ইউআরএল
http://www.somedomain.com/account/search?filter=a# শীর্ষ রয়েছে
তবে আমি এই অংশ / অ্যাকাউন্ট / সন্ধানটি পেতে চাই

আমি এখানে jQuery ব্যবহার করছি যদি এমন কোনও কিছু থাকে যা লাভ করা যায়।

উত্তর:


425

বিল্ট-ইন window.locationঅবজেক্টের একটি সম্পত্তি রয়েছে যা এটি বর্তমান উইন্ডোর জন্য সরবরাহ করবে।

// If URL is http://www.somedomain.com/account/search?filter=a#top

window.location.pathname // /account/search

// For reference:

window.location.host     // www.somedomain.com (includes port if there is one)
window.location.hostname // www.somedomain.com
window.location.hash     // #top
window.location.href     // http://www.somedomain.com/account/search?filter=a#top
window.location.port     // (empty string)
window.location.protocol // http:
window.location.search   // ?filter=a  


আপডেট করুন, যে কোনও URL এর জন্য একই বৈশিষ্ট্যগুলি ব্যবহার করুন:

দেখা যাচ্ছে যে এই স্কিমাটি ইউআরএলটিলস নামক একটি ইন্টারফেস হিসাবে প্রমিত করা হচ্ছে এবং কী অনুমান করে? বিদ্যমান window.locationবস্তু এবং অ্যাঙ্কর উপাদান উভয়ই ইন্টারফেস প্রয়োগ করে।

সুতরাং আপনি যে কোনও ইউআরএল জন্য উপরে একই বৈশিষ্ট্য ব্যবহার করতে পারেন - কেবল ইউআরএল দিয়ে একটি অ্যাঙ্কর তৈরি করুন এবং বৈশিষ্ট্যগুলি অ্যাক্সেস করুন:

var el = document.createElement('a');
el.href = "http://www.somedomain.com/account/search?filter=a#top";

el.host        // www.somedomain.com (includes port if there is one[1])
el.hostname    // www.somedomain.com
el.hash        // #top
el.href        // http://www.somedomain.com/account/search?filter=a#top
el.pathname    // /account/search
el.port        // (port if there is one[1])
el.protocol    // http:
el.search      // ?filter=a

[1]: বন্দর অন্তর্ভুক্ত বৈশিষ্ট্যগুলির জন্য ব্রাউজার সমর্থন সামঞ্জস্যপূর্ণ নয়, দেখুন: http://jessepollak.me/chrome-was-wrong-ie-was-right

এটি ক্রোম এবং ফায়ারফক্সের সর্বশেষতম সংস্করণগুলিতে কাজ করে । আমার কাছে পরীক্ষার জন্য ইন্টারনেট এক্সপ্লোরার সংস্করণ নেই, সুতরাং দয়া করে জেএসফিডাল উদাহরণ দিয়ে নিজেকে পরীক্ষা করুন।

জেএসফিডেলের উদাহরণ

URLঅ্যাঙ্কর উপাদান ছাড়াই এমন একটি আসন্ন অবজেক্ট রয়েছে যা ইউআরএলগুলির জন্য এই সমর্থনটি সরবরাহ করবে। দেখে মনে হচ্ছে কোনও স্থিতিশীল ব্রাউজার এখনই এটি সমর্থন করে না, তবে এটি ফায়ারফক্স ২ in এ আসবে বলে মনে হয় When আপনি যখন মনে করেন এর পক্ষে আপনার সমর্থন থাকতে পারে, তবে এটি এখানে চেষ্টা করে দেখুন


ওপি "উইন্ডোটির বর্তমান ইউআরএল" নয়, "একটি ইউআরএল" চেয়েছিল। যদি আপনার স্ট্রিং হিসাবে ইউআরএল থাকে?
জোশ নয়ে

2
@ জোশনেই সক্রিয় করেছে আপনি এখন অ্যাঙ্কর উপাদানগুলিতে একই বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন। আপডেট উত্তর দেখুন।
নিকোল

সুন্দর তথ্যের জন্য ধন্যবাদ। আমি IE 9 এবং IE 8 (উভয় কাজের অনুকরণে আই 9 ব্যবহার করুন) দিয়ে পরীক্ষা করেছি। অবশ্যই ক্রোম এবং ফায়ারফক্সের সর্বশেষ সংস্করণে কাজ করে :)
ঝাও

49
window.location.href.split('/');

আপনাকে সমস্ত URL অংশযুক্ত একটি অ্যারে দেবে, যা আপনি সাধারণ অ্যারের মতো অ্যাক্সেস করতে পারেন।

বা কেবলমাত্র পথের অংশগুলি সহ @ ডিলান দ্বারা প্রস্তাবিত আরও বেশি মার্জিত সমাধান:

window.location.pathname.split('/');

2
window.location.pathname.split ( '/'); বেশিরভাগ ক্ষেত্রেই যদি আপনি স্ট্যান্ডার্ড প্রোটোকল এবং www ইত্যাদি বিয়ডের বিভিন্ন বিভাগে অ্যাক্সেস করার চেষ্টা করছেন তবে বেশিরভাগ ক্ষেত্রেই এটি একটি আরও মার্জিত সমাধান
ডিলান

1
window.location.pathname.split ('/')। ফিল্টার (ফাংশন (v) {রিটার্ন ভি;}); জাভাস্ক্রিপ্ট ১.6 এবং উপরেের জন্য খালি উপাদানগুলি সরিয়ে ফেলবে।
ধাওয়াল দেশাই

28

এটি যদি বর্তমান ইউআরএল উইন্ডো ব্যবহার করে থাকে oc লোকেশন.পথের নাম অন্যথায় এই নিয়মিত অভিব্যক্তিটি ব্যবহার করুন:

var reg = /.+?\:\/\/.+?(\/.+?)(?:#|\?|$)/;
var pathname = reg.exec( 'http://www.somedomain.com/account/search?filter=a#top' )[1];

প্রায় নিখুঁত - তবে উইন্ডো.লোকেশন.পথনামের বিপরীতে এটি উইন্ডোজের পাতনামে ড্রাইভ লেটারকে অন্তর্ভুক্ত করে না।
থিও

1
কোনও রেজেক্সের জন্য যা /.+?\:\/\/.+?(\/.+?)?(?:#|\?|)?$/
কোনও পাথের

3

ইউআরএল নামে একটি দরকারী ওয়েব এপিআই পদ্ধতি রয়েছে

const url = new URL('http://www.somedomain.com/account/search?filter=a#top');
console.log(url.pathname.split('/'));
const params = new URLSearchParams(url.search)
console.log(params.get("filter"))


0

আপনি যদি কোনও ভেরিয়েবলের মধ্যে থাকা কোনও ইউআরএলটির অংশ পেতে চান তবে আমি ইউআরএল-পার্সের প্রস্তাব দিতে পারি

const Url = require('url-parse');
const url = new Url('https://github.com/foo/bar');

ডকুমেন্টেশন অনুসারে, এটি নিম্নলিখিত অংশগুলি বের করে:

প্রত্যাবর্তিত ইউআরএল দৃষ্টান্তে নিম্নলিখিত বৈশিষ্ট্য রয়েছে:

প্রোটোকল: ইউআরএলের প্রোটোকল স্কিম (উদাঃ http :)। স্ল্যাশস: একটি বুলিয়ান যা প্রোটোকলটিকে দুটি ফরোয়ার্ড স্ল্যাশ (//) অনুসরণ করে কিনা তা নির্দেশ করে। প্রমাণীকরণ: প্রমাণীকরণের তথ্য অংশ (যেমন ব্যবহারকারীর নাম: পাসওয়ার্ড)। ব্যবহারকারীর নাম: মৌলিক প্রমাণীকরণের ব্যবহারকারীর নাম। পাসওয়ার্ড: মৌলিক প্রমাণীকরণের পাসওয়ার্ড। হোস্ট: পোর্ট নম্বর সহ হোস্টের নাম। হোস্ট-নেম: পোর্ট নম্বর ছাড়াই হোস্টের নাম। পোর্ট: portচ্ছিক পোর্ট নম্বর। পথের নাম: ইউআরএল পাথ। কোয়েরি: পার্সিং অবজেক্টে কোয়েরি স্ট্রিং রয়েছে, যদি না পার্সিং মিথ্যাতে সেট করা থাকে। হ্যাশ: পাউন্ড-সাইন (#) সহ ইউআরএলের "খণ্ড" অংশ। href: সম্পূর্ণ ইউআরএল। উত্স: ইউআরএল এর উত্স।


0

আপনার যদি বিমূর্ত URL টি স্ট্রিং থাকে (বর্তমান থেকে নয় window.location), আপনি এই কৌশলটি ব্যবহার করতে পারেন:

let yourUrlString = "http://example.com:3000/pathname/?search=test#hash";

let parser = document.createElement('a');
parser.href = yourUrlString;

parser.protocol; // => "http:"
parser.hostname; // => "example.com"
parser.port;     // => "3000"
parser.pathname; // => "/pathname/"
parser.search;   // => "?search=test"
parser.hash;     // => "#hash"
parser.host;     // => "example.com:3000"

Jlong ধন্যবাদ

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.