Using JavaScript charAt() Method to Get the x Character in a String

I have asked this question to myself at many occasions during my programming days and I believe it’s a common question every programmer asks is, how to get the first or last character in a string using JavaScript. Here in this post I'll show you some simple examples on how to get the x character in a string using JavaScript.

JavaScript charAt() Method

Using JavaScript charAt() method, we can get a particular character from a string. It is simple and browser friendly.

Syntax charAt() Method

string.charAt(position)

The charAt() method takes a single argument as the position or index and returns a character that we might be look for in a string. The characters in a string are indexed as 0, 1, 2 and so on.

JavaScript charAt() Method

Get the First Character in a String using charAt() Method

To get the first character, I would use the value "0" as the parameter for the method. This is how it would be.

💡 Alternatively, you can use Array.from() method. For example... Array.from('Computer Science')[0]

<html>
<body>
    <input type="button" value="Click it" onclick="showFirstChar()" />
    <p><label id="Char0"></label></p>
</body>
<script>
    function showFirstChar() {
        var sWord = 'Computer Science';
        document.getElementById('Char0').innerHTML = sWord.charAt(0);     // Output: C
    }
</script>
</html>

Try it

The method charAt() is attached with a string variable. The index value "0" returns the first character. So, if you want to get the character "U" from the string, which is at the fifth location, then you will have to pass the value "4" as argument to the method.

Add hash before a string using charAt() Method

Here is a real time scenario. I want my users to enter the color hex code in an input box and before validating the entry, I wish to check if they have entered the “#” (hash) symbol in the beginning of the six-digit value. A hexadecimal code starts with the “#” symbol. The script would check the entry and if it does not find the symbol in the beginning, then it would add the “#” as a prefix with the value.

The Code

<html>
<body>
    <p>
        <input type="text" value="FF0000" id="hexCode" style="width:100px;" />
     </p>
     <p>
        <label>Click the button to add “#” (hash) before the string</label>
     </p>
     <p>
        <input type="button" value="Click Me!" onclick="Validate()" />
    </p>
</body>

<script>    
    function Validate() { 
        var fi; 
        fi = document.getElementById('hexCode').value; 
        if (fi.charAt(0) != '#') 
        {
            document.getElementById('hexCode').value = '#' + 
                document.getElementById('hexCode').value; }
        }
</script>
</html>

Try it

Get the Last Character using charAt() Method

We can use the charAt() in conjunction with another popular JavaScript method called the length property.

The Code

<html>
<body>
    <p>Click the button to show the LAST character in the string "Computer Science"</p>
    <input type="button" value="Click Me!" onclick="last()" />

    <p><label id="lblLastChar" style="font:14px Verdana;"></label></p>     
</body>

<script>
    function last() {
        var sWord = 'Computer Science';
        document.getElementById('lblLastChar').innerHTML = 
            'The Last Character is <b>' +
                sWord.charAt(sWord.length - 1) + '</b>';
    }
</script>
</html>

Try it

Here, I am extending the first example in article. Except, I have added the length property as the argument for the charAt() method. The property returns the total count of the words, which is “16”. However, the last character is at position 15, starting with the index value as "0".

← PreviousNext →