jQuery Convert Text to Uppercase/Lowercase

jQuery Code Snippets to convert text on a web page to uppercase or lowercase. Could be useful for changing text styles on your web page without using css (although there is a css example below also).

Uppercase/Lowercase using jQuery


//Lowercase
$('jqueryselector').val($(this).val().toLowerCase());
//Uppercase
$('jqueryselector').val($(this).val().toUpperCase());

Capitalize using CSS

If you wanted to capitalise first letter of each word you could do this by using CSS.


.capitalise
{
    text-transform:capitalize;
}

Then attach it to the element.


$('jqueryselector').addClass('capitalise');

Frequently Asked Questions (FAQs) about jQuery Text Conversion

How can I convert text to uppercase using jQuery?

Converting text to uppercase using jQuery is quite simple. You can use the .toUpperCase() method. Here’s a simple example:

var text = "hello world";
var upperCaseText = text.toUpperCase();
console.log(upperCaseText); // Outputs: HELLO WORLD
In this example, the variable ‘text’ contains the string “hello world”. The .toUpperCase() method is then used to convert this string to uppercase.

Can I convert text to lowercase using jQuery?

Yes, you can convert text to lowercase using jQuery. The method to use is .toLowerCase(). Here’s an example:

var text = "HELLO WORLD";
var lowerCaseText = text.toLowerCase();
console.log(lowerCaseText); // Outputs: hello world
In this example, the variable ‘text’ contains the string “HELLO WORLD”. The .toLowerCase() method is then used to convert this string to lowercase.

How can I convert input values to uppercase using jQuery?

You can convert input values to uppercase using jQuery by using the .toUpperCase() method in combination with the .val() method. Here’s an example:

$('input').on('input', function() {
this.value = this.value.toUpperCase();
});
In this example, the .on() method is used to attach an event handler function to the ‘input’ event. The function converts the input value to uppercase every time the user types something into the input field.

Can I convert all text in a div to uppercase using jQuery?

Yes, you can convert all text in a div to uppercase using jQuery. Here’s an example:

$('div').text(function(i, text) {
return text.toUpperCase();
});
In this example, the .text() method is used to get the combined text contents of each element in the set of matched elements. It’s also used to set the content of the elements. The function passed to the .text() method converts the text to uppercase.

How can I convert text to title case using jQuery?

Converting text to title case using jQuery involves capitalizing the first letter of each word and making all other letters lowercase. Here’s an example:

String.prototype.toTitleCase = function() {
return this.replace(/\w\S*/g, function(txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
};
$('div').text(function(i, text) {
return text.toTitleCase();
});
In this example, a new method .toTitleCase() is added to the String prototype. This method uses a regular expression to match each word in the string and then uses the .replace() method to replace each word with the same word, but with the first letter capitalized and all other letters in lowercase.

Can I convert text to sentence case using jQuery?

Yes, you can convert text to sentence case using jQuery. Sentence case means only the first letter of the first word is capitalized, and all other letters are in lowercase. Here’s an example:

String.prototype.toSentenceCase = function() {
return this.charAt(0).toUpperCase() + this.slice(1).toLowerCase();
};
$('div').text(function(i, text) {
return text.toSentenceCase();
});
In this example, a new method .toSentenceCase() is added to the String prototype. This method capitalizes the first letter of the string and makes all other letters lowercase.

How can I convert text to toggle case using jQuery?

Toggle case means alternating between uppercase and lowercase letters. Here’s an example of how to convert text to toggle case using jQuery:

String.prototype.toToggleCase = function() {
var result = '';
for (var i = 0; i < this.length; i++) {
if (i % 2 == 0) {
result += this.charAt(i).toUpperCase();
} else {
result += this.charAt(i).toLowerCase();
}
}
return result;
};
$('div').text(function(i, text) {
return text.toToggleCase();
});
In this example, a new method .toToggleCase() is added to the String prototype. This method uses a for loop to iterate over each character in the string. If the index of the character is even, the character is converted to uppercase. If the index is odd, the character is converted to lowercase.

Can I convert text to random case using jQuery?

Yes, you can convert text to random case using jQuery. Random case means each letter is randomly either uppercase or lowercase. Here’s an example:

String.prototype.toRandomCase = function() {
var result = '';
for (var i = 0; i < this.length; i++) {
var random = Math.random();
if (random < 0.5) {
result += this.charAt(i).toUpperCase();
} else {
result += this.charAt(i).toLowerCase();
}
}
return result;
};
$('div').text(function(i, text) {
return text.toRandomCase();
});
In this example, a new method .toRandomCase() is added to the String prototype. This method uses a for loop to iterate over each character in the string. A random number between 0 and 1 is generated for each character. If the number is less than 0.5, the character is converted to uppercase. If the number is 0.5 or greater, the character is converted to lowercase.

How can I convert text to alternating case using jQuery?

Alternating case means the case of each letter is the opposite of the previous letter. Here’s an example of how to convert text to alternating case using jQuery:

String.prototype.toAlternatingCase = function() {
var result = '';
var isUpper = true;
for (var i = 0; i < this.length; i++) {
if (isUpper) {
result += this.charAt(i).toUpperCase();
} else {
result += this.charAt(i).toLowerCase();
}
isUpper = !isUpper;
}
return result;
};
$('div').text(function(i, text) {
return text.toAlternatingCase();
});
In this example, a new method .toAlternatingCase() is added to the String prototype. This method uses a for loop to iterate over each character in the string. A boolean variable ‘isUpper’ is used to keep track of whether the current character should be uppercase or lowercase. The value of ‘isUpper’ is toggled after each character.

Can I convert text to a specific case using jQuery?

Yes, you can convert text to a specific case using jQuery. You can create a custom function that converts text to the case you want. Here’s an example of a function that converts text to camel case:

String.prototype.toCamelCase = function() {
return this.replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index) {
return index == 0 ? word.toLowerCase() : word.toUpperCase();
}).replace(/\s+/g, '');
};
$('div').text(function(i, text) {
return text.toCamelCase();
});
In this example, a new method .toCamelCase() is added to the String prototype. This method uses a regular expression to match each word in the string and then uses the .replace() method to replace each word with the same word, but with the first letter in lowercase and all other letters in uppercase. The .replace() method is also used to remove all whitespace.