JavaScript Find and Replace Text Main text: a text area with 3 rows and 20 columns....

JavaScript Find and Replace Text

Main text: a text area with 3 rows and 20 columns. The default text is “Hello testing”. The text area cannot be empty.
• Find text: a text box for the user to key in text he/she wants to find.
• Replacement text: a text box for the user to key in the replacement text. If the find text is empty, this element should be disabled (i.e. user cannot key in anything here).
• Find and replace button: when click, it will find the occurrence of the “find text” in the source language text area and replace it with the “replacement text”. If either find text or replacement text is empty, this button is disabled. After the replacement, a message showing the number of replacements must be displayed beside the button.

After clicking the find and replace button, it should replace the text inside the Main Textbox.

Example:

Main text: Apples

Find Text: A

Replacement Text: B

After clicking the replace button, it should find all the "A" in the main text and replace with "B". So the main text now will be "Bpples".

Solutions

Expert Solution

Code:

<html>

        <head>
                <title>making use of javascript</title>     
                
                <style type = "text/css">
                
                        
                </style>
        </head>
        
        <body>
        
                <p>Content: </p>
                
                <textarea rows="3" cols="20" id = "text">Hello testing</textarea>             <!-- TEXTAREA OF 3 ROWS AND 20 COLUMNS AS MENTIONED-->
                
                <p>Find text:
                        <input type="text" id = "find_text" >
                </p>
                <p>Replacement text:
                        <input id = "replacement_text" type="text">
                </p>
                <button id = "button" type="button">Find & Replace</button>
                <text id="print_count"></text>                                                                 <!-- TEXT FOR WRITING THE COUNT OF REPLACED-->
        
                
                <script type = "text/javascript">                                                                // JAVASCRIPT STARTED
                
                        document.getElementById("replacement_text").disabled=true;                  // INITIALLY DISABLED THE BUTTON AND REPLACEMENT TEXT 
                        
                        document.getElementById("button").disabled=true;
                
                        document.getElementById("find_text").addEventListener("change", function(){      // IF CHANGE IN FIND TEXT OCCURS AND LENGTH OF FIND TEXT IS NOT EMPTY THEN ENABLE THE REPLACEMENT VALUE BY MAKING DISABLED = FALSE 
                                if( document.getElementById("find_text").value === ""){
                                        document.getElementById("replacement_text").disabled=true;
                                        document.getElementById("button").disabled=true;
                                }else{
                                        document.getElementById("replacement_text").disabled=false;                   
                                        if(document.getElementById("replacement_text").value != ""){
                                                document.getElementById("button").disabled=false;
                                        }
                                }
                        });
                        
                        document.getElementById("replacement_text").addEventListener("change", function(){   // SAME IF CHANGE IN REPLACEMENT TEXT HAPPENS ENABLE THE BUTTON 
                                if(document.getElementById("replacement_text").value === ""){
                                        document.getElementById("button").disabled=true;
                                }else{
                                        document.getElementById("button").disabled=false;
                                        
                                }
                        });
                        
                        document.getElementById("button").onclick = function(){                            // WHEN THE BUTTON IS CLICKED 
                        
                                var key = document.getElementById("find_text").value;                           // GET THE VALUE FROM FIND TEXT IN KEY
                                
                                var replace_with = document.getElementById("replacement_text").value;  // GET THE VALUE FROM REPLACEMENT TEXT IN REPLACE WITH
                                
                                var str = document.getElementById("text").value;                                    // GET THE VALUE OF TEXTAREA IN STR 
                                
                                var re = new RegExp(key, 'g');                                                                // MAKE A REGULAR EXPRESSION WITH KEY TO FIND "G" IS FOR GLOBAL
                                
                                var matched_words = str.match(re);                                                        // CALL MATCH FUNCTION OF STRING TO GET ALL THE MATCHED WORDS
                                var count = 0;                                                                                        // INITIALIZE THE COUNT TO 0
                                if (matched_words!== null) {                                                                   // IF MATCHED WORDS IS NOT EMPTY 
                                        count = matched_words.length;                                                            // ASSING LENGTH OF MATCHED WORDS TO COUNT 
                                }
                                var newstr = str.replace(re,replace_with);                                                   // NOW REPLACE THE STRING WITH REPLACE WITH VARIABLE BY PASSING THE REGULAR EXPRESSION OF KEY
                                document.getElementById("text").value=newstr;                                        // ASSIGN THE NEW VALUE TO TEXT AREA 
                                document.getElementById("print_count").innerHTML = count+" found "+count+" replaced";            // SHOW THE COUNT ON THE PAGE AS MENTIONED 
                        
                        }
                        
                        
                </script>
                
                        
                
        </body>
