Capitalize headers with jQuery?

Trying to transform a H2 that is in all-caps into normal capitalized. Css text-transform will not work, the text, itself is all-caps.

edit: So, the alert()s, I dont actually want or need those, I was just hoping to see that the script is working. The goal is to get the text in the h2 to be capitalized.

    // ==UserScript==
// @name     az
// @include  *azlyrics.com*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==

alert('this does happen');//i have to click ok 3 times to get rid of it...
$(document).ready(function() {
  var str = $("h2");
  str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
     return letter.toUpperCase();
  });
  alert(str);//this alert never happens.  
});

Ok, here it is, working, thanks to the chosen answer

$(document).ready(function() {
  //var str = $("h2");
  str = $("h2").text();
  str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
     return letter.toUpperCase();
  });
  $( "h2" ).text( str );
 // alert(str);
});

Answers


You are selecting the h2 element itself instead of its contents. The second alert is not shown because you get a TypeError when trying to call toLowerCase on the jQuery reference:

TypeError: undefined is not a function

Update this line and all should be fine:

var str = $("h2").text();

Need Your Help

Win32 How to bring a modeless dialog box to the top

winapi dialog win32gui

I have a set of modeless dialog boxes open, but I can't for the life of me click on one of them get it to appear in the foreground. It gets focus, but the dialog boxes forever remain in the order o...