How to Remove a Word from Paragraph in JavaScript

Submitted by razormist on Monday, December 19, 2022 - 23:06.

How to Remove a Word from Paragraph in JavaScript

Introduction

In this tutorial we will create a How to Remove a Word from Paragraph in JavaScript. This tutorial purpose is to teach how to remove a single word from a paragraph. This will cover all the important function that will remove a word from the paragraph. I will provide a sample program to show the actual coding of this tutorial.

This tutorial is simple and easy to understand just follow the instruction I provided and you can do it without a problem. This program can be use to any publishing system when you need to remove a certain words. I will give my best to provide you the easiest way of creating this program remove word from paragraph. So let's do the coding.

Before we get started:

This is the link for the template that i used for the layout design https://getbootstrap.com/.

Creating The Interface

This is where we will create a simple interface for our application. This code will only display form inputs and the paragraph. To create this simply copy and write it into your text editor, then save it as index.html.

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" />
                <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
        </head>
<body>
        <nav class="navbar navbar-default">
                <div class="container-fluid">
                        <a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
                </div>
        </nav>
        <div class="col-md-3"></div>
        <div class="col-md-6 well">
                <h3 class="text-primary">How to Remove a Word from Paragraph</h3>
                <hr style="border-top:1px dotted #ccc;"/>
                <div class="col-md-4">
                        <form>
                                <div class="form-group">
                                        <input type="text" class="form-control" placeholder="Enter word" id="content"/>
                                </div>
                                <button type="button" onclick="removeWord();" class="btn btn-primary btn-block">Remove</button>
                        </form>
                </div>
                <div class="col-md-8">
                        <p id="result"></p>
                </div>
        </div>
</body>
<script src="script.js"></script>
</html>

Creating JavaScript Function

This is where the main function of the application is. This code will dynamically remove the word that you search in the texbox. To do this just copy and write these block of codes inside the text editor and save it as script.js.

var paragraph = "The Solar System consists of the Sun Moon and Planets. It also consists of comets, meteoroids and asteroids. The Sun is the largest member of the Solar System. In order of distance from the Sun, the planets are Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune and Pluto; the dwarf planet. The Sun is at the centre of the Solar System and the planets, asteroids, comets and meteoroids revolve around it.";
        
document.getElementById('result').innerHTML = paragraph;
 
 
var newParagraph = "";
 
 
function removeWord(){
        var content = document.getElementById('content');
        var word = content.value;
 
        if(content.value == ""){
                alert("Please enter something first!");
        }else{
                if(newParagraph == ""){
                        newParagraph = paragraph.replace(new RegExp(word, 'g'), "");
                }else{
                        newParagraph = newParagraph.replace(new RegExp(word, 'g'), "");
                }
                
                document.getElementById('result').innerHTML = newParagraph;
                
                content.value = "";
        }
}

In the first line of code we just simply set the paragraph into a variable so that it will be easier to call this later on. We then display the paragraph into the html page content. We created a method called removeWord(). In this method we just simple create some variables and set their corresponding function.

In order to remove a word, we just use a special JavaScript function called replace(). This function will remove a targeted string base on the condition of the regex you have set, in my case I use a condition that will only remove words in the paragraph.

Output:

The How to Remove a Word from Paragraph in JavaScript source code that I provide can be download below. Please kindly click the download button.

There you have it we successfully created How to Remove a Word from Paragraph in JavaScript. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!

More Tutorials for JavaScript Language

JavaScript Tutorials

Add new comment

490 views