</html>

Let me know if you have any doubts or if you need anything to change. 

If you are satisfied with the solution, please leave a +ve feedback : ) Let me know for any help with any other questions.

Thank You!
===========================================================================

venereology answered 1 year ago

Next > < Previous

Related Solutions

The Lo Shu Magic Square is a grid with 3 rows and 3 columns shown in...

The Lo Shu Magic Square is a grid with 3 rows and 3 columns shown in Figure 8-23. The Lo Shu Magic Square has the following properties: l The grid contains the numbers 1 through 9 exactly. l The sum of each row, each column, and each diagonal all add up to the same number. This is shown in Figure 8-24. In a program, you can simulate a magic square using a two-dimensional array. Design a program that initializes a...

/*Question 3: The following data contains five columns (variables) and five rows (observations). First, read the...

/*Question 3: The following data contains five columns (variables) and five rows (observations). First, read the data into SAS to create a data set. Notice that the first, third, and the fifth variable have missing values. Please replace the missing values of the first, third, and fifth variable with 30, 40, and 50, respectively. Next, for all the variables, if a value is at least 100, make an adjustment to the value such that its new value is equal to...

Consider the following game. Ann chooses rows, and Bob chooses columns. [12 marks] LMR 3 4...

Consider the following game. Ann chooses rows, and Bob chooses columns. [12 marks] LMR 3 4 2 0 1 3 3 2 4 4 4 0 0 2 1 1 0 1 U C D (a) Find all pure strategy Nash Equilibria. (b) Find the set of Rationalizable strategies for each player. Find a dominating strategy for each deletion. (c) Is there a Nash equilibrium in which Bob puts strictly positive probability on L and M but none on R?...

The Lo Shu Magic Square is a grid with 3 rows and 3 columns, shown in figure. The Lo Shu Magic Square has the following properties:

Python programmingThe Lo Shu Magic Square is a grid with 3 rows and 3 columns, shown in figure. The Lo Shu Magic Square has the following properties:The grid contains the numbers 1 through 9 exactly.The sum of each row, each column, and each diagonal all add up to the same number as shown in figure.In a program you can simulate a magic square using a two-dimensional list. Write a function that accepts a two-dimensional list as an argument and determines...

Find the area of the region enclosed by the astroid ?=1cos^3(?),?=1sin^3(?).

A cylinder with a 20 inch stroke and a 4:3 area ratio with a bore of...

A cylinder with a 20 inch stroke and a 4:3 area ratio with a bore of 6 inch diameter takes 4 seconds to extend. What is the flow required for extention?

Find the area of the region enclosed between ?(?)=?2−3?+13 and ?(?)=2?2−3?−3.

3- Find the 3 errors and correct versions in the following text. CHINA’S UNBELIAVABLE NATIONAL SAVINGS...

3- Find the 3 errors and correct versions in the following text. CHINA’S UNBELIAVABLE NATIONAL SAVINGS RATE China’s national savings rate, quite recently exceeding 50%, is the highest among the major economies in the world. In any economy, the national savings is composed of the savings of households, firms, and the government. In China the household savings, making up about half of national savings, is the biggest component of national savings. Firms also make a big contribution to China’s savings...

3- Find the 3 errors and correct versions in the following text. CHINA’S UNBELIAVABLE NATIONAL SAVINGS...

13- Find the 3 errors in the following text: A BUSINESS MEETING IN CHINA A group...

13- Find the 3 errors in the following text: A BUSINESS MEETING IN CHINA A group of managers from a multinational company planning an investment in the city of Wuhan are in a meeting with the city officials. The meeting has started with a short speech by the head of the Hubei city government while the Party Secretary of Wuhan taking notes attentively. As in every administrative unit in China, the main decision making body in Wuhan is the Party...

Subjects