How to Create a Find and Replace Text using JavaScript
In this Javascript tutorial, we will learn how to implement a Find and Replace Text functionality using JavaScript.
This handy script can be useful when you want to quickly modify specific content without manually editing the HTML.
Project Source Code:
<!DOCTYPE html>
<html>
<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>Find And Replace</title>
<style>
body{ font-family: sans-serif; }
.form-container{ display: flex; flex-direction: row;
align-items: center; justify-content: center;
margin-top: 50px; margin-bottom: 20px;
}
.form-container input[type="text"]{ width: 200px; padding: 10px;
margin-right: 10px; border:none;
border-radius: 5px; color: #333;
font-size: 16px; box-shadow: 0 0 5px #ccc;
}
.form-container button{ padding: 10px 20px; border: none;
border-radius: 5px; background-color: #26ff;
color: #fff; font-size: 16px; cursor: pointer;
}
#table-search{ border-collapse: collapse; width: 100%; max-width: 800px;
margin: 0 auto; font-size: 16px; color: #333; }
#table-search th{ background-color: #555; color:#fff; text-align: center;
padding: 10px; border-bottom: 2px solid #ddd; }
#table-search td{ padding: 10px; border-bottom: 1px solid #ccc; }
</style>
</head>
<body>
<div class="form-container">
<input type="text" id="find-input" placeholder="Find">
<input type="text" id="replace-input" placeholder="Replace">
<button id="replace-button">Find and Replace</button>
</div>
<table id="table-search">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jane</td>
<td>28</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Michael</td>
<td>42</td>
<td>New York</td>
</tr>
<tr>
<td>Emily</td>
<td>35</td>
<td>San Francisco</td>
</tr>
<tr>
<td>Bob</td>
<td>40</td>
<td>Chicago</td>
</tr>
<tr>
<td>David</td>
<td>19</td>
<td>Miami</td>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Anna</td>
<td>56</td>
<td>Chicago</td>
</tr>
<tr>
<td>Mark</td>
<td>40</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
<script>
/*
This function finds and replaces the given text in the HTML table.
It retrieves the values for "find" and "replace" from input fields with ids
"findInput" and "replaceInput".
It then retrieves all the td elements in the table using the "myTable" id
and loops through each cell.
If the innerHTML of the cell contains the "find" text,
it replaces all occurrences of that text with the "replace" text.
The function use the the replace() method and RegExp.
*/
document.getElementById("replace-button").
addEventListener("click", findAndReplace);
function findAndReplace()
{
var find = document.getElementById("find-input").value;
var replace = document.getElementById("replace-input").value;
var table = document.getElementById("table-search");
var cells = table.getElementsByTagName("td");
console.log(find);
console.log(replace);
for(var i = 0; i < cells.length; i++)
{
if(cells[i].innerHTML.indexOf(find) !== -1)
{
cells[i].innerHTML =
cells[i].innerHTML.
replace(new RegExp(find,"g"), replace);
}
}
}
</script>
</body>
</html>
Script Overview:
This JavaScript script offers a simple user interface where users can enter the text to find, the replacement text, and two corresponding buttons: "Replace" and "Reset." When the user clicks the "Replace" button, the script searches for instances of the find text within a specified paragraph and replaces them with the entered replacement text.
The "Reset" button reverts the paragraph back to its original state.
OUTPUT:
