Thursday, December 27, 2012

change text case in JavaScript


Convert string to lower case/upper case using  JavaScript?


The following example shows you how to use toLowerCase() and toUpperCase() method in JavaScript

You may need to change the text to upper case or lower case in JavaScript There are two built-in string functions to change the letter case in JavaScript. toLowerCase() is changes the text to small letters (Simple Letters) and toUpperCase() changes the text to big letters (Capital Letters) The syntax of the toUpperCase() and toLowerCase() as follows

string lower=text.toLowerCase();

Usage:
var myString="You Can easily Change given Text to Lower Case in JavaScript";
//make small letters using JavaScript
alert(myString.toLowerCase());

string upper=text.toUpperCase();

Usage:
var myString="It is very easy To change given text case to Upper in JavaScript";
//make big letters using JavaScript
alert(myString.toUpperCase());
toUpperCase() and toLowerCase() functions returns the all input text to upper case and lower case respectively. Using above tow methods, you can easily change a whole paragraph to simple letters or capital letters. When doing string formatting in JavaScript these two methods are very useful. You can use these methods to build programs that convert string capitalization in sentence case or title case.

1. How to convert lowercase/ simple letters to upper case using JavaScript?


Your Text that need to change case :
Output :
Also Convert text in the Textarea :
make capital letters
This example shows you how to convert text in a text area to uppercase. Some times you may need to convert user input in to capital letters, in such case you can use this example to to make capital letters in JavaScript.
Complete source code for change all letters of a given string to capital.

<!DOCTYPE HTML>
<html>
<head>
<title>Convert string to capital letters</title>
<style type="text/css">
.javascript_change_case{border: 1px solid #0080C0;background-color: #f5f5f5;font-family:Tahoma, Geneva, sans-serif;font-size:13px;padding:8px;margin:5px;width:auto;}
.javascript_change_case .title{font-size:14px;font-weight:bolder;margin-top:10px;}
.javascript_change_case input{border: 1px solid #0080C0;border-radius: 2px 2px 2px 2px;}
.javascript_change_case .error_input{border: 1px solid #FF0000;border-radius: 2px 2px 2px 2px;}
.javascript_change_case .message{color:#F00;}
.javascript_change_case .button{font-family:inherit;border: 1px solid #000099;border-radius: 2px 2px 2px 2px;padding: 2px 2px 2px 2px;}
.javascript_change_case .pwd{font-size:16px;color:#FF0000;}
.javascript_change_case .link{color:#FF0000;}
</style>
<script type="text/javascript">
function makeCapitalLetters(){
var text = document.getElementById("paragraph1").value;
var capital = text.toUpperCase();
document.getElementById("upper_case_output").innerHTML=capital;
if(document.getElementById("checkSource1").checked){
document.getElementById("paragraph1").value=capital;
}
alert(capital);
}
</script>
</head>
<form id="javascript_change_case1" name="javascript_change_case1" action="#" method="post">
<table border="0" class="javascript_change_case">
<tr>
<td align="right">Your Text that need to change case</td>
<td>:</td>
<td><textarea name="paragraph1" cols="40" rows="5" id="paragraph1">This is a sample paragraph</textarea></td>
</tr>
<tr>
<td align="right">Output</td>
<td>:</td>
<td><span id="upper_case_output" class="link"></span></td>
</tr>
<tr>
<td align="right">Also Convert text in the Textarea </td>
<td>:</td>
<td><input type="checkbox" name="checkSource1" id="checkSource1"></td>
</tr>
<tr>
<td><a href="javascript:void(0);" rel="nofollow" onClick="javascript:makeCapitalLetters();">make capital letters</a></td>
<td>&nbsp;</td>
<td><input name="btnToUpper" type="button" class="button" id="btnToUpper" value="Conver to Upper Case" onClick="javascript:makeCapitalLetters();"><span class="pwd" id="number_of_words"></span></td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>

2. How to convert uppercase/capital letters to lower case using JavaScript?


Your Text that need to change case :
Output :
Also Convert text in the Textarea :
make simple letters
Sometimes you may need to change all text in a textarea in to simple letters before you save it to the database in your web application. You can use this client side script to convert text to simple letters. This may useful when you save user e-mail address to the database or save a web URL.
Complete JavaScript source code for conver text to simple letters in a textarea.

<!DOCTYPE HTML>
<html>
<head>
<title>Conver text to lower case</title>
<style type="text/css">
.javascript_change_case{border: 1px solid #0080C0;background-color: #f5f5f5;font-family:Tahoma, Geneva, sans-serif;font-size:13px;padding:8px;margin:5px;width:auto;}
.javascript_change_case .title{font-size:14px;font-weight:bolder;margin-top:10px;}
.javascript_change_case input{border: 1px solid #0080C0;border-radius: 2px 2px 2px 2px;}
.javascript_change_case .error_input{border: 1px solid #FF0000;border-radius: 2px 2px 2px 2px;}
.javascript_change_case .message{color:#F00;}
.javascript_change_case .button{font-family:inherit;border: 1px solid #000099;border-radius: 2px 2px 2px 2px;padding: 2px 2px 2px 2px;}
.javascript_change_case .pwd{font-size:16px;color:#FF0000;}
.javascript_change_case .link{color:#FF0000;}
</style>
<script type="text/javascript">
function makeSimpleLetters(){
var text = document.getElementById("paragraph2").value;
var simple = text.toLowerCase();
document.getElementById("lower_case_output").innerHTML=simple;
if(document.getElementById("checkSource2").checked){
document.getElementById("paragraph2").value=simple;
}
alert(simple);
}
</script>
</head>
<blockquote>
<form id="javascript_change_case2" name="javascript_change_case2" action="#" method="post">
<table border="0" class="javascript_change_case">
<tr>
<td align="right">Your Text that need to change case</td>
<td>:</td>
<td><textarea name="paragraph2" cols="40" rows="5" id="paragraph2">This is a sample paragraph</textarea></td>
</tr>
<tr>
<td align="right">Output</td>
<td>:</td>
<td><span id="lower_case_output" class="link"></span></td>
</tr>
<tr>
<td align="right">Also Convert text in the Textarea </td>
<td>:</td>
<td><input type="checkbox" name="checkSource2" id="checkSource2"></td>
</tr>
<tr>
<td><a href="javascript:void(0);" rel="nofollow" onClick="javascript:makeSimpleLetters();">make simple letters</a></td>
<td>&nbsp;</td>
<td><input name="btnToUpper" type="button" class="button" id="btnToUpper" value="Conver to Lower Case" onClick="javascript:makeSimpleLetters();"><span class="pwd" id="number_of_words"></span></td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
</table>
</form>
</blockquote>
</body>
</html>

3. How to capitalize first letter of each word in a sentence using JavaScript?


Text to capitalize each word :
Output :
Make Title Case
When you are doing programming you may need to convert a string in to title case. You can use two methods to make title case using JavaScript. You can use regular expression or write a basic program to convert a paragraph in to title case. In this I have use a little javascript code to make each word capital in a sentence. This script may useful to format names, addresses etc.
Copy and paste following source code for make title capitalization in a sentence

<!DOCTYPE HTML>
<html>
<head>
<title>Title case capitalization example</title>
<style type="text/css">
.javascript_change_case{border: 1px solid #0080C0;background-color: #f5f5f5;font-family:Tahoma, Geneva, sans-serif;font-size:13px;padding:8px;margin:5px;width:auto;}
.javascript_change_case .title{font-size:14px;font-weight:bolder;margin-top:10px;}
.javascript_change_case input{border: 1px solid #0080C0;border-radius: 2px 2px 2px 2px;}
.javascript_change_case .error_input{border: 1px solid #FF0000;border-radius: 2px 2px 2px 2px;}
.javascript_change_case .message{color:#F00;}
.javascript_change_case .button{font-family:inherit;border: 1px solid #000099;border-radius: 2px 2px 2px 2px;padding: 2px 2px 2px 2px;}
.javascript_change_case .pwd{font-size:16px;color:#FF0000;}
.javascript_change_case .link{color:#FF0000;}
</style>
<script type="text/javascript">
function capitalize(e) {
var t = '"@.,”/!?%^&*=+<>|`~-_(){}[]#;:“0123456789';
var n = "";
var r = 0;
e: for (var i = 0; i < e.length; i++) {
for (var s = 0; s < t.length; s++) {
var o = e.charCodeAt(i);
if (o >= 65 && o <= 90 || o >= 97 && o <= 122) {
r = i;
break e;
}
}
}
if (r == 0) {
n = e.charAt(0).toUpperCase() + e.substring(1, e.length);
} else {
n = e.substring(0, r) + e.charAt(r).toUpperCase() + e.substring(r + 1, e.length - r + 1);
}
return n;
}
function makeTitleCase() {
var e = document.getElementById("paragraph3").value;
var t = "";
var n = "";
for (var r = 0; r < e.length; r++) {
var i = e.charCodeAt(r);
if (i == 32 || i == 10) {
if (n != "") {
t += capitalize(n) + (i == 10 ? "<br/><br/>" : " ");
n = "";
continue;
}
n = "";
} else {
if (n == "") {
n += e.charAt(r).toUpperCase();
} else {
n += e.charAt(r).toLowerCase();
}
}
}
t += capitalize(n) + " ";
document.getElementById("title_case_output").innerHTML = t;
}
</script>
</head>
<blockquote>
<form id="javascript_change_case3" name="javascript_change_case3" action="#" method="post">
<table border="0" class="javascript_change_case">
<tr>
<td align="right">Text to capitalize each word</td>
<td>:</td>
<td><textarea name="paragraph3" cols="40" rows="5" id="paragraph3">This is a sample paragraph</textarea></td>
</tr>
<tr>
<td align="right">Output</td>
<td>:</td>
<td><span id="title_case_output" class="link"></span></td>
</tr>

<tr>
<td><a href="javascript:void(0);" rel="nofollow" onClick="javascript:makeTitleCase();">Make Title Case</a></td>
<td>&nbsp;</td>
<td><input name="btnToTitleCase" type="button" class="button" id="btnToTitleCase" value="Conver to Title Case" onClick="javascript:makeTitleCase();"><span class="pwd" id="number_of_words"></span></td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
</table>
</form>
</blockquote>
</body>
</html>

4. How to capitalize every word in a sentence using regular expression?


Text to Title Case :
Output :
Build Title Case
You can use regular expression for convert every word in a string. It reduce your code in to one or two lines. Easy to use.
Regular expression code explanation: /\w\S*/g
\w means find all Alphanumeric characters plus "_" ([A-Za-z0-9_])
\S means Non-white space characters
g parameter indicates, Perform a global replacement
Copy and paste bellow code code to convert text to title case using regular expression.

<!DOCTYPE HTML>
<html>
<head>
<title>Change case in javascript</title>
<style type="text/css">
.javascript_change_case{border: 1px solid #0080C0;background-color: #f5f5f5;font-family:Tahoma, Geneva, sans-serif;font-size:13px;padding:8px;margin:5px;width:auto;}
.javascript_change_case .title{font-size:14px;font-weight:bolder;margin-top:10px;}
.javascript_change_case input{border: 1px solid #0080C0;border-radius: 2px 2px 2px 2px;}
.javascript_change_case .error_input{border: 1px solid #FF0000;border-radius: 2px 2px 2px 2px;}
.javascript_change_case .message{color:#F00;}
.javascript_change_case .button{font-family:inherit;border: 1px solid #000099;border-radius: 2px 2px 2px 2px;padding: 2px 2px 2px 2px;}
.javascript_change_case .pwd{font-size:16px;color:#FF0000;}
.javascript_change_case .link{color:#FF0000;}
</style>
<script type="text/javascript">
function changeTitleCase(){
var userInput=document.getElementById("paragraph4");
var titleCase= userInput.value.replace(/\w\S*/g,function(text){
return text.charAt(0).toUpperCase() + text.substr(1).toLowerCase();
});
document.getElementById("reg_title_case_output").innerHTML=titleCase;
}
</script>
</head>
<blockquote>
<form id="javascript_change_case4" name="javascript_change_case4" action="#" method="post">
<table border="0" class="javascript_change_case">
<tr>
<td align="right">Text to Title Case</td>
<td>:</td>
<td><textarea name="paragraph4" cols="40" rows="5" id="paragraph4">You can use regular expression to make title case text in javascript</textarea></td>
</tr>
<tr>
<td align="right">Output</td>
<td>:</td>
<td><span id="reg_title_case_output" class="link"></span></td>
</tr>

<tr>
<td><a href="javascript:void(0);" rel="nofollow" onClick="javascript:changeTitleCase();">Build Title Case</a></td>
<td>&nbsp;</td>
<td><input name="btnToTitleCase" type="button" class="button" id="btnToTitleCase" value="Get Title Case Text" onClick="javascript:changeTitleCase();"><span class="pwd" id="number_of_words"></span></td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
</table>
</form>
</blockquote>
</body>
</html>

3 comments:

vận chuyển hàng hóa đi nha trang said...
This comment has been removed by the author.
Hoà Huyên said...

dù rằng còn hơn một tháng nữa mới tới Tết Nguyên đán 2017 nhưng tại Hà Nội, phổ quát cây đào bích, đào phai đã sớm khoe sắc trên gian phoi do thong minh.

Vừa mua cành đào phai tại chợ hoa quảng cáo, bà Nguyễn Thị Liên (51 tuổi, P.Bạch Mai, Q.Hai Bà Trưng) chia sẻ: “Tôi tìm cành đào phai giá 160.000 đồng. Năm nào vợ chồng tôi cũng đánh xe lên chợ này mua cành đào về đón rằm tháng Chạp và Tết Dương lịch”.

Unknown said...

Là 1 nhà hàng Uy Tín – Đáng Tin Cậy. mang chuyên nghiệp trong lĩnh vực tài chính. Chúng tôi luôn đặt “Lời ích các bạn khi vay tiền lên hàng đầu”. Sau thoáng đãng năm phát triễn nghiên cứu. nhận diện được sự ngăn cản và thủ tục rượm rà lúc vay tiền hiện thời. buộc phải chúng tôi đưa ra giải pháp mới thích hợp với khuynh hướng mới Vay tiền mặt – có tiền nhanh trong ngày.

một. Thủ tục vay đơn thuần nhất hiện nay
Chỉ bắt buộc giấy tờ ko buộc phải giám định rườm rà. Bằng tài xế hoặc Hộ khẩu đã vay được tiền.
2. thời kì giải ngân tiền mặt nhanh nhất bây chừ
Cam kết phê chuẩn hồ sơ trong 15 – 30 phút. Giải ngân tiền mặt sau 30 phút – đến 2h giả dụ làm cho hồ sơ trước 21H Tối. Chúng tôi cam kết giải quyết trong ngày. không để tồn sang hôm sau.
3. Vay toền online miễn sao bạn mang mạng internet
phần lớn lúc phần lớn nơi. coi xét website. Chúng tôi sẽ có chuyên viên tư vấn nhiều năm kinh nghiệm hỗ trợ bạn. Bạn ko phải buộc phải đi xa chờ đợi. Chỉ bắt buộc nhấc máy và gọi. Sẽ vay được tiền.
4. không hề tài sản bảo đảm, chẳng phải chứng tỏ thu nhập
Chỉ đề nghị thủ tục đơn giản như trên. Chúng tôi ko nên ai bảo lãnh khoản vay cho bạn. nên siêu yên ổn tâm không khiến cho phiền người nhà bạn.

vay tien nhanh, vay tiền nhanh, vay tiền online, vay tien online, vay tien, vay tiền, vay tien, vay tín chấp, vay tin chap, vay tiền nhanh nhất, vay tien nhanh online, vay tiền nhanh online, vay tiền online nhanh, vvay tien online nhanh,
vay tien nhanh nhat,