Use Regex in Javascript to get the filename in a URL - javascript

I'm using JavaScript to try and get the filename from the URL.
I can get it using this:
var fn=window.location.href.match(/([^/])+/g);
alert(fn[fn.length-1]); // get the last element of the array
but is there an easier way to get it (e.g., without having to use fn[fn.length-1]
Thanks!!

Add a $ at the end so you only get the last part:
window.location.href.match(/[^/]+$/g);

Personally, I try to use simple string manipulation for easy tasks like this. It makes for more readable code (for a person not very familiar with RegEx).
var url = window.location.pathname;
var filename = url.substring(url.lastIndexOf('/')+1);
Or simply:
var filename = window.location.pathname.substring(window.location.pathname.lastIndexOf('/')+1);
Additional Information
Not that it matters for something so trivial, but this method is also more performant than RegEx: http://jsperf.com/get-file-name

How about:
window.location.href.match(/\/([^/]+)$/)[1];

you can use .pop() to get the last element of an array;
alert(fn.pop());

There is a jQuery plugin that makes it easy to parse URLs and provide access to their different parts. One of the things it does is return the filename. Here's the plugin on GitHub:
https://github.com/allmarkedup/jQuery-URL-Parser
I would recommend using that and avoid reinventing the wheel. Regular expressions is an area of programming where this is particularly applicable.

I recommend to also remove any '#' or '?' string, so my answer is:
var fn = window.location.href.split('/').pop().replace(/[\#\?].*$/,'');
alert(fn);
split('/').pop() removes the path
replace(/[\#\?].*$/,'') replace '#' or '?' until the end $ by empty string

Related

Getting query string from re written URL

I have url "SampleProject/profile/aA12". How can I get the value of the id from my rewritten URL using javascript? I want to get the "aA12" value.
Im using htaccess rewrite to rewrite my URL. Im new in rewritting url's. Any help will be appreciated. More powers and thank you.
You can use regex.
Try
'SampleProject/profile/aA12'.match(/\SampleProject\/profile\/(\w+)/)
'SampleProject/profile/aA12/xxx'.match(/\SampleProject\/profile\/(\w+)/)
'aA12' will be matched in both cases.
There are going to be quite a few ways to achieve your goal with JavaScript. A simple solution could be something like this:
let myURL = "SampleProject/profile/aA12";
let result = myURL.split('/').pop();
// returns "aA12"
The .split('/') method is dividing your string up into an array using the / character, and .pop() is simply returning the last element of that array.
Hope this helps! If you were looking for more advanced matching, i.e. if you wanted to ignore a potential query string on the end of the URL parameter, you could use regular expressions.
Their is a many way that you can use to achieve the desired method i made you a code pen in this link
var url = "SampleProject/profile/aA12";
let res = url.split('/').pop();
console.log(res)
https://codepen.io/anon/pen/KQxNja

Getting the #id from current URL

I'm looking for a way to retrieve the #anchor part from the current URL with JavaScript.
For example:
http://my-page.com/index.html#contact-us
Would return contact-us.
I could split the URI at the eventual # and then take the last piece, but I'm looking for a somewhat nicer and cleaner suggestion. A native (jQuery?) function would be great, but I guess I'm asking for too much.
Use location.hash:
location.hash.slice(1);
It starts with a #, hence .slice(1). Given an arbitrary string, you can use the built-in URL-parsing feature by creating a <a> element, and set the href, then read other properties, such as protocol, hostname, hash, etc. jQuery example:
$('a').attr('href', url)[0].hash;
location.hash.replace(/^#/, "")
If you work with a variable:
var url = "http://my-page.com/index.html#contact-us";
var hash = url.substring(url.indexOf("#") + 1);

Determining the presence of a file with JavaScript?

I have folder/file tree generated by JavaScript where the folder and files each have checkbox inputs with paths associated with them, like:
/var/www/site/user/folder7/ or
/var/www/site/user/folder7/file.txt or
/var/www/site/user/folder7/file.? (? being any file extension)
In the case of these paths I need only
/var/www/site/user/folder7
I know that normally to remove file names one would use something like:
var full_path = node.context.nextElementSibling.value;
var folder_target_path = full_path.substring(0, full_path.lastIndexOf("/"));
However this return either:
/var/www/site/user/folder7 or
/var/www/site/user
I could use the lastIndexOf() method if I could use some regex to find .? and then up to the last '/'; however I am fairly new to javascript and have never used regex in it.
Could you suggest an effecient way to get only the folder and not the file path in all cases?
Regards,
Steve
Here's the W3 tutorial on JavaScript and regex:
http://www.w3schools.com/jsref/jsref_obj_regexp.asp
var folder_target_path = full_path.replace(/\/[^\/]*$/, '');
will remove the last / and anything following it. I think you can avoid having to escape the /'s in the pattern by creating a Regexp object from a string.
To get this working completely I need to use the following:
var full_path = node.context.nextElementSibling.value;
var folder_target_path;
var pathRE = /\./;
if (full_path.match(pathRE)){
folder_target_path = full_path.replace(/\/[^\/]*$/, '');
} else {
folder_target_path = full_path;
}
This either matches a path that contains . (period to designate file extension start) then remove the file name with full_path.replace(/\/[^\/]*$/, ''); otherwise don't modify the full path.
Thanks to all!
Regards,
Steve

JavaScript To Strip Page For URL

We have a javascript function we use to track page stats internally. However, the URLs it reports many times include the page numbers for search results pages which we would rather not be reported. The pages that are reports are of the form:
http://www.test.com/directory1/2
http://www.test.com/directory1/subdirectory1/15
http://www.test.com/directory3/1113
Instead we'd like the above reported as:
http://www.test.com/directory1
http://www.test.com/directory1/subdirectory1
http://www.test.com/directory3
Please note that the numbered 'directory' and 'subdirectory' names above are just for example purposes and that the actual subdirectory names are all different, don't necessarily include numbers at the end of the directory name, and can be many levels deep.
Currently our JavaScript function produces these URLs using the code:
var page = location.hostname+document.location.pathname;
I believe we need to use the JavaScript replace function in combination with some regex but I'm at a complete loss as to what that would look like. Any help would be much appreciated!
Thanks in advance!
I think you want this:
var page = location.href.substring(0,location.href.lastIndexOf("/"));
You can use a regex for this:
document.location.pathname.replace(/\/\d+$/, "");
Unlike substring and lastIndexOf solutions, this will strip off the end of the path if it consists of digits only.
What you can do is find the last index of "/" and then use the substring function.
Not sure you need a regex if you're just pulling off the last slash + content.
http://www.w3schools.com/jsref/jsref_lastIndexOf.asp
I'd probably use that to search for the last "/" character, then do a substring from the start of the string to that index.
How about this:
var page = location.split("/");
page.pop();
page = page.join("/");
I would think you need to use the .htaccess with rewrite rules to change the look of the url, however I am still looking to see if this is available to javascript. Will repost when I find out more
EDIT*
the lastIndexOf would only give you the position, therefor you would still need to replace. ex:
var temp = page.substring(page.lastIndexOf("/"),page.length-1);
page = page.replace(temp, "");
unfortunately I'm not that advanced in my coding so there is probably more efficient coding in the other answers. Sorry for any inconveniences with my initial answer.

What JavaScript library should I use for parsing URL parameters?

How do I parse URL parameters in JavaScript? (These are the parameters I would ordinarily call GET parameters or CGI parameters, but in this case the page is basically submitting to itself, not a server, so there is no GET request and definitely no CGI program.)
I've seen a number of routines on the net that I can copy, but I have no idea how robust any of them are. I'm used to other languages like Perl and Java where I can rely on an extremely well-tested and robust library that I know will handle millions of little edge-cases in the standard. I would like the same here, rather than just cutting and pasting an example.
jQuery URL Utils or jQuery URL Parser.
Here's are two simple functions that do the job : http://adamv.com/dev/javascript/querystring
Here is a sample of the API Reference :
var qs = new Querystring();
// Parse a given querystring
var qs2 = new Querystring("name1=value1&name2=value2");
var v1 = qs2.get("name1");
var v3 = qs2.get("name3", "default value");
If it's "submitting to itself," do you need to do GET parameters?
But if you do, most browsers now have the decodeURIComponent function which will handle individual parameters; your job is to split them on & (String#split will do that nicely). If you want a library, jQuery and Prototype are both well-used and tested.
The best way I have found is to simply do it yourself and funnel the params into a global key/value object.
Getting quer params is simple...
just take a couple of .split()'s
var myquery = thewholeurl.split("?")[1]; //will get the whole querystring with the ?
then you can do a
myparams = myquery.split("&")
then you can do
for each param in myparams
{
temp = param.split("=");
mykeys.push(temp[0]);
myvalues.push(temp[1]);
OR
myObject[temp[0]] = temp[1];
}
It's just a matter of style.
This is not perfect code, just psuedo stuff to give you the idea.
I use the parseUri library available here:
http://stevenlevithan.com/demo/parseuri/js/
It allows you to do exactly what you are asking for:
var uri = 'http://google.com/?q=stackoverflow';
var q = uri.queryKey['q'];
// q = 'stackoverflow'
I've been using it for a while so far and haven't had any problems.
I found this useful for simple url parsing, modifying url (like adding new query params): https://github.com/derek-watson/jsUri
I think this library would work quite well, it is independent so you can use it with JQuery or with YAHOO or Dojo, another advantage is that it is pretty well documented.
http://www.openjsan.org/doc/t/th/theory/HTTP/Query/0.03/lib/HTTP/Query.html
You can use HTTP.Query to do all of the work for you in this case. It is only like 1.2 KB compressed so you could even include it in a bigger library if you wanted.
I recommend query-string library
Installing:
npm install query-string
Usage:
import queryString from 'query-string';
console.log(location.search);
//=> '?foo=bar'
const parsed = queryString.parse(location.search);
console.log(parsed);
//=> {foo: 'bar'}
parsed.foo = 'unicorn';
parsed.ilike = 'pizza';
const stringified = queryString.stringify(parsed);
//=> 'foo=unicorn&ilike=pizza'
location.search = stringified;
// note that `location.search` automatically prepends a question mark
console.log(location.search);
//=> '?foo=unicorn&ilike=pizza'
https://www.npmjs.com/package/query-string
Javascript has no built in support for URL parameters.
Anyway, the location.search property returns the portion of current page URL starting from the question mark ('?').
From this, you can write your own parameter parser or you can make use of one of those available in most common Javascript frameworks, such as JQuery and similar.

Categories