Hello guys in this tutorial, we are going to learn how finding the longest word in a string using JavaScript.
There are many way to find longest word in a string but we can use for this solution, we will use the Array.prototype.reduce().
The reduce() method applies a function against an accumulator and each value of the array (from left-to-right) to reduce it to a single value.
reduce() executes a callback function once for each element present in the array. You can provide an initial value as the second argument to reduce, here we will add an empty string “ ”.
[].reduce(function(previousValue, currentValue) {...}, “”);
Finding the longest word step 1:
Add below code inside index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Finding the longest word in a string using JavaScript</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta https-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="center-center">
<span>( Finding the longest word in a string using JavaScript )</span>
<h1 id="string">Stack Findover is the largest, most trusted online community for developers</h1>
<button id="string_check" onclick="onbtnclick()">Click me</button>
</div>
<script type="text/javascript">
function onbtnclick() {
document.getElementById("string_check").disabled = true;
const str = document.getElementById("string").textContent;
const findLongest = (str = '') => {
const strArr = str.split(' ');
const word = strArr.reduce((acc, val) => {
let { length: len } = acc;
if(val.length > len){
acc = val;
};
return acc;
}, '');
return word;
};
function matchString() {
var string = str;
var result = string.match(findLongest(str));
document.getElementById('string').innerHTML = 'Output: '+'{ ' +result+ ' }';
} matchString()
}
</script>
</body>
</html>
Finding the longest word step 2:
Then we need to add code for style.css which code i provide in below screen.
* {
padding: 0;
margin: 0;
font-family: 'IBM Plex Sans', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #f1f2f3;
}
h1#string {
color: #0f62fe;
font-size: 20px;
font-weight: 600;
}
span {
color: #FF5722;
display: block;
margin: 20px 0;
font-size: 18px;
}
button {
background-color: #0f62fe;
border: 1px solid transparent;
color: #fff;
cursor: pointer;
padding: 10px 20px;
display: block;
font-size: 18px;
width: 100%;
text-align: center;
outline: 0;
margin-top: 20px;
}
.center-center {
max-width: 500px;
margin: auto;
position: relative;
}
.center-center:before {
content: "{";
position: absolute;
top: 0;
left: -100px;
font-size: 180px;
display: block;
color: #0f62fe;
}
.center-center:after {
content: "}";
position: absolute;
top: 0;
right: -100px;
font-size: 180px;
display: block;
color: #0f62fe;
}