Use JavaScript to find and replace text on a webpage

Posted on by

Prerequisites: Basic understanding of HTML and JavaScript.

Required Tools: A text editor (like Sublime Text, Atom, or Visual Studio Code) and a modern web browser.

Step 1: Create Your HTML File

First, create an HTML file that contains the text you want to change. We’ll also include an input field for the search term, an input field for the replacement term, and a button to execute the replacement:

<!DOCTYPE html>
<html>
<head>
    <title>Find and Replace with JavaScript</title>
</head>
<body>
    <p id="text">
        This is a simple webpage. We'll use JavaScript to find and replace text on this webpage.
    </p>

    <label for="searchTerm">Search Term:</label>
    <input type="text" id="searchTerm">

    <label for="replacementTerm">Replacement Term:</label>
    <input type="text" id="replacementTerm">

    <button onclick="findAndReplace()">Replace</button>

    <script src="script.js"></script>
</body>
</html>

Step 2: Create Your JavaScript File

Next, create a JavaScript file. In this file, we’ll define the findAndReplace function, which gets the search term and the replacement term from the input fields, retrieves the current text, replaces all occurrences of the search term with the replacement term, and then updates the text on the webpage:

function findAndReplace() {
    // get the search term and the replacement term
    var searchTerm = document.getElementById('searchTerm').value;
    var replacementTerm = document.getElementById('replacementTerm').value;

    // get the current text
    var textElement = document.getElementById('text');
    var text = textElement.innerHTML;

    // create a regular expression from the search term (g stands for global, i stands for case-insensitive)
    var searchRegEx = new RegExp(searchTerm, 'gi');

    // replace all occurrences of the search term with the replacement term
    var newText = text.replace(searchRegEx, replacementTerm);

    // update the text on the webpage
    textElement.innerHTML = newText;
}

Now, you can open your HTML file in a web browser, enter a search term and a replacement term, and click the “Replace” button to replace all occurrences of the search term with the replacement term.

Please note that this is a very basic example. In a real-world application, you would want to add error checking and possibly escape special characters in the search term to ensure they are treated as literal characters rather than as part of the regular expression syntax.