Develop Reference

Javascript - How to replace a certain occurence of a anchor's href contents?

I'm using a widget (Purechat) that allows customers and operators to communicate to each other. I've ran into an issue where anchors' href values inside this widget are being appended with "http://%20", thus making them unclickable to our users. We are investigating the code, however, I would like a quick fix for this by replacing all href contents that contain "http://%20" and replace that portion of the href with an empty string so my anchors work.
What would be the best way to go about this?

$('a').attr('href', function(index, value) {
return value.replace("//%20", "");
});

You can run a foreach jquery function which runs over every anchor whose href starts with that string, then cut it with substring method and set it's href value again.
This should work:
$("a[href^='http://%20']").each(function(){
var oldHref = $(this).attr('href');
var newHref = oldHref.substring(10, oldHref.length);
$(this).attr('href',newHref);
});

wrap numbers in span and .not()

This is similar to other questions, but it's about something specific.
The first example doesn't do anything (breaks)
The second example works except that it hacks up html tags (specifically a tags) as well, so href="something with numbers" get hashed and then the whole thing falls apart
Then I get anchors that have their href attributes hashed up with span tags. Obviously that isn't what I want. What am I doing wrong? There must be some way to put all numbers and ", - : ()" inside a span without hashing up the html tags themselves.
$('#main-content p').contents().not("a").html(function(i, v) {
return v.replace( /([0-9(),-:]+)/g , '<span class="number">$1</span>');
});
$('#main-content p').html(function(i, v) {
return v.replace( /([0-9(),-:]+)/g , '<span class="number">$1</span>');
});

You are replacing all number. You need to only select the text nodes within the element. This code is not tested, but should work.
EDIT: You have to also call .contents(). See this answer
EDIT 2: I got it working in this FIDDLE. Let me know what you think. Did you mean to replace special characters as well as numbers?....because that is what is currently happening per your original regEx.
$('p').contents().filter(function () { return this.nodeType === 3; }).each(function(){
$(this).replaceWith($(this).text().replace( /([0-9(),-:]+)/g ,
'<span class="number">$1</span>'));
});

Moving links in jQuery, adding to string causes [object Object]

I'm trying to move a link around but when I try to include it within a string it doesn't work. If I remove the string it does though. Why is this happening and how do I fix it?
$(document).ready(function(){
var link = $('a');
//Remove the '<div>'s and it works...
$('div').after('<div>'+link+'</div>');
});
See pen for an example: http://cdpn.io/AKnsL
Thanks.
ED: I probably should of noted that this is a simplified version of what I am trying to do, I'm trying to rebuild a menu (don't ask why...) and I have each link assigned to a variable which is then added in place to a rather long string of divs and such, which is all then added in "after" another div. I only mention in case it changes the way this could be done, and I should mention I'm no JS pro :)
Thanks#2!

The issue is because a jQuery selector, such as $('a') returns an object, and appending a string and an object results in what you've seen.
If you want to move the link to a different element in the DOM, use append():
var link = $('a');
$('div').append(link);

$("a") is actually an object, not a string. If you use $("div").after(link), jQuery will work out that you actually want to append the DOM element.
The problem comes in when you do '<div>' + link + '</div>', where JavaScript is creating the string before jQuery gets involved. this is where [object Object] comes from - this is JavaScript's way of creating a sensible String value for an object. What's being evaluated is $("div").after("<div>[object Object]</div>");
You can get around this by first creating your new div, appending the a to that, then appending your new div to the original.
$(document).ready(function() {
var link = $("a"),
new_div = $("<div />").append(link);
$("div").after(new_div);
});

You could use:
$('div').after('<div/>',{html:link});

Try:
div.innerHTML=""+$('a').attr("href").toString()+"";
or:
var str="";
str+=""+$('a').attr("href").toString()+""; // str will contain links href in it
That will append text to div as a string with its href as text to be appended.

Javascript alter display based on URL

I have 4 div's on the page with unique ID's. Example external link:
www.website.com/page.html#one.
I need the display (set to none) to change to block. I'm at a bit of a loss (my JavaScript isn't very strong). Any ideas? Below is the code I'm using to parce the url, and the div id's are literally just one, two, three, and four.
$(document).ready(function()
{
var hashVal = window.location.hash.split("#")[1];
$("#" + hashVal).style.display = 'block';
});

There's no need to split the hash tag by the hash mark if you're going to use it as a selector. (see these docs)
And, for jQuery, you're looking for the css method i believe:
$(window.location.hash).css('display','block');

What is the Javascript Regexp for finding the attributes in a <span> tags?

I have a <div contenteditable="true> that I am trying to use to get text from users. I would use a simple <textarea>, but I need line-breaks and eventually lists and tables etc. I am trying to build something that is semi a rich-text editor, but not a full fledged one. I do not want to use a rich text editor.
I am trying to eliminate the attributes on <span> tags from the text that is typed into the <div contenteditable="true> . Is there a way to do that with Regexp? I was having difficulties coming up with a Regexp because I can't figure out how to make it so that the string starts with <span and ends with > and any number of characters can be in between. Is there a way to combine that in one Regexp? I came up with /^<span >$/ but that does not work because there is no division between the two strings. Would something like this work: /^[<span][>]$/g?

Use DOM functions for it. Here's some code using jQuery to make it easier and nicer to read:
$('#your-div span').each(function() {
var elem = this, $elem = $(this);
$.each(elem.attributes, function(i, attr) {
if(attr) {
$elem.removeAttr(attr.name);
}
});
});
Demo: http://jsfiddle.net/ThiefMaster/qfsAb/
However, in your case you might want to remove attributes not only from spans but from all elements unless the attribute is e.g. align or href.
So, here's some JS for that: http://jsfiddle.net/ThiefMaster/qfsAb/1/
$('#your-div').children().each(function() {
var elem = this, $elem = $(this);
$.each(elem.attributes, function(i, attr) {
if(attr && attr.name != 'href' && attr.name != 'align') {
$elem.removeAttr(attr.name);
}
});
});

Parse the HTML and then strip out the attributes afterwards. If you're doing this in a browser, you have a high grade HTML parser right at your disposal (or you have IE), so use it!

I made a working demo at http://jsfiddle.net/b3DSQ/
$('#editor span').each(function(i, el) {
var attrs = el.attributes;
$.each(attrs, function(i, a) {
$(el).removeAttr(a.name);
});
});
[I changed an earlier version which copied the contents into memory, edited, and then replaced - hadn't realised that the stuff typed into the div was automatically valid in the DOM].

Try this:
your_string.replace(/<span[^>]*>/g, '<span>');
This will break however if the user writes something like <span title="Go > there">