Develop Reference

Jquery to get the name of the current html file

If you are on http://www.cnn.com/2012/11/09/opinion/brown-pakistan-malala/index.html can you get Jquery to grab the index.html?
or if you are on http://www.washingtonpost.com/politics/decision2012/supreme-court-to-review-key-section-of-voting-rights-act/2012/11/09/dd249cd0-216d-11e2-8448-81b1ce7d6978_story.html have it return dd249cd0-216d-11e2-8448-81b1ce7d6978_story.html?
And for non extension defined pages such as this current one http://stackoverflow.com/questions/13317276/jquery-to-get-the-name-of-the-current-html-file can it return the last "file" in the "directory"structure, for example: jquery-to-get-the-name-of-the-current-html-file

Although not JQuery, you can access it using the following:
document.location.href.match(/[^\/]+$/)[0]
or
document.location.pathname.match(/[^\/]+$/)[0] in case of unneeded anchors/hash tags (#).

location.pathname.split('/').slice(-1)[0]

No need for jQuery. This will give you the last segment of the URL path (the bit after the last slash):
var href = document.location.href;
var lastPathSegment = href.substr(href.lastIndexOf('/') + 1);

function getCurentFileName(){
var pagePathName= window.location.pathname;
return pagePathName.substring(pagePathName.lastIndexOf("/") + 1);
}

Replacing two elements in a URL in javascript

Bit of a javascript newbie so not sure if this question is easy or impossible.
Am working on a site with different testing environments and have made a greasemonkey script to make a set of buttons to switch from one to another:
if (/^(.*?)\www.mysite.com(.*)$/.test(document.location.href)) {
document.location.href = RegExp.$1+"iww1.mysite.com"+RegExp.$2
}
This has been working except for some URLs have a search string ID that also needs changing to a different number too.
&storeId=15162
I feel like I've exhausted my limited knowledge, by adding another if function within the {} to adding various replace functions, all to no avail.
If this makes sense and anyone can help it would be much appreciated.
Cheers

Your first problem is that the location object is magical: assigning to it, or to any of its properties, causes the browser to navigate to the assigned URL. Since this will typically stop your script, you won't be able to do it twice. Instead, you should store the intermediate URL in some other variable, and only assign it back to location.href once you're ready to move to the new page.
Also, you didn't specify how the new "search string ID" should be calculated, so I just assumed that you have some function, named e.g. getNewStoreID(), that will return the new ID when you give it the old one. Given such a function, this code should do it:
var siteRegExp = /www\.mysite\.com/;
var paramRegExp = /([?&]storeId)=(\d+)/;
if ( siteRegExp.test( location.href ) ) {
var href = location.href.replace( siteRegExp, "iww1.mysite.com" );
var match = paramRegExp.exec( href );
if ( match ) {
href = href.replace( paramRegExp, "$1=" + getNewStoreID( match[2] ) );
}
location.href = href; // navigate to the new URL!
}

Appending query strings from multiple pages

I'm currently stumped on this. I've snooped around for a bit and haven't found any concrete answer using just JS to do this, and so my question is thus. If I am navigating multiple pages and want to keep query strings from the one before attached to the url, what is the easiest way to do this?

You can do this if the way the user "navigates" is by using links within the pages.
In a given html page, Javascript running within the page can see the url's query parameters via the window.search property. Mozilla docs.
Then use JS to modify all of the page's anchor elements' href links to add on the already existing query parameters to the links.
Result: clicking on a link in the page will result in the new page having both the existing and new query parameters.

I don't think there is an easy way. You will have to take in account the current query parameters every time you compose a URL or create a form.

Are you asking for this one?
var url1 = "...", url2 = "...";
var query1 = url1.split("#")[0].split("?").slice(1).join("?");
if (!query1)
return url2;
var parts2 = url2.split("#");
parts2[0] += (parts2[0].indexOf("?")>-1 ? "&" : "?" ) + query1;
return parts2.join("#");
This extracts the query string from url1 and appends it to the query string of url2, returning the new url2.

Given a string of html code, how can I go through every tag and remove ones that is not in my whitelist (in JQuery)?

var whitelist = ['a','div','img', 'span'];
Given a block of HTML code, I want to go through every single tag using JQuery
Then, if that tag is NOT in my whitelist, remove it and all its children.
The final string should now be sanitized.
How do I do that?
By the way, this is my current code to remove specific tags (but I decided I want to do whitelist instead)
var canvas = '<div>'+canvas_html+'</div>';
var blacklist = ['script','object','param','embed','applet','app','iframe',
'form','input', 'link','meta','title','input','button','textarea'
'head','body','kbd'];
blacklist.forEach(function(r){
$(canvas).find(r).remove();
});
canvas_html = $(canvas).get('div').html();

Try this:
var whitelist = ['a','div','img', 'span'];
var output = $('<div>'+canvas_html+'</div>').find('*').each(function() {
if($.inArray(this.nodeName.toLowerCase(), whitelist)==-1) {
$(this).remove();
}
}).html();
// output contains the HTML with everything except those in the whitelist stripped off

try:
$(canvas).find(':not(' + whitelist.join(', ') + ')').remove().html();
The idea is to turn array of whitelist into "el1, el2, el3" format, then use :not selector to get the elements that's not in the whitelist, then delete.
This obviously could be expensive depending on the size of your html and whitelist.

Unfortunately, using jQuery to sanitize HTML in order to prevent XSS is not safe, as jQuery is not just parsing the HTML, but actually creating elements out of it. Even though it doesn't insert these into the DOM, in some cases embedded Javascript will be executed. So, for example, the snippet:
$('<img src="http://i.imgur.com/cncfg.gif" onload="alert(\'gotcha\');"/>')
will trigger an alert.

javascript or jquery - get the last 2 characters of href

I need to get the last 2 characters from the href of a link and place them into a string.
I'm sure this is fairly simple but I seem to be struggling.
Here's the link
test
I need to grab the "bb" part of the href.

Presuming link is a reference to the element:
var chars = link.href.substr(-2);
If you need to get the reference to the link, it is best to give the link an ID attribute, e.g. <a href="../mypage/?code=bb" id="myLink">, where myLink is something that describes the link's purpose. You can then do this:
var chars = document.getElementById('myLink').href.substr(-2);
Finally, if what you want is the code parameter from your link, it may be best to parse the URL into parts. If there is a chance that your URL may be more complex that what you've shown, you should do real URL parsing. As Rahul has pointed out in his answer there are some jQuery plugins that perform this function.

try
$(function() {
var res = $('a').attr('href').split(/=/)[1]
alert(res);
});
This will not grab the last two character, but everything after the = sign which works probably more generic. And even if the <center> cannot hold, regex could look like
$(function() {
var href = $('a').attr('href'),
res = /\\?code=(\w+)/.exec(href);
alert(res[1]);
});

var href = $('a').attr('href');
var last2char = href.substr(href.length-2);

You can try for some querystring plugins which might be a better option.