We Keep Coding

Match string using regex

I have the following variable:
var test = category~[330526|330519]^Size{1}~[m]
How do I match just to get category~[330526|330519] using regex.
This value can also change so it could be category~[3303226|333219]

Just try with:
test.split('^')[0];

var test = 'category~[330526|330519]^Size{1}~[m]';
var result = test.split('^').shift();
FIDDLE

You could;
result = test.substr(0, test.indexOf("]") +1);

This should do it:
category~\[\d+\|\d+\]

If you insist on using a Regex, this one doesn't care about what the category is (.*~\[\d+\|\d+\]). Here is a Rubular to prove it. But I have to say, the answer by #hsz is really the most insightful. The split is probably the right tool for the job.

Yet another approach...
var test = 'category~[330526|330519]^Size{1}~[m]';
var result = test.replace(/\^.+/,"");

"category~[330526|330519]^Size{1}~[m]".replace(/(category~[\d+\|\d+]).*/,"$1"), you should get the string, or you can use match as well.

jQuery how to insert <br/> tag after every Semicolon

I am dumping some CSS into a div and I am looking to format it so it is more legible. Basically what I want to do is insert a break tag after every semicolon. I have searched around for a while but can't seem to find something that quite fits what I am trying to do.
I have something like this...
HTML
<div class='test'>
color:red;background-color:black;
</div>​
jQuery
var test = $('.test').text();
var result = test.match(/;/g);
alert(result);​
And I have tried..
var test = $('.test').text();
var result = test.match(/;/g);
result.each(function(){
$('<br/>').insertAfter(';');
});
alert(result);​
Also I have started a fiddle here.. Which basically just returns the matched character...
http://jsfiddle.net/krishollenbeck/zW3mj/9/
That is the only part I have been able to get to work so far.
I feel like I am sort of heading down the right path with this but I know it isn't right because it errors out. I am thinking there is a way to insert a break tag after each matched element, but I am not really sure how to get there. Any help is much appreciated. Thanks...

try it like this
var test = $('.test').text();
var result = test.replace(/\;/g,';<br/>');
$('.test').html(result);​
http://jsfiddle.net/Sg5BB/

You can use a normal javascript .replace() method this way:
​$(document)​.ready(function(){
$(".test").html($(".test").html().replace(/;/g, ";<br />"));
});​
Fiddle: http://jsfiddle.net/SPBTp/4/

Use This CODE
var test = $('.test').text();
var result = test.split(';').join(';<br />')
http://jsfiddle.net/FmBpF/

You can't use jQuery selectors on text, it only works on elements.
Get the text, just replace each ; with ;<br/>, and put it back.
$('.test').html($('.test').text().replace(/;/g, ';<br/>'));

Try something like this :
var test = $('.test').text();
var result = test.replace(/;/g,";");
$('.test').html(result);
​
That should work if you stick it into your jfiddle.

remove full path, keep filename only

Trying to remove the full url that is being returned to imgurl:
Usually returns something like http://localhost/wordpress/wp-content/uploads/filename.jpg
or http://localhost/wordpress/wp-content/uploads/images/filename.jpg
I'd like to strip off everything except filename.jpg and return it to
ahng_photos_upload_image. Strip off everything to the last forward-slash.
How can I do that with Jquery?
window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery('#ahng_photos_upload_image').val(imgurl);
tb_remove();
}

You don't need jQuery for that, just plain old JavaScript will do :)
alert('http://localhost/wordpress/wp-content/uploads/filename.jpg'.split('/').pop());​​
In your case:
var filename = imgurl.split('/').pop();

you can use a regular expression in order to achieve this..
var file = imgUrl.replace(/^.*[\\\/]/, '');
Now the file would consist of only the file name ..

If you're pretty confident that the URLs don't have funny stuff like hashes or parameters, a regex like this would do it:
var filename = imgurl.replace(/^.*\/([^/]*)$/, "$1");
Also: don't forget to declare "imgurl" with var, and you should probably use .prop() instead of .attr() if your version of jQuery is 1.6 or newer:
var imgurl = jQuery('img', html).prop('src');
Also jQuery internally turns the two-argument form of the function into this:
var imgurl = jQuery(html).find('img').prop('src');
so you might as well code it that way.

One further option:
var filename = imgurl.substring(imgurl.lastIndexOf('/') + 1);
JS Fiddle demo.

Here you have
var filename = imgurl.split('/').slice(-1);
Good luck!

Try this one:
imgurl.split('/').slice(-1);
Edit: Look at the version of #Andy who uses the pop() method, the latter being faster than slice(-1).

Note that if you don't know if you have forward or backward slashes, you are better off using the RE version of split:
"path".split(/[\/\\]/).slice(-1)

Here is an answer that will work when your file name is like ./file.jpg
var extension = fileName.slice((fileName.lastIndexOf(".") - 1 >>> 0) + 2);
var baseName = fileName.replace(/^.*\/([^/]*)$/, "$1");
var path = fileName.replace(/(^.*\/)([^/]*)$/, "$1");

Another way to concatenate

Is there another a way to concatenate a '#' character like I'm doing below?
radioButtonID = '#' + radioButtonID;

"#".concat(radioButtonID)
or
["#",radioButtonID].join('')

I suppose you could do something like this:
var radioButtonID = ['#', radioButtonID].join('');

That's about as short as it could get if you are prefixing.

What's wrong with what you've got there? That should work.
Unless you're looking for a stringbuffer or something...

Not very efficient, but this works:
radioButtonID.replace(/(.+)/,"#$1")

Jquery append element and then alter css?

I'm attempting to create a div tag and then alter it via css, but for some reason its not working here's my code:
$('#draw').click(function(e){
var divToAdd = "<div id='box' style='display:block;background-color:red;width:100px;height:100px'></div>";
$("#area").append(divToAdd);
});
$('#left').click(function(e){
//var leftNow = document.getElementById("box").left + 1;
alert(document.getElementById("box").left);
$("#box").css('left',leftNow);
});
$('#right').click(function(e){
var leftNow = document.getElementById("box").left - 1;
$("#box").css("left","90");
});
So for some reason the value of document.getElementById("box").left is undefined. I've been trying to figure this out for a while, i've probably got something wrong in my syntax perhaps? Any help would be appreciated, thanks alot! Thank you Nick Craver.

You would need .style.left, or $("#box").css('left'); in this case.
But...there's an easier way, like this:
$("#box").css("left","-=1");
You can just make it relative this way, same for +=, keep it simple :)

Here I have two suggestions:
(1)Use jQuery object instead of object itself
var divToAdd = $("<div id='box' style='display:block;background-color:red;width:100px;height:100px'></div>");
Actually the expression above is not so good either, to make it more 'jQuery":
var divToAdd = $('<div></div>').css('background-color','red').css....
(2) Keep using jQuery if you involved it
$('#box').css('left') instead of document.getElemengById(...)