Recently in addition to the basic knowledge, saw an interview question address transfer point here:

Parses a complete URL and returns Object containing the same field as window.location

The answer:

/** * parses a URL and generates the field contained in the window.location object * location: * {* href:'Contains the full URL',
 *      origin: 'Include protocol before PathName',
 *      protocol: 'Protocol used by the URL, including the trailing :',
 *      username: 'Username'* password:'password'* host:'Full hostname, including: and port',
 *      hostname: 'Host name, no port'
 *      port: 'Port number',
 *      pathname: 'Path to access resource on server/start',
 *      search: 'the query string,? The beginning of the ',
 *      hash: '# fragment identifier'*} * * @param {string} URL Specifies the URL to be parsed * @return{Object} The Object containing the URL information */function parseUrl(url) {
    var result = {};
    var keys = ['href'.'origin'.'protocol'.'host'.'hostname'.'port'.'pathname'.'search'.'hash'];
    var i, len;
    var regexp = /(([^:]+:)\/\/(([^:\/\?#]+)(:\d+)?) )/(\ [^? #] *)? (\? [^ #] *)? (#. *)? /;

    var match = regexp.exec(url);
	 console.info('match=', match);
	 
    if (match) {
        for (i = keys.length - 1; i >= 0; --i) {
            result[keys[i]] = match[i] ? match[i] : ' ';
        }
    }
	 console.info('result=', result);
    return result;
}

parseUrl("http://test.com:8080?name=1&password=2#page1"); Results: the match = ['http://test.com:8080?name=1&password=2#page1'.'http://test.com:8080'.'http:'.'test.com:8080'.'test.com'.: '8080',
  undefined,
  '? name=1&password=2'.'#page1',
  index: 0,
  input: 'http://test.com:8080?name=1&password=2#page1' 
]

result={ 
  hash: '#page1',
  search: '? name=1&password=2',
  pathname: ' ',
  port: : '8080',
  hostname: 'test.com',
  host: 'test.com:8080',
  protocol: 'http:',
  origin: 'http://test.com:8080',
  href: 'http://test.com:8080?name=1&password=2#page1' 
}
Copy the code

That’s right. What’s hard to understand is the regular expression:

/ ((+) \ [^ :] / / / (([^ : / / /?#]+)(:\d+)?) )/(\ [^? #] *)? (\? [^ #] *)? (#. *)? /

Copy the code

I just recently read the book master regular Expressions (20%, ha ha, I can’t finish), so I can practice

1. The matched array length is 11. Why

2. How does each match up

First of all, before the analysis, first to give you the basic concept, know to skip

? : Matches zero or one * matches zero or more, +: matches zero or more, +: matches once or more, at least once.* Greedy matching: Matches the longest string possible when matches are satisfied, by default, greedy matching (no question mark) // Non-greedy matching: Matches the shortest string possible when matches are satisfied, using? To represent a non-greedy match, right? Non-greedy, minimum match (important, used later) *? Repeat as many times as you like, but as few times as possible. Repeat 1 or more times, but as little as possible? Repeat 0 or 1 times, but as little as possible {n,m}? Repeat n to m times, but as few as possible {n,}? Repeat n times more, but as little as possible. // Look around'jeffs'.replace(/(? <=jeff)(? =s)/i,'"') // Sequential and reverse roundabout,? = the matched target position is followed by S, and the matched target position is immediately preceded by Jeff Jeff target S, and the result output is Jeff"S / ^ : ^ said the / / example: [^ u] / / the inside of the [] yuan character than ordinary characters / 3 /. /. / 22 test (' 03-22) results output: true / / () : marking the beginning and the end of a subexpression. Subexpressions can be retrieved for later useCopy the code

To get to the point, 11 arrays are matched. Why?

Because the match results are determined by the number and order of (), the focus is on the first nine

The last two [index: 0,input: ‘http://test.com:8080?name=1&password=2#page1’] are returned by the regexp.exec function

So the above expression can be broken down into sub-expressions such as:

(((^ :) \ \ / (+) ([^ : / / /?#]+)(:\d+)?) )/(\ [^? #] *)? (\? [^ #] *)? (#. *)?(((^ :) \ \ / (+) ([^ : / / /?#]+)(:\d+)?) )([^ :] + :) (([^ : / / /?#]+)(:\d+)?)([^ : \ / \?#] +)
(:\d+)?
(\/[^?#] *)?(\? [^#] *)?
(#. *)?
Copy the code

See the following figure for specific analysis:

Consider:

ToString ().replace(/\B(? =(\d{3})+(? ! \d))/g,', ')
Copy the code

That’s all for today, please remember to like ~