How to find unique characters of a string in JavaScript?

Front End Technology Javascript Web Development

In this tutorial, we will see different approaches to finding unique characters in a string. Simply say when a character once occurred in the string then it will not be included in the string again.

Example

Input

tutorialspoint

Output

tuorialspn

Method 1: Using the Set

So, in this approach, we will use a set data structure as you know it contains only unique elements inside it. So, we will take input from the user then we will convert that into an array by splitting then we will create a new set and put all the elements into that and again we will take back all the elements from the set to string and it will be containing only unique elements.

Syntax

Following is the syntax to find unique characters of a string:

val1=val1.split("")
val1=new Set(val1)
val1=[...val1].join("")

Algorithm

STEP 1 − Create a variable and assign a string. Alternative assign the string value taken from user input.
STEP 2 − Apply the split("") method on the string to split it into an array of characters.
STEP 3 − Define a new set passing the array of characters as the argument. The new set will contain only unique characters.
STEP 4 − Join the characters from the set to create again a string.
STEP 5 − Display the string.

Example

Let’s see the program to find unique characters of a string using Set.


<!DOCTYPE html>
<html>
<body>
   <p> Enter a string and click on the button to find unique characters</p>
   <form>
      Enter string: <input type="text" id="val1" /><br><br>
      <input Value="Calculate" type="button" onClick="calculate()"/>
   </form>
   <p>Unique char of string:<span style="font-weight: bold;" id= "calcOutput">.....</span></p>
   <script>
      function calculate(){
         val1=document.getElementById('val1').value
         val1=val1.split("")
         val1=new Set(val1)
         val1=[...val1].join("")
         document.getElementById('calcOutput').innerHTML=val1
      }
   </script>
</body>
</html>

Method 2: Loop with the indexOf() Method

We will take a variable and while iterating through the string we will check for the current character if it is occurring the first time that means the character at that position is -1 in the string then we will include that character else we will ignore it.

Syntax

Following is the syntax to find unique characters of a string using indexOf() method:

for(var i=0;i<val1.length;i++){
   if(UniqueAns.indexOf(val1.charAt(i))==-1)
   UniqueAns= UniqueAns+val1[i];
}

Example

In the following program, we use the indexOf() method to find the unique characters in the string.


<!DOCTYPE html>
<html>
<body>
   <p> Enter a string and click on the Calculate button to find unique characters.</p>
   <form>Enter string: <input type="text" id="val1" /><br>
      <input Value="Calculate" type="button" onClick="calculate()"/>
   </form>
   <p>Unique char of string: <span style="font-weight: bold;" id= "calcOutput">.....</span></p>
   <script>
      function calculate(){
         val1=document.getElementById('val1').value
         var UniqueAns="";
         for(var i=0;i<val1.length;i++){
            if(UniqueAns.indexOf(val1.charAt(i))==-1)
            UniqueAns= UniqueAns+val1[i];
         }
         document.getElementById('calcOutput').innerHTML=UniqueAns
      }
   </script>
</body>
</html>

Method 3: Using Loop with includes() Method

This is similar to the above approach but here we will use the includes method to check if the string contains the current char if it returns true then ignore it else if the function returns false it means we have visited this char for the first time so include it.

Syntax

Following is the syntax to find unique characters of a string:

for(var i=0;i<val1.length;i++){
   if(UniqueAns.includes(val1[i])==false)
   UniqueAns= UniqueAns+val1[i];
}

Example

In the following program, we use the includes() method to find the unique characters in the string.


<!DOCTYPE html>
<html>
<body>
   <p> Enter a string and click on the "Find Unique Chars" button to find the unique characters</p>
   <form>Enter string: <input type="text" id="val1" /><br><br>
      <input Value="Find Unique Chars" type="button" onClick="calculate()" />
   </form>
   <p>Unique char of string:<span style="font-weight: bold;" id= "calcOutput">.....</span></p>
   <script>
      function calculate(){
         val1=document.getElementById('val1').value
         var UniqueAns="";
         for(var i=0;i<val1.length;i++){
            if(UniqueAns.includes(val1[i])==false)
            UniqueAns= UniqueAns+val1[i];
         }
         document.getElementById('calcOutput').innerHTML=UniqueAns
      }
   </script>
</body>
</html>