June 24, 2020

How to Get Count of a Character in a String in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to get count of a character in a string in javascript. You may encounter a situation in your web project where you want to know how many instances of a particular character are present in a string or just want to know how many times a character got repeated in a string.

If you are very new to javascript, then getting the count of a particular character in a string can be very tricky. Also, there are multiple solutions for this problem, but I am going to show you one of the easiest solutions.

A string is nothing more than a combination of different characters. We will convert those characters into an array using Array.from() method. Then, we will use the filter() method to run a check for a certain character in that array. As a result, it will return an array of that particular character and we will use the length property to get its count.

In the following example, we have one hardcoded string in a global variable. Upon click of a button, we will get the count of “l” character in the string and display that on the screen. Please have a look over the code example and the steps given below.

HTML & CSS

We have 3 elements in the HTML file (div, button, and h1). The div element is just a wrapper for the rest of the elements.
The button element has “Get” and the h1 element has “Result” as innerText.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.

We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    
    <div>
        <button>Get</button>
        <h1>Result</h1>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

body {
    text-align: center;
}

div {
    display: inline-block;
}

button {
    display: inline-block;
    padding: 10px 20px;
}

Javascript

We have selected the button element and the h1 element using the document.querySelector() method and stored them in btnGet and result variables respectively.

We have a global variable myString which holds “This is a hello world application” as a value.
We have attached a click event listener to the button element.
In the event handler function, we are simply creating an array of characters using the Array.from() method by passing it myString as a parameter.

We are using the filter() method to loop through each character and we are checking if it is equal to the “l” character. The toLowerCase() method makes sure that the comparison should be case-insensitive. You can omit this method if you are looking for a case-sensitive comparison.
Finally, we have our filtered array and we are getting the length of that array using the length property.
The length represents the count of “l” character and we are displaying that in the h1 element using the innerText property.

let btnGet = document.querySelector('button');
let result = document.querySelector('h1');

let myString = 'This is a hello world application';

btnGet.addEventListener('click', () => {
    result.innerText = Array.from(myString).filter(char => char.toLowerCase() == 'l').length;
});

You May Also Like: