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:

Fire Dragon said...

Bạn đang kinh doanh, bạn cần tìm nơi cung cấp dịch vụ giao hàng thu tiền cod? Tuy là có vô số nhà cung cấp dịch vụ này, nhưng bạn cần nơi đó phải thanh toán tiền thu hộ cho bạn nhanh để bạn còn xoay vốn. Nếu vậy thì bạn hãy đặt niềm tin vào chúng tôi. Đến với chúng tôi không chỉ là dịch vụ cod. Chúng tôi còn có nhiều dịch vụ khác như chuyển hàng đi đà nẵng, giao hàng nhanh, vận chuyển hàng đi hà nội, ký gửi hàng hóa, gửi hàng về miền tây, dịch vụ giao hàng cho shop online, nhận chuyển hàng về cần thơ, ship hàng giá rẻ toàn quốc, giao hàng nhanh nội thành hà nội - tphcm, chuyển phát nhanh trong nước, gửi hàng đi campuchia. Hãy an tâm khi đặt niềm tin nơi chúng tôi với kinh nghiệm lâu năm trong việc nhận ship hàng từ mỹ về việt nam của chúng tôi sẽ làm bạn hài lòng. Dịch vụ chuyen hang di da nang là một trong số những dịch vụ chúng tôi cung cấp được nhiều người sử dụng.

vận chuyển hàng hóa đi nha trang said...

Công ty vận tải chúng tôi chuyên cung cấp dịch vụ vận chuyển hàng máy móc đi Nha Trang để đáp ứng nhu cầu vận chuyển hàng hóa đi Nha Trang Hãy đến và cảm nhận những dịch vụ tốt nhất mà chúng tôi có thể mang dến cho bạn.
Các dịch vụ vận chuyển hàng hóa khác của chúng tôi:
- Dịch vụ vận chuyển hàng hóa từ HCM đi NAM ĐỊNH, NINH BÌNH
- Dịch vụ vận chuyển hàng hóa từ HCM đi THANH HÓA,NGHỆ AN, HÀ TĨNH
- Dịch vụ vận chuyển hàng hóa từ HCM đi Đà Nẵng
- Dịch vụ vận tải quà Tết gía rẻ
Liên hệ: Mr.Tài – 0166 944 5753 >< zalo
skype: nguyentaiachau94
mail:nguyentaiachau@gmail.com
https://www.facebook.com/vt.bacnam/?ref=bookmarks

Các thông tin dịch vụ vận chuyển khác:
- Dịch vụ vận chuyển hàng từ HCM đi Hà Nội
- Dịch vụ vận chuyển hàng đi Đà Nẵng
- Dịch vụ vận chuyển hàng từ HCM đi ra Quảng Bình

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”.