November 17, 2021

How to Find the Shortest Word in a String in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to find the shortest word in a string javascript. A sentence is formed using multiple words and each word has a certain length. Also, there is a possibility that a sentence can have multiple words of the same length.

Finding the shortest word in a string is not straightforward since there is no built-in method to get it. As a newbie, it could be a bit tricky for you, but as a web developer, you should be aware of how to do so.

There are numerous ways to find the shortest word in a string, but I will show you one of the simplest methods. We will create a custom method that will take a string as a parameter and will return the shortest word in that string. Feel free to customize this method to fit your needs.

In the following example, we will enter a random sentence in the textarea. Upon click of a button, we will pick the shortest word in the sentence and display it on the screen. Please have a look over the code example and the steps given below.

HTML & CSS

We have 4 elements in the HTML file (div, textarea, h1, and button). 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">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div>
        <textarea placeholder="Enter Sentence" cols="50" rows="5"></textarea>
        <button>Get</button>
        <h1>Result</h1>
    </div>
    
    <script src="script.js"></script>
</body>
</html>

div {
    display: flex;
    flex-direction: column;
    align-items: center;
}


button {
    padding: 5px 20px;
    margin-top: 15px;
}

Javascript

We have selected the button, h1, and textarea elements using document.querySelector() method and stored them in the btnGet, result, and input variables respectively.
We have attached click event listener to the button element.

In the event handler function, we are getting value from textarea element using value property and storing it in the sentence variable.
We are calling findShortestWord() method and passing sentence as a parameter. The returned string will be displayed in the h1 element using the innerText property.
In the findShortestWord() method, we are using the split() method to get rid of spaces in the string. This method returns an array of words and we are storing that in the wordsArray variable.

A string can have special characters, so it is important to get rid of them. We are using the map() method to loop through each word. In the anonymous function, we are using replace() method and passing it a regex string to get rid of special characters if any.
We are calling reduce() method and passing it an anonymous function as a parameter. In this function, we are simply comparing the length of the previous word with the length of the current word. At the end of execution, we will have the shortest word in the string. We are storing it in the shortest variable and returning it.

let btnGet = document.querySelector("button");
let result = document.querySelector("h1");
let input = document.querySelector("textarea");

btnGet.addEventListener("click", () => {
  let sentence = input.value;
  result.innerText = findShortestWord(sentence);
});

function findShortestWord(sentence) {
  let wordsArray = sentence.split(" ");
  wordsArray = wordsArray.map((word) => word.replace(/\./g, ""));
  let shortest = wordsArray.reduce((current, previous) => {
    return current.length < previous.length ? current : previous;
  });
  return shortest;
}

You May Also Like: