I am making a web app that has multiple 'pages' but it will all be loaded client side. Seems how it is all technically on the same page, I will be using parameters after # to track the current page state while preventing postbacks. My problem is that I cant seem to select all the parameters with a regex line. The regex for split works when I use a testing tool online but does not work when I use it on my web page.
//Test data for url
//https://test.ca?hi&hey=3&test=oh+hi+mark#edit&e=1
var split = /([^&#=]+)=?([^&#]*)/g;
var url = window.location.href;
var match = split.exec(url);
//this outputs match with a length of three
//[0] = 'https://test.ca?hi'
//[1] = 'https://test.ca?hi'
//[2] = ''
I thought this should be a solved problem but I cant seem to find an answer. Which I guess leads to another question. Am I going about this the completely wrong way?
You are using the regex wrong. You just print the whole match, while you need to access the captured groups while iterating through all the matches inside 1 string.
Here is an example snippet:
var re = /([^&#=]+)=?([^&#]*)/g;
var str = 'https://test.ca?hi&hey=3&test=oh+hi+mark#edit&e=1';
var match;
while ((match = re.exec(str)) !== null) {
document.write(match[1] + "<br/>" + match[2] + "<br/><br/>");
}
Note that the first match is the "main" part of the URL. Subsequent matches are param-value pairs.
Try using window.location.hash instead. It will return the hash value (in your example url it would be #edit&e=1) and you can use string operations to do whatever you need to with that.
Related
So I currently pass two variables into the url for use on another page. I get the last variable (ie #12345) with location.hash. Then from the other part of the url (john%20jacob%202) all I need is the '2'. I've got it working but feel there must be a cleaner and succinct way to handle this. The (john%20jacob%202) will change all the time to have different string lengths.
url: http://localhost/index.html?john%20jacob%202?#12345
<script>
var hashUrl = location.hash.replace("?","");
// function here to use this data
var fullUrl = window.location.href;
var urlSplit = fullUrl.split('?');
var justName = urlSplit[1];
var nameSplit = justName.split('%20');
var justNumber = nameSplit[2];
// function here to use this data
</script>
A really quick one-liner could be something like:
let url = 'http://localhost/index.html?john%20jacob%202?#12345';
url.split('?')[1].split('').pop();
// returns '2'
How about something like
decodeURI(window.location.search).replace(/\D/g, '')
Since your window.location.search is URI encoded we start by decoding it. Then replace everything that is not a number with nothing. For your particular URL it will return 2
Edit for clarity:
Your example location http://localhost/index.html?john%20jacob%202?#12345 consists of several parts, but the interesting one here is the part after the ? and before the #.
In Javascript this interesting part, the query string (or search), is available through window.location.search. For your specific location window.location.search will return ?john%20jacob%202?.
The %20 is a URI encoded space. To decode (ie. remove) all the URI encodings I first run the search string through the decodeURI function. Then I replace everything that is not a number in that string with an empty string using a regular expression.
The regular expression /\D/ matches any character that is not a number, and the g is a modifier specifying that I want to match everything (not just stop after the first match), resulting in 2.
If you know you are always after a tag, you could replace everything up until the "#"
url.replace(/^.+#/, '');
Alternatively, this regex will match the last numbers in your URL:
url.match(/(?<=\D)\d+$/);
//(positive look behind for any non-digit) one more digits until the end of the string
Hey this may have been asked elsewhere somewhere but i couldnt seen to find it.
Essentially im just trying to remove the a tags from a string using regex in javascript.
So i have this:
This is google
and i want the output to just be "this is google".
How would this be done in javascript using regex?
Thanks in advance!!
SOLUTION:
Ok so the solution i was provided from my boss goes as follows
The best way to do that is in two parts. One is to remove all closing tags. Then you’re going to want to focus on removing the opening tag. Should be as straightforward as:
/<a\s+.*?>(.*)<\/a>/
With the .*? being the non-greedy version of match /anything/
This shouldn't be done with regex at all, but like this for example:
var a = document.querySelectorAll('a');
var texts = [].slice.call(a).map(function(val){
return val.innerHTML;
});
console.log(texts);
this is google
If you only have the a string with multiple <a href...>, you can create an element first
var a_string = 'this is googlethis is yahoo',
el = document.createElement('p');
el.innerHTML = a_string;
var a = el.querySelectorAll('a');
var texts = [].slice.call(a).map(function(val){
return val.innerHTML;
});
console.log(texts);
I don't know your case, but if you're using javascript you might be able to get the inside of the element with innerHTML. So, element.innerHTML might output This is google.
The reasoning is that Regex really isn't meant to parse HTML.
If you really, really want a Regexp, here you go:
pattern = />(.*)</;
string = 'This is google';
matches = pattern.exec(string);
matches[1] => This is google
This uses a match group to get the stuff inside > and <. This won't work with every case, I guarantee it.
Try this with lookahead.Get the first capturing group.
(?=>).([^<]+)
Check Demo
One more way, with using of capturing groups. So, you basically match all, but grab just one result:
var re = /<a href=.+>(.+)<\/a>/;
var str = 'this is google';
var m;
if ((m = re.exec(str)) !== null) {
if (m.index === re.lastIndex) {
re.lastIndex++;
}
}
console.log(m[1]);
https://regex101.com/r/rL0bT6/1 Note: code created by regex101.
Demo:http://jsfiddle.net/ry83mhwc/
What is the best way to get the Last segment of the URL (omitting any parameters). Also url may or may not include the last '/' character
for example
http://Home/Billing/Index.html?param1=2&another=2
should result in: Index.html
http://Home/Billing/Index.html/
should result in: Index.html
I've tried this but i can't get how to check for the last /
ar href = window.location.pathname;
var value = href.lastIndexOf('/') + 1);
Maybe something like?
window.location.pathname.split('?')[0].split('/').filter(function (i) { return i !== ""}).slice(-1)[0]
Split on '?' to throw out any query string parameters
Get the first of those splits
Split on '/'.
For all those splits, filter away all the empty strings
Get the last one remaining
#psantiago answer works great. If you want to do the same but using RegEx you can implement as follows:
var r = /(\/([A-Za-z0-9\.]+)(\??|\/?|$))+/;
r.exec("http://Home/Billing/Index.html?param1=2&another=2")[2]; //outputs: Index.html
r.exec("http://Home/Billing/Index.html/"); //outputs: Index.html
In my opinion, the above code is more efficient and cleaner than using split operations.
I need to remove any occurence of a product number that may occur in URLs, using javascript/jquery.
URL looks like this:
http://www.mysite.com/section1/section2/section3/section4/01-012-15_1571884
The final part of the url is always formatted with 2 digits followed by -, so I was thinking a regex might do the job? I need everything removing after the last /.
It must also work when the product occurs higher or lower in the hierarchy, i.e.: http://www.mysite.com/section1/section2/01-012-15_1571884
So far I have tried different solutions with location.pathname and splits, but I am stuck on how to handle differences in product hierarchy and handling the arrays.
DEMO
var x = "http://www.mysite.com/section1/section2/section3/section4/01-012-15_1571884";
console.log(x.substr(0,x.lastIndexOf('/')));
Use lastIndexOf to find the last occurence of "/" and then remove the rest of the path using substring.
var url = 'http://www.mysite.com/section1/section2/section3/section4/01-012-15_1571884';
parts = url.split('/');
parts.pop();
url = parts.join('/');
http://jsfiddle.net/YXe6L/
var a = 'http://www.mysite.com/section1/section2/01-012-15_1571884',
result = a.replace(a.match(/(\d{1,2}-\d{1,3}-\d{1,2}_\d+)[^\d]*/g), '');
JSFiddle: http://jsfiddle.net/2TVBk/2/
This is a very nice online regex tester to test your regexes with: http://regexpal.com/
Here is an approach that will properly handle a situation where there is no product ID as you requested. http://jsfiddle.net/84GVe/
var url1 = "http://www.mysite.com/section1/section2/section3/section4/01-012-15_1571884";
var url2 = "http://www.mysite.com/section1/section2/section3/section4";
function removeID(url) {
//look for a / followed by _, - or 0-9 characters,
//and use $ to ensure it is the end of the string
var reg = /\/[-\d_]+$/;
if(reg.test(url))
{
url = url.substr(0,url.lastIndexOf('/'));
}
return url;
}
console.log( removeID(url1) );
console.log( removeID(url2) );
I have the following URL:
http://example.com/product/1/something/another-thing
Although it can also be:
http://test.example.com/product/1/something/another-thing
or
http://completelydifferentdomain.tdl/product/1/something/another-thing
And I want to get the number 1 (id) from the URL using Javascript.
The only thing that would always be the same is /product. But I have some other pages where there is also /product in the url just not at the start of the path.
What would the regex look like?
Use window.location.pathname to
retrieve the current path (excluding
TLD).
Use the JavaScript string
match method.
Use the regex /^\/product\/(\d+)/ to find a path which starts with /product/, then one or more digits (add i right at the end to support case insensitivity).
Come up with something like this:
var res = window.location.pathname.match(/^\/product\/(\d+)/);
if (res.length == 2) {
// use res[1] to get the id.
}
/\/product\/(\d+)/ and obtain $1.
Just, as an alternative, to do this without Regex (though i admit regex is awfully nice here)
var url = "http://test.example.com//mypage/1/test/test//test";
var newurl = url.replace("http://","").split("/");
for(i=0;i<newurl.length;i++) {
if(newurl[i] == "") {
newurl.splice(i,1); //this for loop takes care of situatiosn where there may be a // or /// instead of a /
}
}
alert(newurl[2]); //returns 1
I would like to suggest another option.
.match(/\/(\d+)+[\/]?/g)
This would return all matches of id's present.
Example:
var url = 'http://localhost:4000/#/trees/8/detail/3';
// with slashes
var ids = url.match(/\/(\d+)+[\/]?/g);
console.log(ids);
//without slashes
ids = url.match(/\/(\d+)+[\/]?/g).map(id => id.replace(/\//g, ''));
console.log(ids);
This way, your URL doesn't even matter, it justs retrieves all parts that are number only.
To just get the first result you could remove the g modifier:
.match(/\/(\d+)+[\/]?/)
var url = 'http://localhost:4000/#/trees/8';
var id = url.match(/\/(\d+)+[\/]?/);
//With and without slashes
console.log(id);
The id without slashes would be in the second element because this is the first group found in the full match.
Hope this helps people.
Cheers!