Develop Reference

jQuery how to do the following

I've the following question, let say we have a div like this:
These are dynamically formatted divs, with the classes 'row', 'element' and 'isotope-item' are always present. Everything in between can vary per div.
What I want is to the following:
As you see the commmas are no longer there and seperate classes between the commas are now one class.
Anyone any idea?
I already have the following to remove the commas:
$('div.element').each(function () {
var _sCurrClasses = jQuery(this).attr('class');
jQuery(this).attr('class', _sCurrClasses.replace(/,/g, ' '));
});

I would advise doing this backend,but in JavaScript you could:
This will not account for the space in the words though.
You would need to pass then trough separately one by one and replace.
or store them in a data-attribute and format when you need them.
<string>
var classesFormat = classes.replace(/,/g, '');
var classesList = classesFormat.split(" ");
for(String c : classesList)
{
$("#id").addClass(c);
}
</string>
So you could create a data-attribute for each one instead.
Go through each one, format and the add to class.
<div data-id="Microsoft Office," class="test test test">
With the script
$(this).attr("data-id") // will return the string "Microsoft Office,"
or .data() (if you use newer jQuery >= 1.4.3)
$(this).data("id") // will return the Microsoft Office,
And then do your replace after that and addClass.

I don't think classes work like you think they do
the first PICTURE you posted would result in that div having the follwing classes
row
element
Microsoft
Office,
My
SQL,
Page
Rank
isotope-item
Note the , is PART of the class
You want, according to the second PICTURE
row
element
MicrosoftOffice
MySQL
Page
Rank
isotope-item
Removing , is just as you posted ... the problem is, how do you determine which spaces to remove, and which to keep?
(I posted this as an ANSWER, but I KNOW IT IS NOT AN ANSWER)

How to display a few HTML objects based on input?

I have a sections as shown below
<div class="mbox">
People: John, Tim, Jake
Number : 5
<div>.
<div class="mbox">
People: John, Jake
Number : 6
<div>
Now, How is it possible to hide the above when i give a user input of some sort to display all divs that have Number > 6. And also, another option to show sections that have John,Jake.
Can you suggest me how this can be done?
Thanks,
John

Firstly, you don't even know your HTML code is invalid?
Secondly, looks like you can't modify your HTML code?
So the only solution is to select all the .mboxs and use RegExp to extract the number and filter the result like this:
$('.mbox').filter(function(){
return parseInt(RegExp("Number\\s*:\\s*(\\d+)").exec($(this).text())[1]) <= 6;
}).css('display', 'none');
Demo.

You can try to use data attribute of html to define the variable of the div.
ex: <div class="mbox" data-number="5" data-name="..." > ... </div>
Than i jquery you can select the attribute $(".mbox").attr("data-number") and make a control that check the number.
Same for the name but there depends is they are dynamics or statics.
If they are dynamics it's a bit more complicated.

jQuery or JS to trim characters from inside a span

I'm trying to remove the end of some text within a span using jQuery or JS.
<h3 class="ms-standardheader ms-WPTitle">
<a href="" tabindex="0" accesskey="W">
<nobr>
<span>Programs ‭[1]‬</span>
I have 15 titles that are generated like this in SharePoint - 5 Programs, 5 Clinical Services, and 5 Other Support. I want to remove the [x] from each of them, however this is auto generated by SharePoint because it doesn't like having titles of the same name.
I've tried iterations of:
$('.ms-WPTitle a nobr span').splice(0, -4);
I can't seem to get at the text within the span to trim it. Any suggestions?

$('.ms-WPTitle a nobr span').text(function(el, old){
return old.slice(0, -4);
});
.text() accepts a function, which you can use to easily trim chars
Demo: http://jsfiddle.net/vhTuA/

