Question
In: Computer Science
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 2 years agoRelated 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(?).
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.
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...
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...
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...
ADVERTISEMENT
ADVERTISEMENT
Latest Questions
- Non-constant growth model: Do=$2.00 required return on equity= 5% g= 9% n=1,2 g=7% n=3,4 g=3% n=5...
- . Find all x ∈ Z143 such that x2Ξ 7 (mod 143). Please explain all steps...
- #Python: A palindrome is a sequence of characters that reads the same backwards as forwards. For...
- Explain an example in which a variable has two different addresses at different places in a...
- Hadley, a thirty-five-year-old physician, has worked at Princeton Plainsboro Hospital for six years. She recently received...
- QUESTION 1. For each of the following, state whether the occurrence of the variable x occurs...
- According to Mike Taft of RVK, the “Markets Group” is an important unit of the Federal...
ADVERTISEMENT