Javascript Course

The function presented in this page ( urlData() ) can be used to get /extract the domain name and other data from URL address.
The function receives a string with the URL address, and returns an object containing these data:
Protocol, Page Path, File-name, search parts, port, and hash part.

Code of the function (click to select it):
// Extract data from URL address
// Returns an object with parts of the URL address:
// protocol, domain-name, port, path, file-name, search-string, search-object, hash
function urlData(url){ // From: https://coursesweb.net/javascript/
  // object that will be returned
  var re = {protocol:'', domain:'', port:80, path:'', file:'', search_str:'', search_obj:{}, hash:''};

  // creates an anchor element, and adds the url in "href" attribute
  var a_elm  = document.createElement('a');
  a_elm.href = url;

  // adds URL data in re object, and returns it
  re.protocol = a_elm.protocol.replace(':', '');
  re.domain = a_elm.hostname.replace('www.', '');
  if(a_elm.port !='') re.port = a_elm.port;
  re.path = a_elm.pathname;
  if(a_elm.pathname.match(/[^\/]+[\.][a-z0-9]+$/i) != null) re.file = a_elm.pathname.match(/[^\/]+[\.][a-z0-9]+$/i)[0];
  re.search_str = a_elm.search.replace('?', '');

  //get search-data into an object {name:value}, in case there are multiple pairs name=value
  var src_data = re.search_str.split('&');
  for(var i=0; i<src_data.length; i++){
    var ar_val = src_data[i].split('=');   //separate name and value from each pair
    re.search_obj[ar_val[0]] = ar_val[1];
  }

  re.hash = a_elm.hash.replace('#', '');  //get #hash part
  return re;
}
Example:
<div id="urld">Here it is added URL data.</div>
<script>
// Extract data from URL address
// Returns an object with parts of the URL address:
// protocol, domain-name, port, path, file-name, search-string, search-object, hash
function urlData(url){ // From: https://coursesweb.net/javascript/
  // object that will be returned
  var re = {protocol:'', domain:'', port:80, path:'', file:'', search_str:'', search_obj:{}, hash:''};

  // creates an anchor element, and adds the url in "href" attribute
  var a_elm  = document.createElement('a');
  a_elm.href = url;

  // adds URL data in re object, and returns it
  re.protocol = a_elm.protocol.replace(':', '');
  re.domain = a_elm.hostname.replace('www.', '');
  if(a_elm.port !='') re.port = a_elm.port;
  re.path = a_elm.pathname;
  if(a_elm.pathname.match(/[^\/]+[\.][a-z0-9]+$/i) != null) re.file = a_elm.pathname.match(/[^\/]+[\.][a-z0-9]+$/i)[0];
  re.search_str = a_elm.search.replace('?', '');

  //get search-data into an object {name:value}, in case there are multiple pairs name=value
  var src_data = re.search_str.split('&');
  for(var i=0; i<src_data.length; i++){
    var ar_val = src_data[i].split('=');   //separate name and value from each pair
    re.search_obj[ar_val[0]] = ar_val[1];
  }

  re.hash = a_elm.hash.replace('#', '');  //get #hash part
  return re;
}

// Test
var url = 'https://coursesweb.net:80/javascript/index.php?pg=tutorial&id=89#hash_part';
var url_data = urlData(url);

// displays URL data in #urld
document.getElementById('urld').innerHTML = 'protocol : '+ url_data.protocol +'<br>domain : '+ url_data.domain +'<br>port : '+ url_data.port +'<br>path : '+ url_data.path +'<br>file : '+ url_data.file +'<br>search_str : '+ url_data.search_str +'<br>search_obj : '+ JSON.stringify(url_data.search_obj) +'<br>hash : '+ url_data.hash;
</script>
Result:
protocol : http
domain : coursesweb.net
port : 80
path : /javascript/index.php
file : index.php
search_str : pg=tutorial&id=89
search_obj : {"pg":"tutorial", "id":"89"}
hash : hash_part

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
Get Domain Name and other Data from URL

Last accessed pages

  1. AJAX with POST and PHP (16344)
  2. Wake Up! (11271)
  3. AJAX Course, free Lessons (15628)
  4. HTML Course - Free Lessons (21121)
  5. Uploading images to server with Ajax (5862)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (521)
  2. PHP Unzipper - Extract Zip, Rar Archives (423)
  3. SHA256 Encrypt hash in JavaScript (403)
  4. Read Excel file data in PHP - PhpExcelReader (360)
  5. Create simple Website with PHP (333)