Since ahren has given one approach you can try this as well: you can also try
demo http://jsfiddle.net/CCvPQ/2/ or http://jsfiddle.net/CCvPQ/4/
API used:
http://api.jquery.com/first/
http://api.jquery.com/text/
http://api.jquery.com/find/
Hope it fits the cause :)
code
jQuery.fn.justtext = function() {
return $(this).children().find('span').text();
};
alert($('.ms-standardheader').justtext());
using .first api
http://jsfiddle.net/qRZe7/1/
jQuery.fn.justtext = function() {
return $(this).children().find('span').first().text();
};
alert($('.ms-standardheader').justtext());

String manipulation using jQuery

I am wondering how I would remove the vowels from a word on a button click?
Here is what I am trying to do - http://www.marcia.bnmla.com/~marcia/project0.html
I need to use jQuery to remove the vowels in the second box so it displays only consonants when you click the button. I have it where it displays "MRC" as text when the button is clicked and I need to redo it using string manipulation so I can change the word to anything in my code and it will remove the vowels in that word. I am obviously new at this. Please help me!
Here is my code:
<div id="marcia_box">
<p id="marciatext">marcia</p>
<div id="marcia_boxBtn"><button id="marciaBtn">Marcia</button></div>
</div>
$("#marciaBtn").click(function() {
$("#marcia_box").css("background-color","#999");
$("#marciatext").html('mrc');
});

Do you really need jQuery? What about plain old JavaScript?
"abcdef".replace(/[aeiou]/gi, "") // => "bcdf"
How's that?

jQuery allows you to pass a function to .html, which should return a new HTML string. jQuery will pass the old HTML, so you can do something like this:
$("#marciatext").html(function(i, current) {
return current.replace(/[aeiou]/g, "");
});

demo
This one will help you now and in the future for other transformations
specially for toggling between two array keys
var c=0, text=['marcia', 'mrc'];
$("#marciaBtn").click(function() {
$("#marciatext").html( text[ ++c%2 ] );
});

As shown by Jarrett Meyer, removing the vowels has nothing with the jQuery part. But just to show you how to put it together with jQuery (since you said you is really new in it), here is a sample:
$("#marciatext").text($("#marciatext").text().replace(/[aeiou]/gi, ""));

Grab a single digit out of a big mess of html

I am grabbing a div from the document with :
var myTotal = window.document.getElementById('status').innerHTML;
which returns a big mess of HTML
<div id="foo">
<a href="bar" onclick='_gaq.push(["_trackEvent", "The", "Total",])'>
<img src="foo.gif" alt="foo" height="22px;/" width="15px;"></a>
</div>
<a href="bar" onclick='_gaq.push(["_trackEvent", "The", "Total",])'>
MY TOTAL:
<span style="font-size: 12px; color: #F3A428; font-weight:normal;"> 8 item(s) </span>
</a>
Can one of you expression wizards please show me how I can grab just the number in the span, in this example an 8 ?

Can you give the span an id and reference it directly?
If not, then this regex should return the number in the span: /<span[^>]+>\s*(\d+)/
I'm assuming that there is only ever one span in the div.

This should help you
var myTotal = window.document.getElementById('status').getElementsByTagName('span')[0].innerHTML
myTotal = myTotal.replace(/(^\d+)(.+$)/i,'$1');

In jQuery, without even getting the inner HTML it would be this:
var items = $("#status span").first().text();
items = parseInt(items, 10);
alert(items); // 8
If you control the HTML, it would be advisable to put a unique ID on the span containing the result and then it's easier to retrieve and not dependent upon the structure around it or better yet, have it output into the page as a JS variable that you can just directly read and not have to deal with the presentation.
Seen in a jsFiddle here: http://jsfiddle.net/jfriend00/UqcxS/

You can also try, just using innerText
window.document.getElementById('status').innerText.replace(/[^0-9]/gi, '');
http://jsfiddle.net/X9ffE/

Use jQuery instead, it has a lot of functions that can help you find specific elements in your page. Also, you may want to add identification for your elements like class and id.