Introduction:
In today’s digital age, text comparison and similarity analysis are crucial for various applications such as plagiarism detection, content recommendation, and search engines. JavaScript provides a powerful way to calculate text similarity, allowing you to compare two pieces of text and determine how similar they are. In this tutorial, we will walk you through the process of building a simple text similarity calculator using JavaScript.
Things You Will Learn:
By the end of this tutorial, you will have learned how to:
- Create a basic HTML structure for text input and result display.
- Implement JavaScript functions to calculate text similarity using the Jaccard similarity coefficient.
- Add an event listener to trigger similarity calculation when a button is clicked.
Video Tutorial:
Do take a look at my YouTube channel. Whether you are looking to start a new career or just looking to enhance your existing skill set, we have got you covered. Subscribe now and take your first step towards becoming a professional web developer!
Project Folder Structure:
Before we start coding we take a look at the project folder structure. We start by creating a folder called – ”Text Similarity Checker”. Inside this folder, we have 3 files. These files are :
- index.html
- style.css
- script.js
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Text Similarity Checker</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1>Text Similarity Checker</h1>
<label for="text1">Enter The First Field:</label>
<input type="text" id="text1" placeholder="Text 1" />
<label for="text2">Enter The Second Field:</label>
<input type="text" id="text2" placeholder="Text 2" />
<button id="calculateButton">Calculate Similarity</button>
<p>Similarity: <span id="result"></span>%</p>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style our game using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #f69f40;
}
.container {
background-color: #1e2e2d;
width: min(90%, 500px);
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
padding: 3em;
border-radius: 0.5em;
}
.container h1 {
color: #f69f40;
}
label {
display: block;
color: #a0a0a0;
margin-bottom: 0.3em;
}
label[for="text1"] {
margin-top: 2em;
}
input#text1 {
margin-bottom: 2em;
}
input {
display: block;
width: 100%;
padding: 1em 0.5em;
border-radius: 0.3em;
background-color: #354342;
border: none;
outline: none;
color: #ffffff;
}
button {
display: block;
margin: 2em auto 1em auto;
background-color: #f69f40;
color: #1e2e2d;
border: none;
outline: none;
padding: 1em 2em;
border-radius: 0.5em;
font-weight: 600;
}
p {
color: #ffffff;
text-align: center;
}
JS:
Finally, we add functionality using Javascript. Once again copy the code below and paste it into your script file.
//Get input elements and result element
const text1Input = document.getElementById("text1");
const text2Input = document.getElementById("text2");
const resultElement = document.getElementById("result");
const calculateButton = document.getElementById("calculateButton");
//Function to calculate similarity
let calculateSimilarity = (text1, text2) => {
//Tokenize the input texts (split them into words)
const tokens1 = text1.split(" ");
const tokens2 = text2.split(" ");
//Create sets from the tokens to remove duplicates
const set1 = new Set(tokens1);
const set2 = new Set(tokens2);
//Calculate the intesection of the sets
const intersection = new Set([...set1].filter((x) => set2.has(x)));
//Calculate union of the sets
const union = new Set([...set1, ...set2]);
//Calculate the Jaccard similarity
const similarity = (intersection.size / union.size) * 100;
//Multiply by 100 to get percentage
return similarity;
};
//Add click event listener to the calculate button
calculateButton.addEventListener("click", () => {
//Get the values from input fields
const text1 = text1Input.value;
const text2 = text2Input.value;
const similarity = calculateSimilarity(text1, text2);
resultElement.textContent = similarity.toFixed(2);
});
Conclusion:
Congratulations! You have successfully created a text similarity calculator using JavaScript. This simple project can serve as a foundation for more advanced text analysis applications. You’ve learned how to tokenize text, calculate set intersections and unions, and use the Jaccard similarity coefficient to determine text similarity.
