How do I extract data from this URL using javascript? - javascript

I need to build a string from the data contained in this url using javascript/jQuery:
http://www.example.com/members/admin/projects/?projectid=41
The string returned should look as follows:
/ajax/projects.php?projectid=41
Obviously if there is no query string present, the method should still return a string of the same format minus the query string. e.g.
http://www.example.com/members/admin/messages/
should return...
/ajax/messages.php
I've made numerous attempts, all met without success due to my poor grasp of regular expressions, and it feels as though the ore I rad on the subject the more I am confusing myself.
If someone could help it would be greatly appreciated.
EDIT: The 'admin' portion of the url is a users 'username' and could be anything.

Here's a function that will take your URL and return a new one according to the rules you've listed above:
function processURL(url) {
var base = "", query = "";
var matches = url.match(/([^\/\?]+)(\/$|$|\?|\/\?)/);
if (matches) {
base = matches[1];
matches = url.match(/\?[^\?]+$/);
if (matches) {
query = matches[0];
}
}
return("/ajax/" + base + ".php" + query);
}
And, a test app that shows it working on a bunch of URLs: http://jsfiddle.net/jfriend00/UbDfn/
Input URLs:
var urls = [
"http://www.example.com/members/admin/projects/?projectid=41",
"http://www.example.com/members/bob/messages/",
"http://www.example.com/members/jill/projects/",
"http://www.example.com/members/alice/projects?testid=99",
"http://www.example.com/members/admin/projects/?testid=99"
];
Output results:
/ajax/projects.php?projectid=41
/ajax/messages.php
/ajax/projects.php
/ajax/projects.php?testid=99
/ajax/projects.php?testid=99
To explain, the first regular expression looks for:
a slash
followed by one or more characters that is not a slash and not a question mark
followed by one of the four sequences
/$ a slash at the end of the string
$ end of the string
? a question mark
/? a slash followed by a question mark
The point of this regex is to get the last segment of the path that comes before either the end of the string or the query parameters and it's tolerant of whether the last trailing slash is there or not and whether there are any query parameters.

I know exactly what you are trying to do. In order to do it your way just split your string on question mark and then use last item form your array.
var data = your_url.split('?');
var newUrl = '/ajax/projects.php' + (data.length > 1 ? data[length-1] : "");
and you will have your url.
But what you can do is execute same url using your Script just add one parameter IsAjax=true and then check it in codebehind and execute your ajax logic.
e.g.
$('#somelink').onclick(function(){
$.ajax({ url: $(this).href, data { IsAjax: true } .... }
});
Using this way you will have more robust app.

I'll assume that by
http://www.example.com/members/admin/messages/
should return...
/ajax/members.php
you meant - should return...
/ajax/messages.php
If that is the case try
var query = url.split('?');
var paths = query[0].split('/');
var path = paths.pop();
if (path == '') //when there is trailing slash
path = paths.pop();
if (query.length == 1) //no query string
newurl = '/ajax/' + path + '.php';
else //query string
newurl = '/ajax/' + path + '.php?' + query[1];
I'm sure it can be made simpler and better, but that might give you a start.

var str = "http://www.example.com/members/admin/projects/?projectid=41";
var newStr = "/ajax/" + str.split("/").slice(-2).join(".php");
console.log(newStr);

Related

Regex for removing part of URL param

I am trying use regex to remove a particular param in a url.
//Here are the scenarios of what I want to remove in the url
'?pIds=123,2311' => ''
'?pIds=123,2311&deal=true' => '?deals=true'
'?pIds=123' => ''
'?pIds=123&deals=true' => '?deals=true'
'&pIds=123,2311' => ''
'&pIds=123,2311&deals=true' => '&deals=true'
'&pIds=123' => ''
'&pIds=123&deals=true' => '&deals=true'
const a = '?pIds=123,2311&deals=true';
a.replace(/&?pIds=\d+,?\d+/i, '');
Is this possible to create a single regex for these scenarios? How can I conditionally have ? or & there if pIds is the first or middle param, respectively?
You can use this regex in Javascript for searching:
/[?&]pIds=[^&]*$|([?&])pIds=[^&]*&/
RegEx Breakup:
[?&]pIds=[^&]*$: Match ? or & followed by pIds=. $ ensures this is the only parameter in query string.
|: OR
([?&])pIds=[^&]*&: Match ? or & followed by pIds= followed by &. This is the case where there is one more parameter in query string.
Code:
var arr=['?pIds=123,2311',
'?pIds=123,2311&deal=true',
'?pIds=123',
'?pIds=123&deals=true',
'&pIds=123,2311',
'&pIds=123,2311&deals=true',
'&pIds=123',
'&pIds=123&deals=true'];
var re = /[?&]pIds=[^&]*$|([?&])pIds=[^&]*&/;
for (i=0; i<arr.length; i++) {
console.log(arr[i], ' => ', arr[i].replace(re, '$1'));
}
RegEx Demo
The regex to identify the block you are talking about is something like the following:
((?<=\?)|\&)pIds=\d+(,\d+)?
The first part is a "positive lookbehind" for a question mark, which will match if there is a question mark before pIds, but it will not include the question mark as part of the match. An ampersand also works, but it is included as part of the match, so it will get deleted.
I also made the treatment of the optional comma and numbers a little bit clearer. You always have one block of numbers (\d+), optionally followed by a comma and another block of numbers.
Edit: In my original post, I forgot to treat the ampersands properly. If the string begins with a question mark and there is no ampersand, you want to delete the question mark. If it starts with a question mark and ends with an ampersand, you want to delete the ampersand at the end. If it both begins and ends with an ampersand, you need to delete one of them. If it begins with an ampersand and does not end with one, you need to delete the one at the beginning. The result is slightly more complicated and looks like this:
\?pIds=\d+(,\d+)?($|[^&])|(?<=\?)pIds=\d+(,\d+)?\&|\&pIds=\d+(,\d+)
The first case takes care of no ampersand at the end (($|[^&]) corresponds to either end-of-line or no ampersand). The second case takes care of beginning with ? and ending with &. The third case takes care of the remaining two scenarios, where there is a & at the beginning.
There are loads of ways to do this. Here is a version without regex:
let url1 = 'foo.bar?pIds=123,2311&deals=true&foo=bar';
let parsedUrl;
let queryParts;
// Get the query string from the URL
parsedUrl = url1.split('?');
// Split the query string so we get each key value then filter so we dont get the pIds
queryParts = parsedUrl[1].split('&').filter(q => q.indexOf('pIds') === -1);
// set URL to the original hostname and a ? if we have a query still
url1 = (queryParts.length > 0 ? '?' : '')
// Join the query parts
url1 += queryParts.join('&')
console.log(url1);
More examples:
let url2 = 'foo.bar?pIds=123,2311';
parsedUrl = url2.split('?');
queryParts = parsedUrl[1].split('&').filter(q => q.indexOf('pIds') === -1);
url2 = parsedUrl[0] + (queryParts.length > 0 ? '?' : '')
url2 += queryParts.join('&')
console.log(url2);
let url3 = 'foo.bar?foo=bar&pIds=123,2311';
parsedUrl = url3.split('?');
queryParts = parsedUrl[1].split('&').filter(q => q.indexOf('pIds') === -1);
url3 = parsedUrl[0] + (queryParts.length > 0 ? '?' : '')
url3 += queryParts.join('&')
console.log(url3);

Get last part of url with / at the end

I'm trying to get the last part of this url:
http://webserver/Foo/login/
the code that I wrote:
var location = window.location.href.split('/').pop();
will return an empty string 'cause after the / there is nothing.
I need to get at least the previous part, so in this case, login.
How can I do this?
The solution using String.replace()(used to replace possible / at the end of the string) and String.split() functions:
var url = 'http://webserver/Foo/login/',
last_section = url.replace(/\/+$/, '').split('/').pop();
console.log(last_section);
const getLastPartURL = url => {
const parts = url.split('/');
const length = parts.length;
return parts[length - 1] == '' ? parts[length - 2] : parts[length - 1]
}
console.log(getLastPartURL('http://webserver/Foo/login/'))
console.log(getLastPartURL('http://webserver/Foo/login'))
console.log(getLastPartURL('http://webserver/Foo/'))
console.log(getLastPartURL('http://webserver/Foo'))
This should do the trick:
location.pathname.match(/[^/]*(?=\/*$)/)[0]
Explanation:
Location.pathname is a string containing an initial '/' followed by the path of the URL.
String.prototype.match(regexp) returns an array of the matches.
[^/]* matches anything but a slash, and that zero or more times.
(?=\/*$) matches a slash zero or more times at the end of the string, while not including it.
There is always exactly one match, so we retrieve it with [0].
Example:
For all these URLs the output is login:
http://webserver/Foo/login
http://webserver/Foo/login/
http://webserver/Foo/login//

How get domain from string?

var string = "https://example.com/app/something";
var string = "example.com/app/something";
new URL(string.origin)
If string have protocol all ok, and if not. have error Failed to construct 'URL': Invalid URL(…)
How can I obtain the root domain without using regex?
The question is still a bit unclear, and I'm not entirely sure how you're getting that string, but just for the sake of argument, here's a quick solution:
function getHostname(str)
{
str = (/^\w+:\/\//.test(str) ? "" : "http://") + str
return new URL(str).hostname;
}
console.log(getHostname("https://example.com/app/something"));
console.log(getHostname("example.com/app/something"));
Yes, technically, this technically does use a regular expression to check if the protocol is present, but it uses the URL class actually parse the host name.
Regex example:
var example1 = "www.example1.com/test/path";
var example2 = "https://example2.com/test/path";
var example3 = "http://subdomain.example3.com/test/path";
function getDomain(str) {
var matches = str.match(/^(?:https?:\/\/)?((?:[-A-Za-z0-9]+\.)+[A-Za-z]{2,6})/);
if (!matches || matches.length < 2) return '';
return matches[1];
}
console.log(getDomain(example1));
console.log(getDomain(example2));
console.log(getDomain(example3));
References:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match
http://regexr.com/
If I understand your question correctly, you want to check if the URL contains either the http or https protocol. This can easily be done with string functions built into JavaScript as shown below.
var string = window.location;
if (string.includes('http') || string.includes('https'))
{
//Do your logic here
}
UPDATE: Alternatively, you could use substring functionality shown below.
var string = window.location;
if (string.indexOf('http') == 0)
{
//Do your logic here
}
Note that this will also verify that the http is at the beginning of the string and not just thrown in willy nilly.

How to find if a text contains url string

How can I find if text contains a url string. I mean if I have
Sometexthttp://daasddas some text
I want http://daasddas to be achored or maked as a link wit javascript
function replaceURLWithHTMLLinks(text)
{
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig;
return text.replace(exp,"<a href='$1'>$1</a>");
}
While the code above works good if all given URLs are full (http://mydomain.com), I had problems parsing a URL like:
www.mydomain.com
i.e. without a protocol.
So I added some simple code to the function:
var exp = /(\b(((https?|ftp|file|):\/\/)|www[.])[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig;
var temp = text.replace(exp,"$1");
var result = "";
while (temp.length > 0) {
var pos = temp.indexOf("href=\"");
if (pos == -1) {
result += temp;
break;
}
result += temp.substring(0, pos + 6);
temp = temp.substring(pos + 6, temp.length);
if ((temp.indexOf("://") > 8) || (temp.indexOf("://") == -1)) {
result += "http://";
}
}
return result;
If someone should fine a more optimal solution to add a default protocol to URLs, let me know!
You have to use regex(Regular expressions) to find URL patterns in blocks of text.
Here's a link to same question and answers:
Regular Expression to find URLs in block of Text (Javascript)
I tweaked dperinis regex-url script so that a URL embedded in a string can be found. It will not find google.com, this is necessary if it's a user input field, the user might leave out the whitespace after a period/full stop. It will also find www.google.com, since hardly anyone types the protocol.
(?:((?:https?|ftp):\/\/)|ww)(?:\S+(?::\S*)?#)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?
I tested it on www.regextester.com, it worked for me, if you encounter a problem, please comment.
you can use a regular expression to find an URL and replace it by the same with a leading and a trailing tag
Many of the solutions start getting very complex and hard to work with a variety of situations. Here's a function I created to capture any URL beginning with http/https/ftp/file/www. This is working like a charm for me, the only thing it doesn't add a link to is user entered URL's without an http or www at the beginning (i.e. google.com). I hope this solution is helpful for somebody.
function convertText(txtData) {
var urlRegex =/(\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig;
txtData = txtData.replace(urlRegex, '$1');
var urlRegex =/(\b(\swww).[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig;
txtData = txtData.replace(urlRegex, ' $1');
var urlRegex =/(>\swww)/ig;
txtData = txtData.replace(urlRegex, '>www');
var urlRegex =/(\"\swww)/ig;
txtData = txtData.replace(urlRegex, '"http://www');
return txtData;
}
function replaceURLWithHTMLLinksHere(text)
{
var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&##\/%?=~_|!:,.;]*[-A-Z0-9+&##\/%=~_|])/ig;
return text.replace(exp,"<a href='$1'>$1</a>");
}
Okay we got this regular expresion here in function.
/(\b(https?|ftp|file)://[-A-Z0-9+&##/%?=~|!:,.;]*[-A-Z0-9+&##/%=~|])/ig
Lets understand this.
/ / this is how a regex starts.
\b > is maching https or ftp or file that is unique and is in the start of string. these keywords should not have any character attatched to them in
begining like bbhttps or bbhttp it will not match these otherwise.
https? > here ? means zero or one of preceding character or group. In this case s is optional.
| > match one out of given just like OR.
() > create group to be matched
/ > means the next character is special and is not to be interpreted literally. For example, a 'b' without a preceding '\' generally matches lowercase
'b's wherever they occur. But a '\b' by itself doesn't match any character
[] > this is Character Classes or Character Sets. It is used to have a group of characters and only one character out of all will be present at a time.
[-A-Z0-9+&##/%?=~_|!:,.;]* > zero or more occurrences of the preceding element. For example, b*c matches "c", "bc", "bbc", "bbbc", and so on.
[-A-Z0-9+&##/%=~_|] > means one charactor out of these all.
i > Case-insensitive search.
g > Global search.
function replaceURLWithLinks(text){
var text = "";
text= text.replace(/\r?\n/g, '<br />');
var result = URI.withinString(text, function(url) {
return "<a href='"+url+"' target='_blank'>" + url + "</a>";
});
}

Regex for parsing parameters from url

I'm a total noob with regexes and although I was trying hard I cannot create proper regexes to perform the following operation :
take url and check if it has a '?' followed by number with varying amount of digits.
if the match is correct, get the number after the '?' sign
exchange this number with different one.
So let's say we have this url :
http://website.com/avatars/avatar.png?56
we take '56' and change it to '57'.
I have the following regex for searching, I'm not sure if it's proper :
\?[0-9]+
But I have no idea how to take ? away. Should I just throw it away from the string and forget about using regex here ? Then the replace part is the only one left.
Try this:
var url = "http://website.com/avatars/avatar.png?56";
var match = url.match(/\?(\d+)/);
if(match != null) {
url = url.replace(match[1], "new number");
}
Your original regex will work just fine, just add back in the ? you are taking out like so:
var newnum = 57;
url = url.replace(/\?[0-9]+/, '?'+ newnum);
I'm no regex expert but I think you can use a lookaround to ignore the '?'
(?<=?)([0-9]+)
which should give you your number in the first match
VERY dummied-down approach:
$('#parse').click(function(e){
var fromUrl = $('#from-url').val();
var newNum = parseInt($('#new-number').val(), 10);
var urlRE = /(?!\?)(\d+)$/;
if (urlRE.test(fromUrl)){
$('#result').text(fromUrl.replace(urlRE, newNum));
}else{
$('#result').text('Invalid URL');
}
});
DEMO
There are not extravagant check-sums, error-checking, etc. Fromt here, use window.location or a string containing the URL if necessary.
Broken out in to a function (demo):
// Call this to replace the last digits with a new number within a url.
function replaceNumber(url, newNumber){
// regex to find (and replace) the numbers at the end.
var urlRE = /\?\d+$/;
// make sure the url end in a question mark (?) and
// any number of digits
if (urlRE.test(url)){
// replace the ?<number> with ?<newNumber>
return url.replace(urlRE, '?'+newNumber);
}
// invalid URL (per regex) just return same result
return url;
}
alert(replaceNumber('http://website.com/avatars/avatar.png?56', 57));
You could do this without regex.
var newNum = "57";
var url = "http://website.com/avatars/avatar.png?56";
var sUrl = url.split('?');
var rUrl = sUrl[0] + "?" + newNum;
alert(rUrl);
Split the URL at the ?
This returns an array.
Add the first item in the array and the ? and the new number back together.
http://jsfiddle.net/jasongennaro/7dMur/

Categories

Resources