Thursday, December 20, 2012

JavaScript charAt() method

Usage of JavaScript charAt() method with live examples

The following example shows you how to use charAt() method in JavaScript
charAt() is a function that use to deal with strings. You can get a character in a specified string using this method. suppose that you have to get the character in a specific index of a given string; You can easily get that using charAt() method. Hear is the Syntax of the method.

char x=string.charAt(index);

Usage:
var myString="java script is easy to learn";
//you want to get 7th character.
alert("Index 6 contains the character "+ myString(6));

Remember that indexing begins with zero. So the index of the 1st character is zero. Therefore always maximum index is less than one of the length of the string. That means if you want to get the last character of a string you need to pass (string length-1) as the index. Following simple examples explains you how to use charAt() method in JavaScript programming.

1. How to get the first character of a given string using JavaScript?

Your String  
First Character of the string is    
Find It!  

Type any word or sentence in the provided text box. Then click on the "Find 1st Char" button. You will get the first character as the function output. If your entered string contains a space at the beginning, space will be shown as first character.

Complete source code for get the first character of a string.
<!DOCTYPE HTML>
<html>
<head>
<title>*avaScript charAt() Method Examples</title>
<style type="text/css">
.javascript_charAt{border: 1px solid #0080C0;background-color: #f5f5f5;font-family:Tahoma, Geneva, sans-serif;font-size:13px;padding:8px;margin-top:10%;width:auto;}
.javascript_charAt .title{font-size:14px;font-weight:bolder;margin-top:10px;}
.javascript_charAt input{border: 1px solid #0080C0;border-radius: 2px 2px 2px 2px;}
.javascript_charAt .error_input{border: 1px solid #FF0000;border-radius: 2px 2px 2px 2px;}
.javascript_charAt .message{color:#F00;}
.javascript_charAt .button{font-family:inherit;border: 1px solid #000099;border-radius: 2px 2px 2px 2px;padding: 2px 2px 2px 2px;}
.javascript_charAt .pwd{font-size:16px;color:#FF0000;}
.javascript_charAt .link{color:#FF0000;}
</style>
<script type="text/JavaScript">
function find_first_character(){
var str=document.getElementById("txtString1");
if(str.value.replace(/\s+$/,"")==""){
alert("Please enter valid string");
str.select();
str.focus();
return false;
}else{
var first_character= str.value.charAt(0);
document.getElementById("selected_char").innerHTML=first_character;
alert("First character is "+first_character);
}
}
</script>
</head>
<body>
<form id="javascript_charat1" name="javascript_charat1" action="#" method="post">
<table border="0" class="javascript_charAt">
<tr>
<td align="right">Your String</td>
<td>&nbsp;</td>
<td><input name="txtString1" type="text" id="txtString1" value="This is a sample string" maxlength="100"></td>
</tr>
<tr>
<td align="right">First Character of the string</td>
<td>&nbsp;</td>
<td><span id="selected_char" class="pwd" style="height:auto;">&nbsp;</span></td>
</tr>
<tr>
<td><a href="JavaScript:void(0);" rel="nofollow" onClick="JavaScript:find_first_character();">Find It!</a></td>
<td>&nbsp;</td>
<td><input name="btnGeneratePassword3" type="button" class="button" id="btnGeneratePassword3" value="Find 1st Char" onClick="JavaScript:find_first_character();"></td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>

2. How find the character at given index of a string using JavaScript?

Your String  
Character Index  
Character at the given index    
Get Character!  

Some times you may need to get the character in a specific string position. Using above example you can determine the character in given string index. Think that you are developing a JavaScript application to find the words which has the same character in a specific index, then you can use this sample script to do the work.

Complete JavaScript source code for find a character at given index.
<!DOCTYPE HTML>
<html>
<head>
<title>*avaScript charAt() Method Examples</title>
<style type="text/css">
.javascript_charAt{border: 1px solid #0080C0;background-color: #f5f5f5;font-family:Tahoma, Geneva, sans-serif;font-size:13px;padding:8px;margin-top:10%;width:auto;}
.javascript_charAt .title{font-size:14px;font-weight:bolder;margin-top:10px;}
.javascript_charAt input{border: 1px solid #0080C0;border-radius: 2px 2px 2px 2px;}
.javascript_charAt .error_input{border: 1px solid #FF0000;border-radius: 2px 2px 2px 2px;}
.javascript_charAt .message{color:#F00;}
.javascript_charAt .button{font-family:inherit;border: 1px solid #000099;border-radius: 2px 2px 2px 2px;padding: 2px 2px 2px 2px;}
.javascript_charAt .pwd{font-size:16px;color:#FF0000;}
.javascript_charAt .link{color:#FF0000;}
</style>
<script type="text/JavaScript">
function display_error_message(message,element){
alert(message);
element.select();
element .focus();
return false;
}
function find_given_index(){
var str=document.getElementById("txtString2");
var yourIndex = document.getElementById("character_index");

if(yourIndex.value.replace(/\s+$/,"")=="" || isNaN(yourIndex.value)){
display_error_message("Please enter a valid index",yourIndex);
}else{
if(parseInt(yourIndex.value)<0){
display_error_message("Index can't be less than 0",yourIndex);
}else{
if(str.value.length==0 || (str.value.length-1)<parseInt(yourIndex.value)){
display_error_message("Entered string length is not long enough\nPlease enter a long string",str);
}else{
var selected_character= str.value.charAt(parseInt(yourIndex.value));
document.getElementById("selected_char").innerHTML=selected_character;
alert("Character index at "+yourIndex.value+" is "+selected_character);
return selected_character;
}
}
}
return false;
}
</script>
</head>
<body>
<form id="javascript_charat2" name="javascript_charat2" action="#" method="post">
<table border="0" class="javascript_charAt">
<tr>
<td align="right">Your String</td>
<td>&nbsp;</td>
<td><input name="txtString2" type="text" id="txtString2" value="abcdefghijklmnopqrstuvwxyz" maxlength="100"></td>
</tr>
<tr>
<td align="right">Character Index</td>
<td>&nbsp;</td>
<td><input name="character_index" type="text" id="character_index" value="0" size="5" maxlength="3"></td>
</tr>
<tr>
<td align="right">Character at the given index</td>
<td>&nbsp;</td>
<td><span id="selected_char" class="pwd" style="height:auto;">&nbsp;</span></td>
</tr>
<tr>
<td><a href="JavaScript:void(0);" rel="nofollow" onClick="JavaScript:find_given_index();">Get Character!</a></td>
<td>&nbsp;</td>
<td><input name="btnGeneratePassword3" type="button" class="button" id="btnGeneratePassword3" value="Find Character" onClick="JavaScript:find_given_index();"></td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>

3. How to find the all occurrences of a character in given string using JavaScript?

Your String  
Character to find  
Search Results    
Get Character Occurrence  

Suppose that you are developing a JavaScript application for find words in a paragraph with specific characters and the number of times that character appear in the word. So applying this method, you can complete your work.

Copy and paste bellow code to get instance of a character appear in a string in JavaScript
<!DOCTYPE HTML>
<html>
<head>
<title>*avaScript charAt() Method Examples</title>
<style type="text/css">
.javascript_charAt{border: 1px solid #0080C0;background-color: #f5f5f5;font-family:Tahoma, Geneva, sans-serif;font-size:13px;padding:8px;margin:5px;width:auto;}
.javascript_charAt .title{font-size:14px;font-weight:bolder;margin-top:10px;}
.javascript_charAt input{border: 1px solid #0080C0;border-radius: 2px 2px 2px 2px;}
.javascript_charAt .error_input{border: 1px solid #FF0000;border-radius: 2px 2px 2px 2px;}
.javascript_charAt .message{color:#F00;}
.javascript_charAt .button{font-family:inherit;border: 1px solid #000099;border-radius: 2px 2px 2px 2px;padding: 2px 2px 2px 2px;}
.javascript_charAt .pwd{font-size:16px;color:#FF0000;}
.javascript_charAt .link{color:#FF0000;}
</style>
<script type="text/JavaScript">
function find_all_occurrence(){
var myString = document.getElementById("txtString2");
var yourCharacter = document.getElementById("yourCharacter");
var number_of_characters=0;

for(var j=0;j<myString.value.length;j++){
if(myString.value.charAt(j)==yourCharacter.value){
number_of_characters++;
}
}
if(number_of_characters>0){
var msg=yourCharacter.value+" found "+number_of_characters+" times";
document.getElementById("search_result").innerHTML=msg;
alert(msg);
return number_of_characters;
}else{
var msg=yourCharacter.value+" is not found in entered string";
document.getElementById("search_result").innerHTML=msg;
alert(msg);
return 0;
}
}
</script>
</head>
<body>
<form id="javascript_charat2" name="javascript_charat2" action="#" method="post">
<table border="0" class="javascript_charAt">
<tr>
<td align="right">Your String</td>
<td>&nbsp;</td>
<td><input name="txtString2" type="text" id="txtString2" value="abcdefghijklmnopqrstuvwxyz" maxlength="100"></td>
</tr>
<tr>
<td align="right">Character to find</td>
<td>&nbsp;</td>
<td><input name="yourCharacter" type="text" id="yourCharacter" value="c" size="5" maxlength="3"></td>
</tr>
<tr>
<td align="right">Search Results</td>
<td>&nbsp;</td>
<td><span id="search_result" class="pwd" style="height:auto;">&nbsp;</span></td>
</tr>
<tr>
<td><a href="JavaScript:void(0);" rel="nofollow" onClick="JavaScript:find_all_occurrence();">Get Character Occurrence</a></td>
<td>&nbsp;</td>
<td><input name="btnGeneratePassword3" type="button" class="button" id="btnGeneratePassword3" value="Get Character Occurrence" onClick="JavaScript:find_all_occurrence();"></td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>

4. How to find the first occurrence of a specified character in a string?

Your String  
Character to find  
Index of the 1st occurrence    
Get First Occurrence  
 

Suppose that you need to develop a program to find the first occurrence that a character appears in a given word. What you have to do is loop through to word till you met the character, then break the loop. Likewise you can determine the vowels and consonants in a given word.

Copy and paste bellow code code to get the first occurrence of a character in given word.
<!DOCTYPE HTML>
<html>
<head>
<title>*avaScript charAt() Method Examples</title>
<style type="text/css">
.javascript_charAt{border: 1px solid #0080C0;background-color: #f5f5f5;font-family:Tahoma, Geneva, sans-serif;font-size:13px;padding:8px;margin:5px;width:auto;}
.javascript_charAt .title{font-size:14px;font-weight:bolder;margin-top:10px;}
.javascript_charAt input{border: 1px solid #0080C0;border-radius: 2px 2px 2px 2px;}
.javascript_charAt .error_input{border: 1px solid #FF0000;border-radius: 2px 2px 2px 2px;}
.javascript_charAt .message{color:#F00;}
.javascript_charAt .button{font-family:inherit;border: 1px solid #000099;border-radius: 2px 2px 2px 2px;padding: 2px 2px 2px 2px;}
.javascript_charAt .pwd{font-size:16px;color:#FF0000;}
.javascript_charAt .link{color:#FF0000;}
</style>
<script type="text/JavaScript">
function find_first_occurrence(){
var myString = document.getElementById("txtString4");
var char_to_find = document.getElementById("char_to_find");
var first_met='';

for(var j=0;j<myString.value.length;j++){
if(myString.value.charAt(j)==char_to_find.value){
first_met=j;
break;
}
}
if(first_met!=''){
var msg="Index of the first occurrence of of "+char_to_find.value+" is "+first_met;
document.getElementById("search_result2").innerHTML=first_met;
alert(msg);
return first_met;
}else{
var msg=char_to_find.value+" is not found in the string";
document.getElementById("search_result2").innerHTML='Not Found';
alert(msg);
return null;
}
}
</script>
</head>
<body>
<form id="javascript_charat4" name="javascript_charat4" action="#" method="post">
<table border="0" class="javascript_charAt">
<tr>
<td align="right">Your String</td>
<td>&nbsp;</td>
<td><input name="txtString4" type="text" id="txtString4" value="abcdefghijklmnopqrstuvwxyz" maxlength="100"></td>
</tr>
<tr>
<td align="right">Character to find</td>
<td>&nbsp;</td>
<td><input name="char_to_find" type="text" id="char_to_find" value="c" size="5" maxlength="3"></td>
</tr>
<tr>
<td align="right">Index of the 1st occurrence</td>
<td>&nbsp;</td>
<td><span id="search_result2" class="pwd" style="height:auto;">&nbsp;</span></td>
</tr>
<tr>
<td><a href="JavaScript:void(0);" rel="nofollow" onClick="JavaScript:find_first_occurrence();">Get First Occurrence</a></td>
<td>&nbsp;</td>
<td><input name="btnGeneratePassword3" type="button" class="button" id="btnGeneratePassword3" value="Get 1st Occurrence" onClick="JavaScript:find_first_occurrence();"></td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>

5. JavaScript program to find the words with specified characters in a paragraph?

Your String  
Count the words which have letter  
Words found  
Get Words  

Above program can find words in a textarea/pragraph that contains a specified character. No matter where the character appears in the word. Type a lengthy paragraph and mension a character that you need to find in words and simply press "Get the Words" Button. You will get the complete list of words and the count of words at the same time.
Bellow code code describes how to calculate words begins with a given character using JavaScript.
<!DOCTYPE HTML>
<html>
<head>
<title>*avaScript charAt() Method Examples</title>
<style type="text/css">
.javascript_charAt{border: 1px solid #0080C0;background-color: #f5f5f5;font-family:Tahoma, Geneva, sans-serif;font-size:13px;padding:8px;margin:5px;width:auto;}
.javascript_charAt .title{font-size:14px;font-weight:bolder;margin-top:10px;}
.javascript_charAt input{border: 1px solid #0080C0;border-radius: 2px 2px 2px 2px;}
.javascript_charAt .error_input{border: 1px solid #FF0000;border-radius: 2px 2px 2px 2px;}
.javascript_charAt .message{color:#F00;}
.javascript_charAt .button{font-family:inherit;border: 1px solid #000099;border-radius: 2px 2px 2px 2px;padding: 2px 2px 2px 2px;}
.javascript_charAt .pwd{font-size:16px;color:#FF0000;}
.javascript_charAt .link{color:#FF0000;}
</style>
<script type="text/JavaScript">
function count_words_with(){
var myString = document.getElementById("txtString4");
var char_to_find = document.getElementById("char_to_find");
var first_met='';

for(var j=0;j<myString.value.length;j++){
if(myString.value.charAt(j)==char_to_find.value){
first_met=j;
break;
}
}
if(first_met!=''){
var msg="Index of the first occurrence of of "+char_to_find.value+" is "+first_met;
document.getElementById("search_result2").innerHTML=first_met;
alert(msg);
return first_met;
}else{
var msg=char_to_find.value+" is not found in the string";
document.getElementById("search_result2").innerHTML='Not Found';
alert(msg);
return null;
}
}
</script>
</head>
<body>
<form id="javascript_charat4" name="javascript_charat4" action="#" method="post">
<table border="0" class="javascript_charAt">
<tr>
<td align="right">Your String</td>
<td>&nbsp;</td>
<td><input name="txtString4" type="text" id="txtString4" value="abcdefghijklmnopqrstuvwxyz" maxlength="100"></td>
</tr>
<tr>
<td align="right">Character to find</td>
<td>&nbsp;</td>
<td><input name="char_to_find" type="text" id="char_to_find" value="c" size="5" maxlength="3"></td>
</tr>
<tr>
<td align="right">Index of the 1st occurrence</td>
<td>&nbsp;</td>
<td><span id="search_result2" class="pwd" style="height:auto;">&nbsp;</span></td>
</tr>
<tr>
<td><a href="JavaScript:void(0);" rel="nofollow" onClick="JavaScript:count_words_with();">Get First Occurrence</a></td>
<td>&nbsp;</td>
<td><input name="btnGeneratePassword3" type="button" class="button" id="btnGeneratePassword3" value="Get 1st Occurrence" onClick="JavaScript:count_words_with();"></td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
</table>
</form>
</body>
</html>

3 comments:

After Hours Programming said...

Great little javascript tutorial, you might want to mention something about index and how it works with strings.

Fire Dragon said...

Bạn đang tìm dịch vụ giao hàng? Bạn cần dịch vụ vận chuyển hàng hóa với giá cả phải chăng, đặc biệt phải giao hàng nhanh đến tay khách hàng của bạn. Đến với chúng tôi, với các dịch vụ vận chuyển phong phú đa dạng như: chuyển hàng đi miền tây, giao hàng nội thành tphcm, gửi hàng từ tphcm đi hà nội, gửi hàng đi bạc liêu, gửi đồ từ hà nội vào sài gòn, cho thuê kho quận 7 , ký gửi hàng hóa, dịch vụ giao hàng thu tiền hộ... Chúng tôi hiện đã phục vụ khắp 64 tỉnh thành. Khi bạn có nhu cầu cần vận chuyển hãy nhớ đến chúng tôi.

Diệp Hồng said...

Bên bạn biết công ty vận chuyển đường bộ nào có bang gia van tai hang hoa rẻ không, anh cần tìm đơn vị để chuyển hàng mau gian phoi quan ao. Bên tui chuyên cung cấp các loại giàn phơi đồ thông minh Hoà Phát, gian phoi Duy Loi, gian phoi quan ao Sankaku, gian phoi quan ao thong minh HCM, phu kien gian phoi, giàn phơi đồ thông minh Seri 9999, gian phoi do thong minh KG 900 Gold, giàn phơi quần áo KS950 giá rẻ, giàn phơi đồ thông minh SERI 999B, giàn phơi quần áo thông minh Sankaku S01, giàn phơi quần áo thông minh Seri 888.

Ngoài ra bên mình cũng cung cấp thang máy nâng hàng, tư vấn mua thang máy gia đình.

Inbox cho tui nhé.