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>
Posted by Duminda Chamara at 9:12 AM

3 comments:

After Hours Programming said...

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

December 29, 2012 at 6:13 PM
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.

April 13, 2015 at 2:30 AM
jothikumar said...

This blog is the general information for the feature. You got good work for this blog. We have a developing our creative content of this mind. Thank you for this blog. This for very interesting and useful.
Docker online training
Docker certification training
Docker online course
Docker training course

September 7, 2019 at 4:14 AM

Post a Comment

Subscribe to: Post Comments (Atom)